WPF(Windows10通用应用程序开发) 线性插值动画 or 帧动画学习笔记及实例

Posted 2020-09-30 want_Success

• 线性插值动画：

1. [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"]);
        }