背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

[源码下载]

背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

作者：webabcd

介绍
背水一战 Windows 10 之 动画

• 线性动画 - ColorAnimation, DoubleAnimation, PointAnimation
• 关键帧动画 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames

示例
1、演示线性动画的应用
Animation/LinearAnimation.xaml

<Page
    x:Class="Windows10.Animation.LinearAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Animation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <!--
            线性动画一共有 3 种：ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline

            Storyboard.TargetName - 附加属性，要进行动画处理的对象的名称
            Storyboard.TargetProperty - 附加属性，要进行动画处理的对象的属性
            BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放
                TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]（可为正；可为负；可为空；默认值为 0）
            From - 动画的起始值
            To - 动画的结束值
            By - 动画从起始值开始计算，所需变化的总量（To 优先于 By）
            Duration - 时间线的持续时间
                TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
                Automatic - 自动确定
                Forever - 无限长
            AutoReverse - 动画完成后是否要原路返回。默认值为 false
            RepeatBehavior - 动画重复播放的时间、次数或类型
                TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
                nx - 播放次数。1x, 2x, 3x
                Forever - 永久播放
            SpeedRatio - 时间线的速率的倍数。默认值 1
            FillBehavior - 动画结束后的行为（System.Windows.Media.Animation.FillBehavior 枚举）
                FillBehavior.HoldEnd - 动画结束后，UI 保留动画后的状态。默认值
                FillBehavior.Stop - 动画结束后，UI 恢复为动画前的状态

            注意：
            1、在 WinRT 中为了流畅的体验，部分动画被优化成了“独立动画”，即动画不依赖于 UI 线程
            2、但是也有一部分动画无法优化成“独立动画”，我们把这类动画称作“依赖动画”，其需要在 UI 线程上运行
            3、通过将 EnableDependentAnimation 设置为 true（默认为 false），开启“依赖动画”
            4、通过将 Timeline.AllowDependentAnimations 设置为 false（默认为 true），可以全局禁止开启“依赖动画”

            Independent Animation - 独立动画
            Dependent Animation - 依赖动画
        -->

        <Grid.Resources>
            <BeginStoryboard x:Name="storyboardColor">
                <Storyboard>
                    <!--Color 值线性动画-->
                    <!--
                        动画要修改的属性是 Ellipse.Fill，Fill 是 Brush 类型，先把其转换为 SolidColorBrush 类型，然后设置 SolidColorBrush 的 Color 属性
                        所以将 Storyboard.TargetProperty 设置为 (Ellipse.Fill).(SolidColorBrush.Color)，也可以设置为 (Fill).(SolidColorBrush.Color)，也可以设置为 (Ellipse.Fill).Color，也可以设置为 (Fill).(Color)
                        类似的比如：(UIElement.RenderTransform).(CompositeTransform.TranslateY) 以及 (UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX) 等
                    -->
                    <ColorAnimation
                        Storyboard.TargetName="ellipse"
                        Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                        BeginTime="00:00:00"
                        From="Red"
                        To="Yellow"
                        Duration="0:0:3"
                        AutoReverse="true"
                        RepeatBehavior="3x">
                    </ColorAnimation>
                </Storyboard>
            </BeginStoryboard>

            <BeginStoryboard x:Name="storyboardDouble">
                <Storyboard>
                    <!--Double 值线性动画-->
                    <!--
                        动画要修改的属性是 Canvas.Left（附加属性）
                        将 Storyboard.TargetProperty 设置为 (Canvas.Left)
                    -->
                    <DoubleAnimation
                        Storyboard.TargetName="rectangle"
                        Storyboard.TargetProperty="(Canvas.Left)"
                        From="100"
                        By="100"
                        BeginTime="0:0:0"
                        Duration="00:00:03"
                        AutoReverse="true"
                        RepeatBehavior="Forever">
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>

            <Storyboard x:Name="storyboardPoint">
                <!--Point 值线性动画-->
                <!--
                    动画要修改的属性是 Center
                    将 Storyboard.TargetProperty 设置为 Center，也可以将其设置为 (EllipseGeometry.Center)
                -->
                <PointAnimation
                        EnableDependentAnimation="True"
                        Storyboard.TargetName="ellipseGeometry"
                        Storyboard.TargetProperty="Center"
                        BeginTime="00:00:00"
                        From="50,50"
                        To="200,200"
                        Duration="00:00:03"
                        AutoReverse="true"
                        RepeatBehavior="Forever">
                </PointAnimation>
            </Storyboard>
        </Grid.Resources>

        <StackPanel Margin="10 0 10 10">

            <Ellipse x:Name="ellipse" Fill="Orange" Width="200" Height="100" HorizontalAlignment="Left" />

            <Canvas Width="400" Height="100" HorizontalAlignment="Left" Margin="0 10 0 0">
                <Rectangle x:Name="rectangle" Fill="Orange" Width="200" Height="100" Canvas.Left="100" />
            </Canvas>

            <Path Fill="Orange">
                <Path.Data>
                    <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
                </Path.Data>
            </Path>

            <!--用于演示如何在 CodeBehind 端定义 Storyboard-->
            <Ellipse x:Name="ellipse2" Fill="Orange" Width="200" Height="100" HorizontalAlignment="Left" />

        </StackPanel>
    </Grid>
</Page>

Animation/LinearAnimation.xaml.cs

/*
 * 本例用于演示如何通过 Storyboard 使用线性动画，线性动画一共有 3 种类型：ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline
 */

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;

namespace Windows10.Animation
{
    public sealed partial class LinearAnimation : Page
    {
        public LinearAnimation()
        {
            this.InitializeComponent();

            this.Loaded += LinearAnimation_Loaded;
        }

