等待动画
因为与互联网远程服务器通讯过程可能变幻莫测，我们决定构造一个等待动画，告诉用户耐心等待数据的保存和检索，最近非常流行使用一系列的小圆圈排列成一个圆圈构成等待动画，在等待过程中，每个小圆圈逐个变换颜色和不透明度来表示进度
图6.等待动画
Silverlight 2等待动画代码
＜!-- Wait Animation --＞
＜Grid
x:Name="RetrieveStoredLinksMask" Visibility="Collapsed" ＞
＜Rectangle
Fill="Black" Opacity=".7" RadiusX="13" RadiusY="13"/＞
＜StackPanel ＞
＜Border x:Name="brdWaitAnimationRetrieveStoredLinks"
BorderThickness="0"
BorderBrush="#FF000000"
Margin="0,40,0,20"
Height="64"
Width="64" ＞
＜Border.Background＞
＜LinearGradientBrush
EndPoint="0.5,1"
StartPoint="0.5,0"＞
＜GradientStop
Color="#FF7A7777"/＞
＜GradientStop
Color="#FF181717" Offset="1"/＞
＜/LinearGradientBrush＞
＜/Border.Background＞
＜Grid
ShowGridLines＞="False" ＞
＜Grid.ColumnDefinitions＞
＜ColumnDefinition
Width="Auto" /＞
＜ColumnDefinition
Width="Auto"/＞
＜ColumnDefinition /＞
＜ColumnDefinition
Width="Auto" /＞
＜/Grid.ColumnDefinitions＞
＜Grid.RowDefinitions＞
＜RowDefinition /＞
＜RowDefinition
Height="Auto" /＞
＜RowDefinition
Height="Auto" /＞
＜RowDefinition /＞
＜/Grid.RowDefinitions＞
＜Ellipse x:Name
="waitAnimationCircle1" Grid.Row
="3" Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,-10,0,0"
Height="16" Width="16" Fill="White" /＞
＜Ellipse x:Name="waitAnimationCircle2"
Grid.Row="1"
Grid.Column="0" Margin="6,2,0,0"
Height="16"
Width="16" Fill="#FFA7A6A6" /＞
＜Ellipse x:Name="waitAnimationCircle3"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,0,-10" Height="16"
Width="16" Fill="#FFA7A6A6" /＞
＜Ellipse x:Name
="waitAnimationCircle4"
Grid.Row="1"
Grid.Column="3"
Margin="0,0,6,0"
Height="16"
Width="16" Fill="#FFA7A6A6" /＞
＜Ellipse x:Name
="waitAnimationCircle5"
Grid.Row="2"
Grid.Column="3"
Margin="0,0,6,0"
Height="16"
Width="16" Fill="#FFA7A6A6" /＞
＜
Ellipse x:Name
="waitAnimationCircle6" Grid.Row="2"
Grid.Column="0"
Margin="6,2,0,0"
Height="16"
Width="16" Fill="#FFA7A6A6" /＞
＜/Grid＞
＜/Border＞
＜Border
Background="White"
CornerRadius="5"
Margin="20" ＞
＜TextBlock
x:Name="txbRetrieveStoredLinksResults"
HorizontalAlignment="Center"
TextWrapping="Wrap"
Text=""
Foreground="Black"
TextAlignment="Center" /＞
＜/Border＞
＜Button x:Name="btnRetrieveStoredLinksMaskClose" Click
="btnRetrieveStoredLinksMaskClose_Click"
HorizontalAlignment="Center" Margin="20"
Width="100" Content="Cancel"＞＜/ Button＞
＜/StackPanel＞
＜/Grid＞＜!
--End of Wait Animation --＞
//This wait animation can be started by calling its Begin() method
and later stopped by calling its Stop() method.
RetrievalCircleAnimation.Begin();
...
RetrievalCircleAnimation.Stop();
|
构造WPF/Silverlight动画是Expression Blend的长处，在这个案例中，动画通过使用关键帧改变小圆圈的颜色来实现旋转效果，有用的构造动画的技术将会被吸收到更大的项目中，然后用Blend创建一个独立的Silverlight项目，当动画被提炼后，就会进入到主项目中。
图7. Expression Blend等待动画进度计划
检索设计弹出式Expression Blend动画
＜!-- Wait Animation for Retrieve Designs Popup --＞
＜Storyboard x:Name
="RetrievalCircleAnimation"
RepeatBehavior="Forever"
SpeedRatio=".25"＞
＜ColorAnimationUsingKeyFrames
Storyboard.TargetName
="waitAnimationCircle6"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFFFFFFF"/＞
＜SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFA7A6A6"/＞
＜/ColorAnimationUsingKeyFrames＞
＜ColorAnimationUsingKeyFrames Storyboard.TargetName="waitAnimationCircle1"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFA7A6A6"/＞
＜SplineColorKeyFrame KeyTime="00:00:00.6000000" Value="#FFFFFFFF"/＞
＜/ColorAnimationUsingKeyFrames＞
＜ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle2"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFFFFFFF"/＞
＜SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FFA7A6A6"/＞
＜/ColorAnimationUsingKeyFrames＞
＜ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle3"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#FFFFFFFF"/＞
＜ SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFA7A6A6"/＞
＜/ColorAnimationUsingKeyFrames＞
＜ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle4"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFFFFFFF"/＞
＜SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFA7A6A6"/＞
＜/ColorAnimationUsingKeyFrames＞
＜ColorAnimationUsingKeyFrames
Storyboard.TargetName="waitAnimationCircle5"
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00"＞
＜SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/＞
＜SplineColorKeyFrame KeyTime="00:00:00.6000000" Value="#FFA7A6A6"/＞
＜/ColorAnimationUsingKeyFrames＞
＜/Storyboard＞
|
本站文章为和通数据库网友分享或者投稿，欢迎任何形式的转载，但请务必注明出处.
同时文章内容如有侵犯了您的权益，请联系QQ：970679559，我们会在尽快处理。