WPF动画

已于 2024-09-17 19:53:46 修改
阅读量589 收藏 4
点赞数 8
分类专栏： WPF 文章标签： wpf
于 2024-09-17 19:52:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42253874/article/details/142311688
版权

目录

引言

1、“From/To/By” 动画

1.1、示例

 2、关键帧动画

2.1、 示例

2.2、时间百分比

2.3、时间等分Uniform

2.4、匀速变化Paced

3、缓动函数

 3.1、自定义缓动函数

 4、路径动画

4.1、WPF 提供以下路径动画类

 4.2、路径输入

5、动画触发/开始 

6、其他指导 

6.1、加速减速

6.2、重复循环中累加动画值

6.3、将动画终值设为下次的起始值

 6.4、如何添加动画

6.4.1、控件的EventTrigger

6.4.2、控件模板ControlTemplate:EventTrigger、Trigger

6.4.3、样式Style:EventTrigger

6.5、动画终值保持并触发事件

6.6、不同起始时间的动画管理

6.7、动画的过渡方式

引言

Windows Presentation Foundation (WPF) 提供了一组强大的图形和布局功能，使用户能够创建引起注意的用户界面和有吸引力的文档。 动画不仅可以使引起注意的用户界面更加引人注目，还可以使其更加便于使用。 只需对背景色进行动画处理或应用经过动画处理的 Transform，即可创造出生动的屏幕过渡效果或提供有帮助的视觉提示。

动画类型包括 “From/To/By” 动画、关键帧动画、路径动画和抽象类 AnimationBase，动画都是继承自 Timeline 类的时间线，具有 Duration、AutoReverse 和 RepeatBehavior 等计时属性。

动画结束后，FillBehavior （默认HoldEnd）属性决定了时间线结束时的行为方式，默认情况下会保持最终输出值(如果不希望保持，设置为Stop）。在代码中可以通过特定方法重新获得动画属性的控制权。

1、“From/To/By” 动画

From/To/By 动画是一种 AnimationTimeline 类型，可在起始值和终止值之间创建转换。 完成转换所需的时间取决于该动画的 Duration。WPF 提供以下 From/To/By 动画类。

属性类型对应的 From/To/By 动画类
ByteByteAnimation
ColorColorAnimation
DecimalDecimalAnimation
DoubleDoubleAnimation
Int16Int16Animation
Int32Int32Animation
Int64Int64Animation
PointPointAnimation
QuaternionQuaternionAnimation
RectRectAnimation
Rotation3DRotation3DAnimation
SingleSingleAnimation
SizeSizeAnimation
ThicknessThicknessAnimation
Vector3DVector3DAnimation
VectorVectorAnimation

  • 起始值From

    要显式指定动画起始值时，请使用 From 属性。 可以单独使用 From 属性，也可以与 To 或 By 属性结合使用。 如果仅指定 From 属性，则动画从该值转换到动画处理属性的基值。

  • 终止值To

    若要指定动画的终止值，请设置其 To 属性。 如果单独使用 To 属性，则动画从要进行动画处理的属性中获取其起始值，或者从应用到相同属性的另一个动画的输出中获取其起始值。 可以将 To 属性与 From 属性一起使用，以显式指定动画的起始值和终止值。

  • 偏移值By

    使用 By 属性，可以为动画指定偏移，而不是显式的起始或终止值。 动画的 By 属性指定动画在其持续时间内更改某个值的程度。 可以单独使用 By 属性，或者与 From 属性结合使用。 如果仅指定 By 属性，动画会将偏移值添加到属性的基值或另一个动画的输出。

1.1、示例

这里使用偏移值：By="10"，该值会直接与属性值相加得到最终值（即To值），动画结束行为设置为Stop（即不保持动画终止结果）

<Window.Resources>
    <Storyboard
        x:Key="story1"
        FillBehavior="Stop"
        Storyboard.TargetName="label"
        Storyboard.TargetProperty="FontSize">
        <DoubleAnimation By="10" Duration="0:0:0.5" />
    </Storyboard>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Label Name="label" Content="Label">
        <Label.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource story1}" />
            </EventTrigger>
        </Label.Triggers>
    </Label>