        private void LinearAnimation_Loaded(object sender, RoutedEventArgs e)
        {
            // 启动动画
            storyboardPoint.Begin();

            // 停止动画
            // storyboardPoint.Stop();

            // 用于演示如何在 CodeBehind 端定义 Storyboard
            // 定义一个 ColorAnimation
            ColorAnimation ca = new ColorAnimation();
            ca.BeginTime = TimeSpan.Zero;
            ca.From = Colors.Red;
            ca.To = Colors.Yellow;
            ca.Duration = TimeSpan.FromSeconds();
            ca.AutoReverse = true;
            ca.RepeatBehavior = new RepeatBehavior();
            Storyboard.SetTarget(ca, ellipse2);
            Storyboard.SetTargetProperty(ca, "(Fill).(Color)");

            // 定义一个 DoubleAnimation
            DoubleAnimation da = new DoubleAnimation()
            {
                To = 0.9,
                Duration = TimeSpan.FromSeconds(),
                AutoReverse = true,
                RepeatBehavior = RepeatBehavior.Forever
            };
            Storyboard.SetTarget(da, ellipse2);
            Storyboard.SetTargetProperty(da, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)");
            // 注：要用 Storyboard 控制 ScaleTransform 则必须先为元素声明好 ScaleTransform（否则运行时会报错）
            TransformGroup Group = new TransformGroup();
            Group.Children.Add(new ScaleTransform());
            ellipse2.RenderTransform = Group;

            // 将定义好的动画添加进 Storyboard 然后启动动画
            Storyboard sb = new Storyboard();
            sb.Children.Add(ca);
            sb.Children.Add(da);
            sb.Begin();

            /*
             * 注意：
             * 1、在 WinRT 中为了流畅的体验，部分动画被优化成了“独立动画”，即动画不依赖于 UI 线程
             * 2、但是也有一部分动画无法优化成“独立动画”，我们把这类动画称作“依赖动画”，其需要在 UI 线程上运行
             * 3、通过将 EnableDependentAnimation 设置为 true（默认为 false），开启“依赖动画”
             * 4、通过将 Timeline.AllowDependentAnimations 设置为 false（默认为 true），可以全局禁止开启“依赖动画”
            */
        }
    }
}

2、演示关键帧动画的应用
Animation/KeyFrameAnimation.xaml

<Page
    x:Class="Windows10.Animation.KeyFrameAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Animation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                关键帧动画一共有 4 种：
                    ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames 它们均继承自 Timeline

                ColorAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    LinearColorKeyFrame, DiscreteColorKeyFrame, SplineColorKeyFrame, EasingColorKeyFrame

                DoubleAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    LinearDoubleKeyFrame, DiscreteDoubleKeyFrame, SplineDoubleKeyFrame, EasingDoubleKeyFrame

                PointAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    LinearPointKeyFrame, DiscretePointKeyFrame, SplinePointKeyFrame, EasingPointKeyFrame

                ObjectAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    DiscreteObjectKeyFrame

                Linear 代表线性，Discrete 代表离散，Spline 代表三次贝塞尔曲线，Easing 代表缓动

                Value - 关键帧的目标值
                KeyTime - 到达关键帧目标值的时间
                KeySpline - 三次贝塞尔曲线的两个控制点：x1,y1 x2,y2（该三次贝塞尔曲线的起点为0,0，终点为1,1）
            -->

            <!--
                ColorAnimationUsingKeyFrames
            -->
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardColor">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="solidColorBrush" Storyboard.TargetProperty="Color" Duration="0:0:10">
                                <LinearColorKeyFrame Value="Green" KeyTime="0:0:3" />
                                <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:4" />
                                <SplineColorKeyFrame Value="Red" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingColorKeyFrame Value="Orange" KeyTime="0:0:8">
                                    <EasingColorKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingColorKeyFrame.EasingFunction>
                                </EasingColorKeyFrame>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Rectangle Width="100" Height="50">
                    <Rectangle.Fill>
                        <SolidColorBrush x:Name="solidColorBrush" Color="Red" />
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>

            <!--
                DoubleAnimationUsingKeyFrames
            -->
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardDouble">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="translateTransform" Storyboard.TargetProperty="X" Duration="0:0:10">
                                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
                                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
                                <SplineDoubleKeyFrame Value="300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingDoubleKeyFrame Value="200" KeyTime="0:0:8">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Rectangle Fill="Red" Width="100" Height="50">
                    <Rectangle.RenderTransform>
                        <TranslateTransform x:Name="translateTransform" X="0" Y="0" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Grid>

            <!--
                PointAnimationUsingKeyFrames
            -->
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardPoint">
                        <Storyboard>
                            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center" Duration="0:0:10"
                                                          EnableDependentAnimation="True">
                                <LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" />
                                <DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
                                <SplinePointKeyFrame Value="300,300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingPointKeyFrame Value="400,400" KeyTime="0:0:8">
                                    <EasingPointKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingPointKeyFrame.EasingFunction>
                                </EasingPointKeyFrame>
                            </PointAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Path Fill="Red">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
                    </Path.Data>
                </Path>
            </Grid>

            <!--
                ObjectAnimationUsingKeyFrames
            -->
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardObject">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Text" Duration="0:0:10">
                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="w" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="we" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="web" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="weba" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="webab" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="webabc" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="webabcd" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <TextBlock x:Name="textBlock" Width="200" FontSize="32" Text="" />
            </Grid>

        </StackPanel>
    </Grid>
</Page>

OK
[源码下载]