博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2016-05-26 09:58  webabcd  阅读(5788)  评论(4编辑  收藏

[源码下载]


背水一战 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(3);
            ca.AutoReverse = true;
            ca.RepeatBehavior = new RepeatBehavior(3);
            Storyboard.SetTarget(ca, ellipse2);
            Storyboard.SetTargetProperty(ca, "(Fill).(Color)");

            // 定义一个 DoubleAnimation
            DoubleAnimation da = new DoubleAnimation()
            {
                To = 0.9,
                Duration = TimeSpan.FromSeconds(1),
                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
[源码下载]