</Grid>

A: 稍微更改一下：如果我们设置为保持动画结果（即默认值）会怎样？删除FillBehavior属性设置。

 此时会越来越大，可以理解为动画结果已经将原来的属性值进行了更改。

B: 再更改一下：鼠标进入放大，鼠标离开还原。还是使用By偏移进行设置，看似没问题

 <Window.Resources>
     <Storyboard
         x:Key="story1"
         Storyboard.TargetName="label"
         Storyboard.TargetProperty="FontSize">
         <DoubleAnimation By="10" Duration="0:0:0.5" />
     </Storyboard>
     <Storyboard
         x:Key="story2"
         Storyboard.TargetName="label"
         Storyboard.TargetProperty="FontSize">
         <DoubleAnimation By="-10" Duration="0:0:0.5" />
     </Storyboard>
 </Window.Resources>
 <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
     <Label Name="label" Content="Label">
         <Label.Triggers>
             <EventTrigger RoutedEvent="MouseEnter">
                 <BeginStoryboard Storyboard="{StaticResource story1}" />
             </EventTrigger>
             <EventTrigger RoutedEvent="MouseLeave">
                 <BeginStoryboard Storyboard="{StaticResource story2}" />
             </EventTrigger>
         </Label.Triggers>
     </Label>
 </Grid>

上面说到By会直接追加到属性的初始值上，当我们触发频率超过动画时长时，会出现叠加效果。

C: 如果想要确定的结果，我们需要对By偏移值追加一个初始值From，也即确定了终值To。

<Window.Resources>
    <Storyboard
        x:Key="story1"
        Storyboard.TargetName="label"
        Storyboard.TargetProperty="FontSize">
        <DoubleAnimation
            By="10"
            From="20"
            Duration="0:0:0.5" />
    </Storyboard>
    <Storyboard
        x:Key="story2"
        Storyboard.TargetName="label"
        Storyboard.TargetProperty="FontSize">
        <DoubleAnimation
            By="-10"
            From="30"
            Duration="0:0:0.5" />
    </Storyboard>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Label Name="label" Content="Label">
        <Label.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource story1}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource story2}" />
            </EventTrigger>
        </Label.Triggers>
    </Label>
</Grid>

 D: 这里我们确定了初始值，通过计算得出终值，动画始终会从初始值开始，当动画未结束时触发另外动画，就会出现突变现象。如果想要避免，可以不设定初始值，只设定重点目标To

<Storyboard
    x:Key="story1"
    Storyboard.TargetName="label"
    Storyboard.TargetProperty="FontSize">
    <DoubleAnimation To="30" Duration="0:0:0.5" />
</Storyboard>
<Storyboard
    x:Key="story2"
    Storyboard.TargetName="label"
    Storyboard.TargetProperty="FontSize">
    <DoubleAnimation To="20" Duration="0:0:0.5" />
</Storyboard>

 2、关键帧动画

与 From/To/By 动画类似，关键帧动画对目标属性的值进行动画处理。 它通过其 Duration 在目标值之间创建过渡。 但是，From/To/By 动画可以在两个值之间创建过渡，而单个关键帧动画可以在任意数量的目标值之间创建过渡。 不同于 From/To/By 动画，关键帧动画没有设置其目标值所需的 From、To 或 By 属性。 关键帧动画的目标值使用关键帧对象进行描述，因此称作“关键帧动画”。 若要指定动画的目标值，请创建关键帧对象并将其添加到动画的 KeyFrames 集合。 动画运行时，将在指定的帧之间过渡。

某些关键帧方法除支持多个目标值外，甚至还支持多个内插方法。 动画的内插方法定义了从一个值过渡到下一个值的方式。 有三种内插类型：离散、线性和曲线。

