Silverlight - 动画
动画允许您创建真正的动态用户界面。 它通常用于应用效果,例如,当您在图标上移动时会变大的图标、旋转的徽标、滚动到视图中的文本等等。
有时,这些效果看起来过于浮华。 如果使用得当,动画可以通过多种方式增强应用程序。 它们可以使应用程序看起来响应更快、更自然、更直观。
例如,单击时滑入的按钮感觉就像一个真实的物理按钮,而不仅仅是另一个灰色矩形。 动画还可以引起人们对重要元素的注意,并引导用户过渡到新内容。
Silverlight 的动画方法是声明性的,而不是专注于帧动画序列。
定义动画
动画通常在资源部分中定义。 事实上,它们通常包含在故事板元素中,我们很快就会详细看到。
它提供了一个 Begin() 方法,因此可以从代码中调用动画。
动画也可以放置在控件模板的视觉状态元素内。
声明式动画
Silverlight 中的动画是声明性的。 他们描述了希望发生的事情。 让 Silverlight 来决定如何实现这一点。 因此动画通常遵循我们告诉 Silverlight 我们想要更改的内容的模式。
这始终是某些命名元素的某些属性,即 TargetName 和 TargetProperty。
<DoubleAnimation Storyboard.TargetName = "myRectangle" Storyboard.TargetProperty = "Opacity" From = "0" To = "1" Duration = "0:0:5" />
我们说我们希望如何改变该属性,在这种情况下,我们将不透明度从零值更改为一值。 换句话说,我们希望目标元素从不透明渐变为透明。
最后,我们说我们希望这需要多长时间,在本例中需要五秒钟。
此双精度动画中双精度的重要性在于,它的目标是双精度类型的属性,因此是浮点值。
如果您想要为代表颜色的属性设置动画,则可以使用颜色动画。
让我们看一个简单的双动画示例。 下面给出的是 XAML 代码,其中添加了两个按钮、一个矩形和两个故事板。
<UserControl x:Class = "DoubleAnimationExample.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> <UserControl.Resources> <Storyboard x:Name = "fadeDown"> <DoubleAnimation Storyboard.TargetName = "myRectangle" Storyboard.TargetProperty = "Opacity" From = "1" To = "0" Duration = "0:0:5" /> </Storyboard> <Storyboard x:Name = "fadeUp"> <DoubleAnimation Storyboard.TargetName = "myRectangle" Storyboard.TargetProperty = "Opacity" From = "0" To = "1" Duration = "0:0:5" /> </Storyboard> </UserControl.Resources> <Grid x:Name = "LayoutRoot"> <Rectangle x:Name = "myRectangle" Fill = "Blue" Width = "300" Height = "100" HorizontalAlignment = "Center" VerticalAlignment = "Top" Margin = "0,30" /> <Button x:Name = "fadeUpButton" Content = "Up" Width = "80" Height = "30" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "50,140,0,0" Click = "fadeUpButton_Click" /> <Button x:Name = "fadeDownButton" Content = "Down" Width = "80" Height = "30" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "50,180,0,0" Click = "fadeDownButton_Click" /> </Grid> </UserControl>
以下是 C# 中不同事件的实现。
using System.Windows; using System.Windows.Controls; namespace DoubleAnimationExample { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void fadeUpButton_Click(object sender, RoutedEventArgs e) { fadeUp.Begin(); } private void fadeDownButton_Click(object sender, RoutedEventArgs e) { fadeDown.Begin(); } } }
编译并执行上述代码后,您将看到以下输出。
![声明式动画](/silverlight/images/declarative_animation.jpg)
重复和反转
动画提供一些属性来自动重复和所有反向动画。
如果您将重复行为属性设置为时间垃圾,动画将循环重复,直到指定的时间过去,或者您可以告诉它您希望它重复多少次。
李>它支持小数点,因此您可以重复四次半。
您可以永远重复,也可以告诉动画一旦到达结尾,它应该反向运行回到开头。
关键帧动画
通常,从 A 到 B 的简单动画有点过于简单。 例如,您想要制作从地面弹起的球的动画。 这不是简单的点对点运动。 球下降,逐渐加速,然后在到达底部时反转方向。 当它回到行程的最高点时再次减速。
让我们看一下关键帧动画的简单示例。
下面给出的是 XAML 代码,其中包含带有关键帧的椭圆和双动画。
<UserControl x:Class = "LinearKeyFrames.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable = "d" Width = "400" Height = "300"> <UserControl.Resources> <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" Storyboard.TargetName = "ellipse" Storyboard.TargetProperty = "(Canvas.Left)" /> <DoubleAnimationUsingKeyFrames Storyboard.TargetName = "ellipse" Storyboard.TargetProperty = "(Canvas.Top)"> <LinearDoubleKeyFrame KeyTime = "00:00:00" Value = "0"/> <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> <LinearDoubleKeyFrame KeyTime = "00:00:01" Value = "48"/> <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> <LinearDoubleKeyFrame KeyTime = "00:00:02" Value = "48"/> <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> <LinearDoubleKeyFrame KeyTime = "00:00:03" Value = "0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name = "LayoutRoot" Background = "White"> <Canvas> <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> </Canvas> </Grid> </UserControl>
这里是鼠标左键按下事件的实现,当用户在网页上按下鼠标左键时,该事件将开始动画。
using System.Windows.Controls; using System.Windows.Input; namespace LinearKeyFrames { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); } void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { ballAnim.Begin(); } } }
编译并执行上述代码后,您将看到以下输出。
![关键帧动画](/silverlight/images/key_frame_animation.jpg)
当您单击网页时,您会看到球开始移动。
![关键帧动画移动](/silverlight/images/key_frame_animation_move.jpg)