背水一戰 Windows 10 (14) - 動畫: 線性動畫, 關鍵幀動畫

[源碼下載] 背水一戰 Windows 10 (14) - 動畫: 線性動畫, 關鍵幀動畫作者：webabcd介紹背水一戰 Windows 10 之動畫線性動畫 - ColorAnimation, DoubleAnimation, PointAnimation 關鍵幀動畫 - ColorAni ...

[源碼下載]

作者：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 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)");

            Storyboard sb = new Storyboard();
            sb.Children.Add(ca);
            sb.Begin();
        }
    }
}

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
[源碼下載]