属性类型对应的 From/To/By 动画类支持的内插方法
BooleanBooleanAnimationUsingKeyFrames离散
ByteByteAnimationUsingKeyFrames离散、线性、曲线
ColorColorAnimationUsingKeyFrames离散、线性、曲线
DecimalDecimalAnimationUsingKeyFrames离散、线性、曲线
DoubleDoubleAnimationUsingKeyFrames离散、线性、曲线
Int16Int16AnimationUsingKeyFrames离散、线性、曲线
Int32Int32AnimationUsingKeyFrames离散、线性、曲线
Int64Int64AnimationUsingKeyFrames离散、线性、曲线
MatrixMatrixAnimationUsingKeyFrames离散
ObjectObjectAnimationUsingKeyFrames离散
PointPointAnimationUsingKeyFrames离散、线性、曲线
QuaternionQuaternionAnimationUsingKeyFrames离散、线性、曲线
RectRectAnimationUsingKeyFrames离散、线性、曲线
Rotation3DRotation3DAnimationUsingKeyFrames离散、线性、曲线
SingleSingleAnimationUsingKeyFrames离散、线性、曲线
StringStringAnimationUsingKeyFrames离散
SizeSizeAnimationUsingKeyFrames离散、线性、曲线
ThicknessThicknessAnimationUsingKeyFrames离散、线性、曲线
Vector3DVector3DAnimationUsingKeyFrames离散、线性、曲线
VectorVectorAnimationUsingKeyFrames离散、线性、曲线

插值方法：

离散
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
线性
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
曲线
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.0,0.0 1.0,0.0"/>

2.1、 示例

A: 鼠标进入右移，鼠标离开还原关键帧动画 

<Window.Resources>
    <Storyboard
        x:Key="story1"
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="X">
        <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="10" />
            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="20" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard
        x:Key="story2"
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="X">
        <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="20" />
            <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="10" />
            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Label Name="label" Content="Label">
        <Label.RenderTransform>
            <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" />
        </Label.RenderTransform>
        <Label.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource story1}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource story2}" />
            </EventTrigger>
        </Label.Triggers>
    </Label>
</Grid>

2.2、时间百分比

KeyTime不仅可以直接写时间，还可以写百分比。

<Storyboard
    x:Key="story1"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="0" Value="0" />
        <LinearDoubleKeyFrame KeyTime="50%" Value="10" />
        <LinearDoubleKeyFrame KeyTime="100%" Value="20" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
    x:Key="story2"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="0" Value="20" />
        <LinearDoubleKeyFrame KeyTime="50%" Value="10" />
        <LinearDoubleKeyFrame KeyTime="100%" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

2.3、时间等分Uniform

如果希望每个关键帧的持续时间都相同，应使用 Uniform 计时。Uniform 关键时间按关键帧的数量平均分配可用时间，以确定每个关键帧的结束时间。

​
<Storyboard
    x:Key="story1"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="0" />
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="10" />
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="20" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
    x:Key="story2"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="20" />
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="10" />
        <LinearDoubleKeyFrame KeyTime="Uniform" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

2.4、匀速变化Paced

如果希望以固定速率进行动画处理，应使用 Paced 计时。Paced 关键时间根据每一关键帧的长度来分配可用时间，以确定每帧的持续时间。 这样，动画的速度或速率将保持不变。

<Storyboard
    x:Key="story1"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="Paced" Value="0" />
        <LinearDoubleKeyFrame KeyTime="Paced" Value="10" />
        <LinearDoubleKeyFrame KeyTime="Paced" Value="20" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
    x:Key="story2"
    Storyboard.TargetName="MyAnimatedTranslateTransform"
    Storyboard.TargetProperty="X">
    <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
        <LinearDoubleKeyFrame KeyTime="Paced" Value="20" />
        <LinearDoubleKeyFrame KeyTime="Paced" Value="10" />
        <LinearDoubleKeyFrame KeyTime="Paced" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

3、缓动函数

