WPF-关于动画Animation（及其常见问题）

2024-04-30 07:06:29

一、动画合集

常见动画类型

1、资源里添加动画资源

2、事件触发器里开始一个动画

3、Double型关键帧动画

4、Object型关键帧动画

5、Color型关键帧动画

6、String型关键帧动画

7、Matrix型沿路径动画

二、扩展

Ⅰ 动画常见问题

1、控制动画结束问题

Ⅱ 流动Path

Ⅲ 变形

一、动画合集

创建一个Storyboard演示画板，在画板里对动画进行定义与处理。

常见动画类型

提醒：更多动画类型及介绍可查看：动画概述-WPF .NET Framework

DoubleAnimation //普通Double型控制动画

DoubleAnimationUsingKeyFrames //Double型关键帧动画

ObjectAnimationUsingKeyFrames //Object型关键帧动画

ColorAnimationUsingKeyFrames //Color型关键帧动画

StringAnimationUsingKeyFrames //String型关键帧动画

MatrixAnimationUsingPath //沿路径型动画

1、资源里添加动画资源

注意：开始动画得自己规划逻辑（触发器、事件都可）

     var storybd = this.FindResource("storybd") as Storyboard;
     storybd.Begin();

    <Window.Resources>
        <Storyboard x:Key="storybd">
            <DoubleAnimation AutoReverse="True"
                             By="0.1"
                             RepeatBehavior="Forever"
                             Storyboard.TargetName="btn"
                             Storyboard.TargetProperty="Opacity"
                             From="0.0" />
            <DoubleAnimation AutoReverse="True"
                             RepeatBehavior="Forever"
                             Storyboard.TargetName="btn"
                             Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[1].Offset"
                             From="1"
                             To="0"
                             Duration="0:0:1" />
        </Storyboard>
    </Window.Resources>

2、事件触发器里开始一个动画

        <Rectangle Name="Rect"
                   Width="70"
                   Height="80"
                   Margin="279,0,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   Fill="Green">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation AutoReverse="True"
                                             RepeatBehavior="Forever"
                                             Storyboard.TargetName="Rect"
                                             Storyboard.TargetProperty="Opacity"
                                             From="1"
                                             To="0"
                                             Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

3、Double型关键帧动画

<DoubleAnimationUsingKeyFrames AutoReverse="True"
                               RepeatBehavior="Forever"
                               Storyboard.TargetName="Rect"
                               Storyboard.TargetProperty="(FrameworkElement.Width)">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />                        
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="70" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames AutoReverse="True"
                               RepeatBehavior="Forever"
                               Storyboard.TargetName="Rect"
                               Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="80" />
</DoubleAnimationUsingKeyFrames>

4、Object型关键帧动画

   <Window.Resources>
        <Storyboard x:Key="story">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="img" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

5、Color型关键帧动画

      <Storyboard x:Key="story">
            <ColorAnimationUsingKeyFrames AutoReverse="True"
                                          RepeatBehavior="Forever"
                                          Storyboard.TargetName="btn"
                                          Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="0" Value="Red" />
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="Blue" />
                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Red" />
                <DiscreteColorKeyFrame KeyTime="0:0:1.5" Value="Yellow" />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

6、String型关键帧动画

FillBehavior，动画结束时行为

HoldEnd：保持在动画结束的最后一帧画面

Stop：动画结束，恢复动画开始前的画面

            <StringAnimationUsingKeyFrames FillBehavior="HoldEnd"
                                           Storyboard.TargetName="btn"
                                           Storyboard.TargetProperty="(Button.Content)">
                <DiscreteStringKeyFrame KeyTime="0" Value="5s" />
                <DiscreteStringKeyFrame KeyTime="0:0:1" Value="4s" />
                <DiscreteStringKeyFrame KeyTime="0:0:2" Value="3s" />
                <DiscreteStringKeyFrame KeyTime="0:0:3" Value="2s" />
                <DiscreteStringKeyFrame KeyTime="0:0:4" Value="1s" />
                <DiscreteStringKeyFrame KeyTime="0:0:5" Value="0s" />
            </StringAnimationUsingKeyFrames>

