WPF 基本动画

目录

一、基本动画

1. 基本分类

2. 属性介绍

3. 事件介绍

4. 解除动画结束后对属性的控制

3. 代码示例

二、动画的使用

1. 动画的触发

2. 动画的操作

三、代码示例

四、 结果展示

五、源码下载

---

 

一、基本动画

1. 基本分类

1. DoubleAnimation：操作的属性值为Double类型

2. ColorAnimation： 操作的属性值为Color

3. PointAnimation: 操作的属性值为Point

2. 属性介绍

1. Storyboard.TargetName 指定动画对象

2. Storyboard.TargetProperty 指定动画属性

3. From 属性开始变化的Value

4. To 属性最终变化的Value

5. By 偏移量

6. Duration 动画的持续时间

7. BeginTime 点击开始之后，动画开始前的延时，相当于片头。

8. AutoReverse 进行相反Value的动画

9. RepeatBehavior 设置是否一直重复

10. FillBehavior 告诉动画在其活动期结束时停止影响其目标属性

3. 事件介绍

Completed ：动画结束时候需要执行的操作

4. 解除动画结束后对属性的控制

动画对属性有绝对的控制，在动画结束之后，想要更改属性值，需要结合FillBehavior=stop 来解除对属性值的固定。

3. 代码示例

<Page.Resources>
        <Storyboard x:Key="rectStoryboard">
            <DoubleAnimation 
                Storyboard.TargetName="retangle"
                Storyboard.TargetProperty="Opacity" 
                Duration="0:0:4" 
                From="1"
                By="0.2"
                To="0.1"
                BeginTime="0:0:3"
                FillBehavior ="Stop"
                Completed="DoubleAnimation_Completed"                             
                />
            <!--AutoReverse="True"-->
            <!--RepeatBehavior="Forever"-->
        </Storyboard>
</Page.Resources>

<Page.Resources>
        <Storyboard x:Key="colorStoryboard">
            <ColorAnimation Storyboard.TargetName="color" Storyboard.TargetProperty="Color"
                            Duration="0:0:2"
                            From="Black"
                            To="Red"
                            />
        </Storyboard>
</Page.Resources>

 <Page.Resources>
        <Storyboard x:Key="positionStoryboard">
            <PointAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Center"
                            Duration="0:0:2"
                            From="50,50"
                            To="400,100"                           
                            />
        </Storyboard>
</Page.Resources>

二、动画的使用

1. 动画的触发

动画的触发一般放在事件处理器当中。

使用Button时间开始执行动画

2. 动画的操作

BeginStoryboard 开始

StopStoryboard 停止

PauseStoryboard 暂停

ResumeStoryboard 恢复

SetStoryboardSpeedRatio 快进/慢

RemoveStoryboard 删除

SeekStoryboard 跳过片头

SkipStoryboardToFill 跳过片尾

三、代码示例

<Page x:Class="Animation.DoubleAnimationPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Animation"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="DoubleAnimationPage">

    <Page.Resources>
        <Storyboard x:Key="rectStoryboard">
            <DoubleAnimation 
                Storyboard.TargetName="retangle"
                Storyboard.TargetProperty="Opacity" 
                Duration="0:0:4" 
                From="1"
                By="0.2"
                To="0.1"
                BeginTime="0:0:3"  
                FillBehavior ="Stop"
                Completed="DoubleAnimation_Completed"
                />
         
        </Storyboard>

    </Page.Resources>
    <Grid Background="White">
        <Canvas>
            <StackPanel Orientation="Horizontal" Canvas.Left="250" Canvas.Top="191">
                <Button Content="开始" x:Name="startbtn"/>
                <Button Content="停止" x:Name="endbtn"/>
                <Button Content="暂停" x:Name="stopbtn"/>
                <Button Content="恢复" x:Name="resumebtn"/>
                <Button Content="快进" x:Name="acceleratetbtn"/>
                <Button Content="快慢" x:Name="deceleratebtn"/>
                <Button Content="删除" x:Name="deletebtn"/>
                <Button Content="跳过片头" x:Name="seekbtn"/>
                <Button Content="跳到末尾" x:Name="filltoendbtn"/>

            </StackPanel>
            <Rectangle Height="100" Width="300" Fill="Green" Canvas.Left="250" Canvas.Top="64" x:Name="retangle">

            </Rectangle>

            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Button.Click" SourceName="startbtn">
                    <BeginStoryboard Storyboard="{StaticResource rectStoryboard}" x:Name="myBeginStoryboard" />
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="endbtn">
                    <StopStoryboard BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="stopbtn">
                    <PauseStoryboard BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="resumebtn">
                    <ResumeStoryboard BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="acceleratetbtn">
                    <SetStoryboardSpeedRatio SpeedRatio="2" BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="deceleratebtn">
                    <SetStoryboardSpeedRatio SpeedRatio="0.5" BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="deletebtn">
                    <RemoveStoryboard BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="seekbtn">
                    <SeekStoryboard Origin="BeginTime" Offset="0:0:3" BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="filltoendbtn">
                    <SkipStoryboardToFill BeginStoryboardName="myBeginStoryboard"/>
                </EventTrigger>
            </Canvas.Triggers>

        </Canvas>

    </Grid>
</Page>

namespace Animation
{
    /// <summary>
    /// Interaction logic for DoubleAnimationPage.xaml
    /// </summary>
    public partial class DoubleAnimationPage : Page
    {
        public DoubleAnimationPage()
        {
            InitializeComponent();
        }

        private void DoubleAnimation_Completed(object sender, EventArgs e)
        {
            this.retangle.Opacity = 1;
        }
    }
}

四、 结果展示

1. DoubleAnimation

DoubleAnimation

2. ColorAnimation

ColorAnimation

3. PointAnimation

PointAnimation

五、源码下载

https://download.csdn.net/download/m0_48915942/88629529?spm=1001.2014.3001.5503