缓动函数允许将自定义的数学公式应用到动画。 例如，用户可能希望某个对象逼真地弹跳或表现出像在弹簧上一样。 可使用关键帧甚至 From/To/By 动画来近似地实现这些效果，但它将需要大量工作，并且动画不如使用数学公式准确。

  • BackEase：动画开始在指定路径上运动前稍微收缩动画的运行。

  • BounceEase：创建弹跳效果。

  • CircleEase：使用圆函数创建加速和/或减速的动画。

  • CubicEase：使用公式 f(t) = t^3 创建加速和/或减速的动画。

  • ElasticEase：创建一个动画，模拟弹簧的来回振荡运动，直到它达到停止状态。

  • ExponentialEase：使用指数公式创建加速和/或减速的动画。

  • PowerEase：使用公式 f(t) = t^p 创建加速和/或减速的动画，其中 p 等于 Power 属性。

  • QuadraticEase：使用公式 f(t) = t^2 创建加速和/或减速的动画。

  • QuarticEase：使用公式 f(t) = t^4 创建加速和/或减速的动画。

  • QuinticEase：使用公式 f(t) = t^5 创建加速和/或减速的动画。

  • SineEase：使用正弦公式创建加速和/或减速的动画。

BackEase 
<BackEase Amplitude="1" EasingMode="EaseOut" />
BounceEase 
<BounceEase
    Bounces="2"
    Bounciness="2"
    EasingMode="EaseOut" />
CircleEase 
<CircleEase EasingMode="EaseOut"/>
CubicEase 
<CubicEase EasingMode="EaseOut"/>
ElasticEase 
 <ElasticEase Oscillations="3" Springiness="1" EasingMode="EaseOut"/>
ExponentialEase 
 <ExponentialEase Exponent="6" EasingMode="EaseOut"/>
PowerEase 
<PowerEase Power="20" EasingMode="EaseOut"/>
QuadraticEase 
<QuadraticEase EasingMode="EaseOut"/>
QuarticEase 
<QuarticEase EasingMode="EaseOut"/>
QuinticEase 
<QuinticEase EasingMode="EaseOut"/>
SineEase 
<SineEase EasingMode="EaseOut"/>

 3.1、自定义缓动函数

除了使用包含在运行时中的缓动函数，还可以通过从 EasingFunctionBase 继承来创建自己的自定义缓动函数。 以下示例演示如何创建简单的自定义缓动函数。 可以通过重写 EaseInCore 方法来为缓动函数的行为方式添加自己的数学逻辑。

Power(7) 
public class CustomSeventhPowerEasingFunction : EasingFunctionBase
{
    public CustomSeventhPowerEasingFunction()
        : base() { }

    protected override double EaseInCore(double normalizedTime)
    {
        return Math.Pow(normalizedTime, 7);
    }

    protected override Freezable CreateInstanceCore()
    {
        return new CustomSeventhPowerEasingFunction();
    }
}

xaml:
<DoubleAnimation.EasingFunction>
    <demoapp:CustomSeventhPowerEasingFunction EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>

 4、路径动画

路径动画是一种使用 PathGeometry 作为输入的 AnimationTimeline。 可以定义一个几何路径并使用它来设置路径动画的 PathGeometry 属性，而不是设置 From、To 或 By 属性（如对 From/To/By 动画所执行的操作）或使用关键帧（如用于关键帧动画）。 路径动画运行时，会从路径中读取 x、y 和角度信息并使用该信息生成其输出。

 DoesRotateWithTangent 属性设置为 true，因此矩形会沿着路径的切线旋转

