首页 > 代码库 > WPF(Windows10通用应用程序开发) 线性插值动画 or 帧动画学习笔记及实例
WPF(Windows10通用应用程序开发) 线性插值动画 or 帧动画学习笔记及实例
- 线性插值动画：
- [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="abc"> <Rectangle x:Name="rect" Width="0" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Loaded">//加载事件触发器 <BeginStoryboard> <Storyboard RepeatBehavior="Forever" AutoReverse="True">//设置动画倒退并无限播放 <DoubleAnimation Storyboard.TargetName="rect"//目标属性名称 Storyboard.TargetProperty="Width"//设置目标属性 From="100" To="200" Duration="0:0:3" />//From：设置初始属性的值 To：设置最后的属性的值 Duration:设置动画播放时间为3s </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </StackPanel>
2.[Storyboard]动画类型属性：
DoubleAnimation：变化动画
·TarnslateTransform：实现偏移动画
·RotateTransform：实现旋转动画
·ScaleTransform：实现缩放动画
例：
<Canvas x:Name="canvasS" Loaded="Canvas_Loaded"> <Canvas.Resources> <Storyboard x:Key="storyBoard"> <DoubleAnimation Storyboard.TargetName="scaleTransfrom" Storyboard.TargetProperty="ScaleY" From="1" To="2" Duration="0:0:3" //设置scaleTransfrom沿Y轴放大两倍 AutoReverse="True" RepeatBehavior="Forever"/> </Storyboard> </Canvas.Resources> <Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Blue"> <Rectangle.RenderTransform> <ScaleTransform x:Name="scaleTransfrom"/>//设置属性名称为ScaleTransform
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
private void Canvas_Loaded(object sender, RoutedEventArgs e)
{
rectangle.BeginStoryboard((Storyboard)canvasS.Resources["storyBoard"]);
}
ColorAnimation：颜色渐变动画
例1（利用事件，在后台事件控制播放动画）：
<Window.Resources>
<Storyboard x:Key="storyboard1">
<ColorAnimation From="Red" To="Yellow" //从红色渐变成黄色
Storyboard.TargetName="button1"
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" //(Button.Background).(SolidColorBrush.Color)表示目标属性为Button.Background类型为SolidColorBrush.Color的Color属性
Duration="0:0:5"
></ColorAnimation>
</Storyboard>
</Window.Resources>
<Grid>
<Button x:Name="button" Content="start" Margin="10,10,10,0" VerticalAlignment="Top" Click="button_Click"/>
<Button x:Name="button1" Content="Test" Margin="10,41,10,0" VerticalAlignment="Top"/>
</Grid>
private void button_Click(object sender, RoutedEventArgs e)
{
button1.BeginStoryboard((Storyboard)this.Resources["storyboard1"]);
}
例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"]);
}
WPF(Windows10通用应用程序开发) 线性插值动画 or 帧动画学习笔记及实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。