- 线性插值动画：
- [Storyboard]基本属性：
TargetProperty：目标属性
TargetName：目标名称
From：指向属性的初始值；(可省略)
To/By：（二选一）
To：指向属性动画完成后的值；（可省略）
By：指向属性初始值增加的值；（可省略）
Duration：动画执行时间：格式：hh:mm:ss（如：0:0:1表示动画执行1s）
AutoReverse：时间线（动画）达到Duration终点时是否倒退（true/false）
RepeatBehavior：表示时间线（动画）播放次数
·Forever：表示动画一直运行；
·RepeatBehavior = "3x"：表示动画执行3次（次数后面加‘x’作为原意字符）
·"[天.]hh:mm:ss[.秒的小数部分]"：等于此格式表示 动画重复执行时间
例（利用时间触发器）：
<StackPanel x:Name=<span>"</span><span>abc</span><span>"</span>>
<Rectangle x:Name=<span>"</span><span>rect</span><span>"</span> Width=<span>"</span><span>0</span><span>"</span> Height=<span>"</span><span>100</span><span>"</span>>
<Rectangle.Fill>
<SolidColorBrush Color=<span>"</span><span>Blue</span><span>"</span>/>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent=<span>"</span><span>Loaded</span><span>"</span>><span>//</span><span>加载事件触发器</span>
<BeginStoryboard>
<Storyboard RepeatBehavior=<span>"</span><span>Forever</span><span>"</span> AutoReverse=<span>"</span><span>True</span><span>"</span>><span>//</span><span>设置动画倒退并无限播放</span>
<<span>DoubleAnimation
Storyboard.TargetName</span>=<span>"</span><span>rect</span><span>"//目标属性名称</span><span>
Storyboard.TargetProperty</span>=<span>"</span><span>Width</span><span>"//设置目标属性</span><span>
From</span>=<span>"</span><span>100</span><span>"</span> To=<span>"</span><span>200</span><span>"</span> Duration=<span>"</span><span>0:0:3</span><span>"</span> />//From：设置初始属性的值 To：设置最后的属性的值 Duration:设置动画播放时间为3s
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
2.[Storyboard]动画类型属性：
DoubleAnimation：变化动画
·TarnslateTransform：实现偏移动画
·RotateTransform：实现旋转动画
·ScaleTransform：实现缩放动画
例：
<Canvas x:Name=<span>"</span><span>canvasS</span><span>"</span> Loaded=<span>"</span><span>Canvas_Loaded</span><span>"</span>>
<Canvas.Resources>
<Storyboard x:Key=<span>"</span><span>storyBoard</span><span>"</span>>
<DoubleAnimation Storyboard.TargetName=<span>"</span><span>scaleTransfrom</span><span>" </span><span>
Storyboard.TargetProperty</span>=<span>"</span><span>ScaleY</span><span>"</span><span>
From</span>=<span>"</span><span>1</span><span>"</span> To=<span>"</span><span>2</span><span>"</span> Duration=<span>"</span><span>0:0:3</span><span>" //设置scaleTransfrom沿Y轴放大两倍</span><span>
AutoReverse</span>=<span>"</span><span>True</span><span>"</span> RepeatBehavior=<span>"</span><span>Forever</span><span>"</span>/>
</Storyboard>
</Canvas.Resources>
<Rectangle x:Name=<span>"</span><span>rectangle</span><span>"</span> Height=<span>"</span><span>50</span><span>"</span> Width=<span>"</span><span>50</span><span>"</span> Canvas.Left=<span>"</span><span>75</span><span>"</span> Canvas.Top=<span>"</span><span>75</span><span>"</span> Fill=<span>"</span><span>Blue</span><span>"</span>>
<Rectangle.RenderTransform>
<ScaleTransform x:Name=<span>"</span><span>scaleTransfrom</span><span>"</span>/>//设置属性名称为ScaleTransform
</Rectangle.RenderTransform> <br /> </Rectangle> <br /> </Canvas> <br /><span>private</span><span>void</span> Canvas_Loaded(<span>object</span><span> sender, RoutedEventArgs e) <br />{<br /> rectangle.BeginStoryboard((Storyboard)canvasS.Resources[</span><span>"</span><span>storyBoard</span><span>"</span><span>]); <br />}</span>
ColorAnimation：颜色渐变动画
例1（利用事件，在后台事件控制播放动画 ）：
<Window.Resources>
<Storyboard x:Key=<span>"</span><span>storyboard1</span><span>"</span>>
<ColorAnimation From=<span>"</span><span>Red</span><span>"</span> To=<span>"</span><span>Yellow</span><span>" //从红色渐变成黄色</span><span>
Storyboard.TargetName</span>=<span>"</span><span>button1</span><span>"</span><span>
Storyboard.TargetProperty</span>=<span>"</span><span>(Button.Background).(SolidColorBrush.Color)</span><span>" //(Button.Background).(SolidColorBrush.Color)表示目标属性为Button.Background类型为SolidColorBrush.Color的Color属性</span><span>
Duration</span>=<span>"</span><span>0:0:5</span><span>"</span>
></ColorAnimation>
</Storyboard>
</Window.Resources>
<Grid>
<Button x:Name=<span>"</span><span>button</span><span>"</span> Content=<span>"</span><span>start</span><span>"</span> Margin=<span>"</span><span>10,10,10,0</span><span>"</span> VerticalAlignment=<span>"</span><span>Top</span><span>"</span> Click=<span>"</span><span>button_Click</span><span>"</span>/>
<Button x:Name=<span>"</span><span>button1</span><span>"</span> Content=<span>"</span><span>Test</span><span>"</span> Margin=<span>"</span><span>10,41,10,0</span><span>"</span> VerticalAlignment=<span>"</span><span>Top</span><span>"</span>/>
</Grid>
<span>private</span><span>void</span> button_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
button1.BeginStoryboard((Storyboard)</span><span>this</span>.Resources[<span>"</span><span>storyboard1</span><span>"</span><span>]);
}</span>
例2（使用触发器控制播放动画）：
<Button Content="Another Button" Height="30" Width="200" HorizontalAlignment="Left">
<Button.Background>
<SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
</Button.Background>
<Button.Triggers>
<!-- Animates the color of the brush used to paint the second button from red to blue . -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="myAnimatedBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:7" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
PointAnimation：Path图形动画
在PathGeometry创建图形，改变图形中的某些点实现动画
例：扇形动画
利用四条曲线组合成一个圆，最后用一条直线连接圆心组成一个闭合图形，控制第三个扇形的第三个点，实现小精灵张嘴闭嘴的动画
<Window.Resources>
<Storyboard x:Name="storyboard1" x:Key="storyBoard">
<PointAnimation From="60,10" To="100,50" Duration="0:0:2"
Storyboard.TargetName="bezierSegment" Storyboard.TargetProperty="Point3"
RepeatBehavior="5" AutoReverse="True"
/>
</Storyboard>
</Window.Resources>
<StackPanel x:Name="path" Loaded="StackPanel_Loaded">
<Button Content="运行动画" Click="Button_Click"/>
<Path Fill="#FF4080FF" HorizontalAlignment="Left" Height="100" Width="100" Margin="162,164,0,0" VerticalAlignment="Top" Stretch="Fill">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="100,50">
<BezierSegment Point1="100,77.6142" Point2="77.6142,100" Point3="50,100"></BezierSegment>
<BezierSegment Point1="22.3858,100" Point2="0,77.6142" Point3="0,50"></BezierSegment>
<BezierSegment Point1="0,22.3858" Point2="22.3858,0" Point3="50,0"></BezierSegment>
<BezierSegment x:Name="bezierSegment" Point1="77.6142,0" Point2="100,22.3858" Point3="100,50"></BezierSegment>
<LineSegment Point="50,50"/>
<!--形成一个闭合图形-->
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</StackPanel>
private void Button_Click(object sender, RoutedEventArgs e)
{
path.BeginStoryboard((Storyboard)this.Resources["storyBoard"]);
}
原文：http://www.cnblogs.com/jingxuan-li/p/7075493.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！