路径动画 
<Window.Resources>
    <Storyboard x:Key="story1">
        <MatrixAnimationUsingPath
            DoesRotateWithTangent="True"
            RepeatBehavior="Forever"
            Storyboard.TargetName="MyMatrixTransform"
            Storyboard.TargetProperty="Matrix"
            Duration="0:0:5">
            <MatrixAnimationUsingPath.PathGeometry>
                <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            </MatrixAnimationUsingPath.PathGeometry>
        </MatrixAnimationUsingPath>
    </Storyboard>
    <Storyboard
        x:Key="story2"
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="X">
        <DoubleAnimation To="0" Duration="0:0:0.5" />
    </Storyboard>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Label Name="label" Content="Label">
        <Label.RenderTransform>
            <MatrixTransform x:Name="MyMatrixTransform">
                <MatrixTransform.Matrix>
                    <Matrix />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Label.RenderTransform>
        <Label.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource story1}" />
            </EventTrigger>
        </Label.Triggers>
    </Label>
</Grid>

4.1、WPF 提供以下路径动画类

属性类型相应的路径动画类示例
DoubleDoubleAnimationUsingPath沿着路径针对对象进行动画处理（双重动画）
MatrixMatrixAnimationUsingPath沿着路径针对对象进行动画处理（矩阵动画）
PointPointAnimationUsingPath沿着路径针对对象进行动画处理（点动画）

MatrixAnimationUsingPath 从其 PathGeometry 生成 Matrix 值。 与 MatrixTransform 一起使用时，MatrixAnimationUsingPath 可以沿路径移动对象。 如果将 MatrixAnimationUsingPath 的 DoesRotateWithTangent 属性设置为 true，它还会沿路径曲线旋转对象。

PointAnimationUsingPath 从其 PathGeometry 的 x 和 y 坐标生成 Point 值。 通过使用 PointAnimationUsingPath 对采用 Point 值的属性进行动画处理，可以沿路径移动对象。 PointAnimationUsingPath 不能旋转对象。

DoubleAnimationUsingPath 从其 PathGeometry 生成 Double 值。 通过设置 Source 属性，可以指定 DoubleAnimationUsingPath 是使用 x 坐标、y 坐标还是路径的角度作为其输出。 可以使用 DoubleAnimationUsingPath 来沿着 x 轴或 y 轴旋转或移动对象。

 4.2、路径输入

每个路径动画类提供了 PathGeometry 属性，用于指定其输入。 路径动画使用 PathGeometry 生成其输出值。 PathGeometry 类能够描述组成弧线、曲线和直线的多个复杂图形。

PathGeometry 的核心是 PathFigure 对象的集合；这些对象之所以如此命名，是因为每个图都描述了 PathGeometry 中的一个离散形状。 每个 PathFigure 都由一个或多个 PathSegment 对象组成，其中每一个都描述了图的一个线段。

线段类型说明
ArcSegment在两点之间创建一条椭圆弧。
BezierSegment创建两个点之间的三次方贝塞尔曲线。
LineSegment创建两个点之间的直线。
PolyBezierSegment创建一系列三次方贝塞尔曲线。
PolyLineSegment创建一系列直线。
PolyQuadraticBezierSegment创建一系列二次贝塞尔曲线。
QuadraticBezierSegment创建一条二次贝塞尔曲线。

5、动画触发/开始 

若要使用 Storyboard 组织和应用动画，可以将动画添加为 Storyboard 的子时间线。 Storyboard 类提供 Storyboard.TargetName 和 Storyboard.TargetProperty 附加属性。 可以在动画上设置这些属性以指定其目标对象和属性。

若要将动画应用于其目标，可以使用触发器操作或方法来开始 Storyboard。 在 XAML 中，将 BeginStoryboard 对象与 EventTrigger、Trigger 或 DataTrigger 一起使用。 在代码中，还可以使用 Begin 方法。

情节提要开始时使用…基于实例样式控件模板数据模板示例
BeginStoryboard 和 EventTrigger是是是是使用情节提要对属性进行动画处理
BeginStoryboard 和 Trigger 属性否是是是在属性值更改时触发动画
BeginStoryboard 和 MultiTrigger 属性否是是是MultiTrigger 类示例
BeginStoryboard 和 DataTrigger否是是是如何：在数据更改时触发动画
BeginStoryboard 和 MultiDataTrigger否是是是MultiDataTrigger 类示例
Begin 方法是否No否使用情节提要对属性进行动画处理