7、Matrix型沿路径动画

使用如下：

移动控件可用RenderTransformOrigin="0.5,0.5"，切换位置转换的中心点；

DoesRotateWithTangent：按切换方向旋转；

PathGeometry：指定路径；

 <Rectangle.RenderTransform>
        <MatrixTransform />
 </Rectangle.RenderTransform>
 <MatrixAnimationUsingPath AutoReverse="True"
                           DoesRotateWithTangent="True"
                           PathGeometry="{StaticResource Path2}"
                           RepeatBehavior="Forever"
                           Storyboard.TargetName="Rect"
                           Storyboard.TargetProperty="RenderTransform.Matrix"
                           Duration="0:0:3" />

二、扩展

Ⅰ 动画常见问题

1、控制动画结束问题

storyBoard.Begin(containObject,true);

注意：第二个参数（是否可控）必须给true才能控制动画停止；

2、开始动画失败

下方示例，运行会报错：

                DoubleAnimation da = new DoubleAnimation()
                {
                    From = 1,
                    To = 0,
                    AutoReverse = true,
                    Duration = TimeSpan.FromSeconds(0.5),
                    RepeatBehavior = RepeatBehavior.Forever
                };
//Button btn
btn.Background = Brushes.Yellow;
btn.Background.BeginAnimation(Brush.OpacityProperty, da);

原因在于：btn.Background = Brushes.Yellow;

由于Brushes.Yellow为sealed 密封对象,所以其属性不能更改，若一个动画对其某属性值进行改变，就会报错；

解决，将该语句改成：

btn.Background=

new SolidColorBrush((Color)ColorConverter.ConvertFromString("Yellow"));

Ⅱ 流动Path

StrokeDashArray ：分段长度

StrokeDashOffset：分段偏移值（改变该值实现流动效果）

StrokeDashArray="5" StrokeDashOffset="{Binding OffSet}"

Ⅲ 变形

控制变形的属性：RenderTransform：呈现变形（定义在UIElement类中）；

LayoutTransform：布局变形（定义在FrameworkElement类中）；

其数据类型都是Transform抽象类

Transform派生类;

TranslateTransform：偏移变形，X设置右移动值，Y设置底部移动值；

RotateTransform：旋转变形,Angle设置旋转中心,CenterX与CenterY设置旋转中心；

ScaleTransform：缩放变形，ScaleX、ScaleY分别设置X、Y轴方向放大倍数；

SkewTransform：倾斜变形，可指定X轴和Y轴方向的倾斜角度；

TransformGroup：变形组（多个独立变形合成一个变形组），可同时执行多种变形；

MatrixTransform：矩阵变形，Matrix有6个值(M11,M12,M21,M22,OffsetX,OffsetY)，M11和M22默认值1，用于在x和y方向上的伸缩，M12和M21默认值0，用于倾斜控件，OffsetX和OffsetY默认值为0，用于平移控件，当值（1,0,0,1,0,0）不改变元素，值（0.5，1.4，0.4，0.5，-200，0）会重置元素的大小、倾斜和平移元素；

<Button.RenderTransform>
    <TransformGroup>
        <TranslateTransform X="30" Y="-30"/>
        <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
        <RotateTransform Angle="40" CenterX="0" CenterY="0"/>
        <SkewTransform AngleX="10" AngleY="10" CenterX="0" CenterY="0"/>
        <MatrixTransform Matrix="1,0,0,1,0,0"/>
    </TransformGroup>
</Button.RenderTransform>

码农公寓

一、动画合集

常见动画类型

1、资源里添加动画资源

2、事件触发器里开始一个动画

3、Double型关键帧动画

4、Object型关键帧动画

5、Color型关键帧动画

6、String型关键帧动画

7、Matrix型沿路径动画

二、扩展

Ⅰ 动画常见问题

1、控制动画结束问题

2、开始动画失败

Ⅱ 流动Path

Ⅲ 变形

相关文章