WPF實現動畫的幾種方式及其小案例

阿新 • • 發佈：2018-12-17

WPF實現動畫的方式：

基於計時器的動畫

建立一個定時器，然後根據其頻率迴圈呼叫函式或者一個事件處理函式，在這個函式中可以手工更新目標屬性，直到達到最終值，這時可以停止計時器。

案例：

效果圖：

XAML：

<Window x:Class="WpfDispatcherTimerAnimation.MainWindow"
        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:WpfDispatcherTimerAnimation"
        mc:Ignorable="d"
        Title="MainWindow 
" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ellipse Name="rectangle" Height="20" Width="20"  Fill="Aquamarine"/>
        <Button  Content="開啟動畫" 
 Click="ButtonBase_OnClick" Height="30" Width="90" Grid.Row="1"/>
    </Grid>
</Window>

C#程式碼：

using System;
using System.Windows;
using System.Windows.Threading;

namespace WpfDispatcherTimerAnimation
{
    /// <summary>
    /// MainWindow.xaml 的互動邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        /// <summary>
        /// 長方形減小計時器
        /// </summary>
        DispatcherTimer dispatcherTimerDecrease = new DispatcherTimer();

        /// <summary>
        /// 長方形增大計時器
        /// </summary>
        DispatcherTimer dispatcherTimerIncrease = new DispatcherTimer();

        /// <summary>
        /// 按鈕點選事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            dispatcherTimerIncrease.Interval = TimeSpan.FromMilliseconds(30);
            dispatcherTimerIncrease.Tick += dispatcherTimerIncrease_Tick;
            dispatcherTimerIncrease.Start();
            dispatcherTimerDecrease.Interval = TimeSpan.FromMilliseconds(30);
            dispatcherTimerDecrease.Tick += DispatcherTimerDecrease_Tick;
        }

        /// <summary>
        /// 增加計時器事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DispatcherTimerDecrease_Tick(object sender, EventArgs e)
        {
            if (rectangle.Width < 20 || rectangle.Height < 20)
            {
                (sender as DispatcherTimer).Stop();
                dispatcherTimerIncrease.Start();
            }
            else if (rectangle.Width >= 20 || rectangle.Height >= 20)
            {
                rectangle.Width -= 5;
                rectangle.Height -= 5;
            }
        }

        /// <summary>
        /// 減少計時器事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void dispatcherTimerIncrease_Tick(object sender, EventArgs e)
        {
            if (rectangle.Width < 200 || rectangle.Height < 200)
            {
                rectangle.Width += 5;
                rectangle.Height += 5;
            }
            else if (rectangle.Width >= 200 || rectangle.Height >= 200)
            {
                (sender as DispatcherTimer).Stop();
                dispatcherTimerDecrease.Start();
            }
        }
    }
}

2.基於楨的動畫

由CompositionTarget類來完成，它提供了一個回撥函式（Rendering的事件處理函式），WPF會在每次介面重新整理時呼叫該回調函式。CompositionTarget的重新整理率與窗體保持一致，因此很難人工控制動畫的快慢。

案例：

效果圖：

XAML：

<Window x:Class="Wpf基於楨的動畫.MainWindow"
        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:Wpf基於楨的動畫"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ellipse Name="ellipse" Height="20" Width="20"  Fill="Aquamarine"/>
        <Button Grid.Row="1"  Content="開啟動畫" Height="30" Width="90"  Click="ButtonBase_OnClick" />
    </Grid>
</Window>

C#：

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.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

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

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            CompositionTarget.Rendering+=new EventHandler(CompositionTarget_Rendering);
        }

        private void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            if (ellipse.Width < 200 || ellipse.Height < 200)
            {
                ellipse.Width += 5;
                ellipse.Height += 5;
            }
            else if (ellipse.Width >= 200 || ellipse.Height >= 200)
            {
              CompositionTarget.Rendering-=new EventHandler(CompositionTarget_Rendering);
            }
        }
    }
}

3.基於屬性的動畫

用一個DoubleAnimation類制定起始值（From=“”）、終點值To=“”、時間（Duration=“0:0:2.7”），以及動畫結束應該（FillBehavior=”Stop”）。設定好之後該矩形呼叫BeginAnimation方法開始實現動畫，BeginAnimation制定需要應用動畫的屬性和建立的DoubleAnimation。

案例：

效果圖：

XAML：

<Window x:Class="Wpf基於屬性的動畫.MainWindow"
        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:Wpf基於屬性的動畫"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ellipse Name="ellipse" Height="20" Width="20"  Fill="Aquamarine"/>
        <Button Grid.Row="1"  Content="開啟動畫" Height="30" Width="90"  Click="ButtonBase_OnClick" />
    </Grid>
</Window>

C#：

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Wpf基於屬性的動畫
{
    /// <summary>
    /// MainWindow.xaml 的互動邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            DoubleAnimation doubleAnimation=new DoubleAnimation();
            doubleAnimation.From = 20;
            doubleAnimation.To = 200;
            doubleAnimation.Duration = TimeSpan.FromMilliseconds(10000);
            doubleAnimation.FillBehavior = FillBehavior.Stop;
            ellipse.BeginAnimation(Ellipse.WidthProperty,doubleAnimation);

            DoubleAnimation doubleAnimation1 = new DoubleAnimation();
            doubleAnimation1.From = 20;
            doubleAnimation1.To = 200;
            doubleAnimation1.Duration = TimeSpan.FromMilliseconds(10000);
            doubleAnimation1.FillBehavior = FillBehavior.Stop;
            ellipse.BeginAnimation(Ellipse.HeightProperty, doubleAnimation);
        }
    }
}

WPF實現動畫的幾種方式及其小案例

WPF實現動畫的幾種方式及其小案例

Android RecyclerView點選事件實現的幾種方式

多執行緒實現的兩種方式及其區別

Web開發中前端路由實現的幾種方式和適用場景

Spring容器建立物件的幾種方式及其區別

定時任務實現的幾種方式

JAVA多執行緒實現的幾種方式及簡單示例

ios學習--單例實現的幾種方式

Arcgis For Android之離線地圖實現的幾種方式

Java資料庫連線池幾種方式及其特點

Perl執行shell命令的幾種方式及其區別

單點登入實現的幾種方式

爬蟲之C#實現的幾種方式

java定時任務實現的幾種方式

spring aop advice註解實現的幾種方式

HTML5實現動畫三種方式

關於AngularJs資料遞迴呈現的實現的幾種方式

單例模式實現的幾種方式

php中實現頁面跳轉的幾種方式

06.實現servlet的幾種方式，以及接口或者類之間的關系

WPF實現動畫的幾種方式及其小案例

相關推薦