6、其他指导 

6.1、加速减速

AccelerationRatio 和 DecelerationRatio 设置的动画进行动画加减速处理。

6.2、重复循环中累加动画值

使用 IsCumulative 属性可在重复的周期中累积动画的基值。

可能需要设置AotoReverse = "True"，让其自动还原，并设置From初始值，不然也会导致结果持续叠加。

PowerRase 
 <DoubleAnimation
     AutoReverse="True"
     IsCumulative="True"
     RepeatBehavior="4x"
     From="0"
     To="20"
     Duration="0:0:0.5">
     <DoubleAnimation.EasingFunction>
         <PowerEase EasingMode="EaseOut" Power="2" />
     </DoubleAnimation.EasingFunction>
 </DoubleAnimation>

6.3、将动画终值设为下次的起始值

IsAdditive 属性指定是否要将动画的输出值添加到动画属性的起始值（基值）。

<DoubleAnimation
   IsAdditive="True"
    From="0"
    To="20"
    Duration="0:0:0.5">
    <DoubleAnimation.EasingFunction>
        <PowerEase EasingMode="EaseOut" Power="2" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>

 6.4、如何添加动画

6.4.1、控件的EventTrigger

对透明度动画时，TargetProperty写作：(Button.Opacity),(Brush.Opacity)

          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard>           
                <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
                  Storyboard.TargetProperty="Width"
                  From="200" To="300" Duration="0:0:3" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>

6.4.2、控件模板ControlTemplate:EventTrigger、Trigger

      <ControlTemplate.Triggers>
        <!-- Event Trigger Example -->
        <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="innerBorderBackgroundBrush"
                Storyboard.TargetProperty="Color"
                From="White" To="#CCCCFF"
                Duration="0:0:3" AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Property Trigger Example -->
        <Trigger Property="IsMouseOver" Value="True" SourceName="contentPanel">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="contentPanelBrush" 
                  Storyboard.TargetProperty="Color"
                  To="Purple" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="contentPanelBrush" 
                  Storyboard.TargetProperty="Color"
                  To="White" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </ControlTemplate.Triggers>

6.4.3、样式Style:EventTrigger

     <Style.Triggers>
       <!-- Animates the button's opacity on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
                  RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
        
        <!-- Returns the button's opacity to 1 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  To="1" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   
        
        <!-- Changes the button's color when clicked. 
             Notice that the animation can't target the
             SolidColorBrush used to paint the button's background
             directly. The brush must be accessed through the button's
             Background property. -->
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
      </Style.Triggers>

6.5、动画终值保持并触发事件

 处理 Completed 事件即可。

<DoubleAnimation
    From="0"
    To="20"
    FillBehavior="HoldEnd"
    Completed="DoubleAnimation_Completed"
    Duration="0:0:0.5"/>

6.6、不同起始时间的动画管理

同一个动画时间线中中可能会有许多个动画，这些动画的起始时间不同，为方便管理，可以使用 ParallelTimeline 对象来简化动画。每个 ParallelTimeline 都有自己的 BeginTime，并且 ParallelTimeline 的所有子元素都相对于此 BeginTime 开始，所以可以更好地封装时间。

         <Storyboard>
            <DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
            Storyboard.TargetProperty="AngleX" Duration="0:0:1" BeginTime="0:0:2" From="0" To="45" />
            <ParallelTimeline BeginTime="0:0:4">
              <DoubleAnimation Storyboard.TargetName="SecondTextBlock"
              Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
              Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />
            </ParallelTimeline>
          </Storyboard>

6.7、动画的过渡方式

对这样的场景：当鼠标光标移到它们上方时它们会放大，而当光标移开时它们会变小。 如果将鼠标悬停在按钮上，然后快速移开光标，则会在第一个动画完成之前应用第二个动画。 当两个动画像这样重叠时，应该如何处理过渡。 Compose 值合并了重叠动画，使动画之间的过渡更加平滑，而 SnapshotAndReplace 值使新动画立即替换之前的重叠动画。

