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

背水一戰 Windows 10 之動畫: 線性動畫 - ColorAnimation, DoubleAnimation, PointAnimation; 關鍵幀動畫 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames

[源碼下載下傳]

作者：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>

/*
 * 本例用于示範如何通過 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），可以全局禁止開啟“依賴動畫”
            */
        }
    }
}

<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>

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

繼續閱讀

Windows 指令行基礎(轉載同學的)

ASP程式設計經典例子

轉：2008年微軟Windows硬體工程(WinHEC)大會

ASP程式設計中20個非常有用的例子

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

20/20: Top 20 Programming Lessons I've Learned in 20 Years

20條程式設計經驗

【觀點】風雨20年：我所積累的20條程式設計經驗【觀點】風雨20年：我所積累的20條程式設計經驗

【轉載】風雨20年：我所積累的20條程式設計經驗

部署.net平台的應用程式

在一個非套接字上嘗試了一個操作

為什麼要選擇UniDAC

設定某一行背景顔色的CListCtrl

SIP Presence SUBSCRIBE-NOTIFY

QName是什麼