WPF中影片（Animation）的簡單使用

影片（Animation）的部分簡單屬性的介紹

使用影片需要使用以下兩個類：

Storyboard：創建影片需要使用故事板（Storyboard）元素，用于裝載影片

XXXAnimation：具體的影片類，實作具體的影片效果;

具體的影片實作通過 XXXAnimation 中的屬性實作，如下，以 DoubleAnimation 為例，不同引數型別的依賴屬性需要對應使用不同的影片類，

From：影片的起始值

To：影片的結束值，From 和 To 成對使用，

By：可以更改的總數，By 不可以和 From/To 一起使用，

通過查看 XXXAnimation 的基類 Timeline（時間線），還有以下重要屬性

AutoReverse ：時間線在完成向前迭代后是否按相反的順序播放

SpeedRatio：設定在此的時間的推移的速率，

RepeatBehavior：設定此時間線的重復行為，設定重復次數，

Duration：用于此時間線播放，不計數重復的時間長度，

影片：大小變換、旋轉和平移、漸變

這里就不作詳細的介紹了，直接上代碼，代碼中有詳細的注釋說明，都是最簡單的用法，

頁面XAML代碼

前端頁面 XAML 代碼如下，僅簡單的按鈕展示

<Window
    x:
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:AnimationDemo"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <TabControl>
            <TabItem Header="大小變換">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click1" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2" Grid.Column="1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample3" Grid.Column="2"
                            Width="100"
                            Height="50" />
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="旋轉和移動">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click2" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample2_1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2_2" Grid.Column="1"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <RotateTransform Angle="0" CenterX="0" CenterY="0" />
                            </Button.RenderTransform>
                        </Button>
                        <Button x:Name="Sample2_3" Grid.Column="2"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <TranslateTransform X="0" Y="0" />
                            </Button.RenderTransform>
                        </Button>
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="漸變">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="啟動"
                        Width="120"
                        Height="30"
                        Click="start_Click3" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample3_1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_2" Grid.Column="1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_3" Grid.Column="2"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                    </Grid>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

影片實作

影片是在 xaml.cs 中實作的，

代碼中首先展示了如何具體操作影片的各個屬性，然后將影片效果封裝成了一個方法，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationDemo
{
    /// <summary>
    /// MainWindow.xaml 的互動邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        
		/// <summary>
        /// 大小變化
        /// </summary>
        private void start_Click1(object sender, RoutedEventArgs e)
        {
            //創建影片使用 故事板（Storyboard）
            Storyboard storyboard = new Storyboard();

            //定義變更大小的影片 
            //根據屬性的型別設定影片的型別， 因為下面設定的屬性 Width 是 double 型別的屬性，故使用DoubleAnimation
            DoubleAnimation doubleAnimation = new DoubleAnimation();

            //設定影片起始值
            //doubleAnimation.From = 0;
            //設定影片結束值
            //doubleAnimation.To = 100;

            //設定影片在原有的基礎上增加一個范圍
            doubleAnimation.By = 30;

            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            //設定影片無限次播放(不設定的話默認是無限次)
            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
            //設定影片在指示時間線在完成向前迭代后是否按相反的順序播放，從而實作反復的效果
            doubleAnimation.AutoReverse = true;

            //系結到控制元件
            Storyboard.SetTarget(doubleAnimation, Sample1);
            //系結到控制元件的依賴屬性
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Width"));

            //將影片添加到故事板
            storyboard.Children.Add(doubleAnimation);

            //將影片效果封裝成方法
            storyboard.Children.Add(CreatDoubleAnimation(Sample2, true, RepeatBehavior.Forever, "Height", 50));//更改Height，回圈播放
            storyboard.Children.Add(CreatDoubleAnimation(Sample3, true, new RepeatBehavior(2), "Width", 50));//更改Width，播放2次

            //啟動故事板包含的所有影片
            storyboard.Begin();
        }

        /// <summary>
        /// 封裝影片方法
        /// </summary>
        /// <param name="uIElement">影片生效的界面元素</param>
        /// <param name="autoReverse">是否倒序</param>
        /// <param name="repeatBehavior">執行次數</param>
        /// <param name="propertyPath">影片生效的依賴屬性</param>
        /// <param name="by"></param>
        /// <returns></returns>
        private Timeline CreatDoubleAnimation(UIElement uIElement, bool autoReverse, RepeatBehavior repeatBehavior, string propertyPath, double by)
        {
            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.By = by;
            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            doubleAnimation.RepeatBehavior = repeatBehavior;
            doubleAnimation.AutoReverse = autoReverse;
            Storyboard.SetTarget(doubleAnimation, uIElement);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(propertyPath));
            return doubleAnimation;
        }

		/// <summary>
        /// 旋轉和平移
        /// </summary>
        private void start_Click2(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            //按鈕元素要支持移動\旋轉的效果的話，需要給元素先添加支持移動\旋轉的特性，
            Sample2_1.RenderTransform = new TranslateTransform(0, 0); //添加支持平移
            DoubleAnimation da = new DoubleAnimation();
            da.By = 50;
            da.Duration = TimeSpan.FromSeconds(1);

            Storyboard.SetTarget(da, Sample2_1);
            //這里的引數是弱型別的：new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)") 所以引數的拼寫一定不能錯
            Storyboard.SetTargetProperty(da, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));

            sb.Children.Add(da);

            sb.Children.Add(CreatDoubleAnimation(Sample2_2, false, new RepeatBehavior(2), 
                "(UIElement.RenderTransform).(RotateTransform.Angle)", 360));
            sb.Children.Add(CreatDoubleAnimation(Sample2_3, true, RepeatBehavior.Forever,
                "(UIElement.RenderTransform).(TranslateTransform.Y)", 30));

            sb.Begin();
        }
        
		/// <summary>
        /// 漸變
        /// </summary>
        private void start_Click3(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            sb.Children.Add(CreatDoubleAnimation(Sample3_1, false, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_2, true, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_3, true, RepeatBehavior.Forever, "Opacity", 0.5));

            sb.Begin();
        }
    }
}

上述實作的影片效果，也可以使用前端 XAML 代碼實作，實作格式如下：

<Window.Resources>
    <!--  影片的xaml格式  -->
    <Storyboard x:Key="test">
        <DoubleAnimation
                         Storyboard.TargetName=""
                         Storyboard.TargetProperty=""
                         From="0"
                         To="100"
                         Duration="0:0:5" />
    </Storyboard>
</Window.Resources>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/255427.html

標籤：WPF

上一篇：怎么做一個專業的軟體安裝包？

下一篇：【WPF學習筆記】WPF中行為（Behavior）的簡單使用

【WPF學習筆記】WPF中影片（Animation）的簡單使用

WPF中影片（Animation）的簡單使用

影片（Animation）的部分簡單屬性的介紹

影片：大小變換、旋轉和平移、漸變

頁面XAML代碼

影片實作