<BeginStoryboard HandoffBehavior="Compose">
Compose
SnapshotAndReplace
James.TCG
关注
专栏目录
WPF动画介绍
weixin_57772001的博客
11-22 504
22个 "类型名+AnimationUsingKeyFrames" 这些类使用关键帧动画。型名 + AnimationUsingKeyFrames " 的形式进行命名，比如。3个 "类型名+AnimationUsingPath"类这类使用基于路径的动画。：从一个值突然变成另一值的动画(关键帧动画)。所有关键帧动画都使用 "类。：在开始值和结束值之间以逐步增加的方式改变属性的动画(线性插值过。17个 "类型名+Animation类" 这些类使用插值动画。
wpf动画集锦 wpf特效集锦 wpf炫酷动画集锦 wpf炫酷特效集锦
09-11
包含以下特效：星、3d旋转、下拉、翻页、旋转出、棋盒棱形、垂直百叶窗、左拉、淡入、球形散开、棋盒方形、飞入、旋转擦除、柱状、斜擦除、单面翻书、球状棋盒、淡入、双线擦除、门状、水平百叶窗、溶解
wpf动画
weixin_53370274的博客
04-02 1513
WPF提供了一个更高级的模型，通过该模型可以只关注动画的定义，而不考虑它们的渲染方式，这个模型基于依赖项属性基础架构，本质上，WPF动画只不过是在一段时间间隔内修改依赖项属性值的一种方式。wpf中，最常用的动画技术是线性插值动画，标准的帧速率是60秒/帧，使用动画的最简单方式是实例化在前面列出的其中一个动画类，然后使用修改元素的BeginAnimation()方法，所有wpf元素，从UIElement基类开始，都继承了BeginAnimation()方法，该方法是IAnimatable接口的一部分。
WPF 动画
lvxingzhe3的博客
10-27 1227
动画由下面几部分组成: 动画类型:DoubleAnimation,ColorAnimation,PointAnimation等 起始值:From 终止值:To 偏移量值:By 故事板:Storyboard将动画应用于对象,Storyboard必须知道在何处应用动画,使用Storyboard.TargetName附加属性指定要进行动画处理的对象,使用TargetProperty附加属性指定要进行动画处理的属性. 事件触发器:EventTrigger 创建BeginStoryboar...
WPF动画进度条
qq_37343780的博客
03-17 1792
WPF动画进度条 前台代码 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="AnimationTiming.AutoReverseExample" WindowTitle="AutoReverse Example"> <StackPanel Mar
WPF高级动画.zip_WPF_WPF 动画_WPF高级动画_wpf动画_wpf界面
07-15
转换（Transforms）在WPF动画中扮演重要角色，它们可以改变元素的位置、大小、旋转等属性。补间动画（Interpolated Animation）是基于转换的动画类型，它会自动计算两个值之间的中间值，以创建平滑的过渡。 **6. ...
WPF动画效果合集，包含多个项目
06-01
标题"WPF动画效果合集，包含多个项目"表明这是一个集合，包含了多种WPF动画的示例项目，用于演示各种动画效果。描述中提到的“窗体动画、星空效果等多个动画，多种demo”揭示了这个资源包不仅包括基本的窗口动画，...
【软件设计】常用设计模式--观察者模式
分享自己学习过程获得的一些知识
09-17 834
观察者模式的变体为不同的应用场景提供了灵活性，从推拉模型到优先级处理和异步通知，它适用于从简单的GUI事件系统到复杂的分布式微服务架构。在选择具体变体时，需要权衡性能、响应速度、解耦程度等多方面因素，以便为系统设计提供最佳的解决方案。
Ribbon (WPF)
jyl_sh的专栏
09-13 1163
快速访问工具栏是一个小的、可自定义的工具栏，它提供了对常用命令的访问，与选择哪个Ribbon选项卡无关。如果你刚刚开始使用Ribbon，或者需要关于Ribbon UI的一般信息，请参阅Windows用户体验交互指南中的Ribbon主题。微软的Ribbon 是Windows Presentation Foundation (WPF)是一个WPF一个组件，它包含了所有基本Ribbon的特性和功能，包括选项卡、组、控件、快速访问工具栏、与窗口标题栏的集成，以及通过动态布局调整大小。
自定义WPF滑块样式-Slider
shanshan2099的专栏
09-13 765
滑动过的部分（DecreaseRepeatButton）是一个蓝色的矩形（Rectangle）。未滑动过的部分（IncreaseRepeatButton）是一个透明的矩形（Rectangle）。这样，我们就得到了一个自定义样式的滑块：滑动过的部分是蓝色的，滑块本身是一个白色的圆形，滑块的背景是灰色的，未滑动过的部分是透明的，而且滑块只能在刻度上移动，不能在刻度之间移动。滑块的当前值会显示在滑块的右侧。这就是XAML的艺术，通过自定义样式，我们可以改变控件的外观和行为，使其更符合我们的设计需求。
@EnableScheduling 和 @Scheduled 实现定时任务的任务延期问题
andrew_1219的博客
09-17 626
本文主要讲述了使用 @EnableScheduling 可能出现的线程阻塞导致定时任务延期的问题，也顺便解释了动态定时任务源码上的实现
wpf 字符串 与 变量名或函数名 相互转化:反射
chenhao0568的专栏
09-13 487
反射是字符串与属性、字段、函数名互相转化的关键工具。nameof用于编译时获取变量、函数名为字符串。反射的性能开销较大，适用于运行时动态需求。
在WPF中保存控件内容为图片
zhaotianff的专栏
09-17 401
因为这里只支持保存到流，不支持直接保存到文件，所以需要先创建文件，再进行保存。），已经介绍了控件、面板、形状都是继承自Visual类，所以都可以用于Render函数渲染。代表图像编码过的帧。像JPG、BMP这样的静态图像，整个图像只有一帧。类是表示由解码器返回并被编码器接受的图像数据。只要是Visual对象，都可以进行渲染。类的，所以我们这里选择的是第三种重载。这里具体介绍一下这两个类。对象的集合编码为图像流。在WPF介绍这篇文章中（)，可以设置图像内各帧。，所以可以直接用于设置。* 通过Uri来创建。
12306抢票脚本 - Bypass
最新发布
09-17
12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306抢票脚本12306
单片机与蓝牙模块的无线通信项目实战.md
09-17
如何使用单片机与蓝牙模块（如HC-05/HC-06）实现无线通信的详细步骤。首先，介绍了蓝牙模块的基本工作原理、引脚功能及配置方法。接着，讲解了硬件设计，包括单片机与蓝牙模块的连接、按键与LED模块的接线。然后，详细描述了软件设计，包括串口通信的初始化、蓝牙模块的数据接收与处理。项目调试部分涉及蓝牙连接的测试、串口通信的验证及功能调试，确保系统稳定运行。最后，探讨了项目的扩展可能性，如双向通信、多个设备通信及低功耗设计。这些内容为构建一个基于单片机和蓝牙的无线通信系统提供了全面的指导。
计算机科学中的基数排序算法原理与实现
09-17
本文详细介绍了基数排序这一非比较型排序方法的算法原理以及其在实际应用中如何操作。从初始化桶到最后重构阵列的每一步均进行了阐述，并提供了基于Python的实现例子。另外，对基数排序的时间和空间复杂度给出了深入解析及其使用情境说明，有助于了解排序机制并正确评估算法性能优劣。 适合人群：具备基本算法基础的数据科学家，研究和开发人员。 使用场景及目标：帮助理解和学习基数排序的技术要点和内在逻辑，掌握其实现在固定长度整数集合上进行快速排序的操作技巧。 其它提示：尽管该排序方法在特定条件下效率显著高于比较式方法，但须谨慎应用于数据种类变化多样的环境中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

James.TCG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值