【6月日新计划12】WPF入门-Animation

1. Introduction

线性插值：在开始值和结束值之间以逐步增加的方式改变属性的动画(线性插值过程)。
关键帧：从一个值突然变成另一值的动画(关键帧动画)。所有关键帧动画都使用"类型名 + AnimationUsingKeyFrames "的形式进行命名，比如 StringAnimationUsingKeyFramesObjectAnimationUsingKeyFrames。
路径:使用路徑跟隨動畫的動畫類型

1.1 Package

在System.Windows.Media.Animation名称空间中

7个 "类型名+Animation类"这些类使用插值动画。
22个 "类型名+AnimationUsingKeyFrames"
3个 "类型名+AnimationUsingPath"类这类使用基于路径的动画。

图片.png

2. OpenSource UI Lib

HandyControl（star:4.7k） github.com/HandyOrg/Ha…
MahApps.Metro (star:8.7k) github.com/MahApps/Mah…
ReactiveUI （star:7.5k） github.com/reactiveui/…
ModernWpf （star:3.7k） github.com/Kinnara/Mod…
adonis-ui （star:1.5k） github.com/benruehl/ad…
MaterialDesignInXamlToolkit (star:13.5k) github.com/MaterialDes…
AduSkin （star:1.6k） github.com/aduskin/Adu…
DMSkin (star:1.4k) github.com/944095635/D…
Fluent.Ribbon （star:2.2k） github.com/fluentribbo…
rubyer-wpf gitee.com/wuyanxin102…

3. Demo

3.1 Animation Demo01

<UserControl
    x:Class="MES_PRISM.Views.LoadingAnimation"
    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:local="clr-namespace:MES_PRISM.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style x:Key="FlashStyle" TargetType="{x:Type FrameworkElement}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                AutoReverse="True"
                                BeginTime="00:00:00"
                                RepeatBehavior="Forever"
                                Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                From="1"
                                To="0"
                                Duration="00:00:01.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Storyboard
            x:Key="StoryLeftToRight"
            RepeatBehavior="Forever"
            Duration="00:00:01.5">
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="e1"
                Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="e2"
                Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="e3"
                Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.0" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="e4"
                Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid Background="DeepSkyBlue">
        <StackPanel
            Margin="20"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Orientation="Horizontal">
            <TextBlock
                FontSize="20"
                Foreground="White"
                Style="{StaticResource FlashStyle}"
                Text="Loading " />
            <StackPanel Orientation="Horizontal">
                <StackPanel.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource StoryLeftToRight}" />
                    </EventTrigger>
                </StackPanel.Triggers>
                <Ellipse
                    Name="e1"
                    Width="5"
                    Height="5"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    Fill="White" />
                <Ellipse
                    Name="e2"
                    Width="5"
                    Height="5"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    Fill="White" />
                <Ellipse
                    Name="e3"
                    Width="5"
                    Height="5"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    Fill="White" />
                <Ellipse
                    Name="e4"
                    Width="5"
                    Height="5"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    Fill="White" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

3.2 Animation Demo02

使用Material Design

<UserControl x:Class="MES.Common.Lib.Views.ProgressView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MES.Common.Lib.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <StackPanel Width="100">
            <ProgressBar Width="40" Height="40" Margin="20"
                         IsIndeterminate="True"
                         Style="{StaticResource MaterialDesignCircularProgressBar}"
                         />
        </StackPanel>
    </Grid>
</UserControl>

3.3 Practice

參考IEventAggregator事件聚合器，在mianwindow加載動畫，每次呼叫api顯示動畫

juejin.cn/post/728260…

4. Demo

4.1 DoubleAnimation/ColorAnimation

        <ScrollViewer VerticalScrollBarVisibility="Hidden">
            <StackPanel HorizontalAlignment="Center">
                <ItemsControl Margin="5"
                              ItemsSource="{Binding UserList,UpdateSourceTrigger=PropertyChanged}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <materialDesign:Card Width="130"
                                                     Height="100"
                                                     Margin="8"
                                                     Padding="-0.5"
                                                     Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}">
                                <Border>
                                    <Border.Style>
                                        <Style TargetType="{x:Type Border}">
                                            <Setter Property="BorderThickness"
                                                    Value="4" />
                                            <Setter Property="BorderBrush"
                                                    Value="Black" />
                                            <Setter Property="CornerRadius"
                                                    Value="4" />
                                            <Style.Triggers>
                                                <EventTrigger RoutedEvent="Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard RepeatBehavior="Forever">
                                                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                             From="1"
                                                                             To="0.4"
                                                                             Duration="0:0:0.6"
                                                                             AutoReverse="True" />
                                                            <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                                                            To="Green"
                                                                            Duration="0:0:3"
                                                                            AutoReverse="True" />
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="75" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Image Margin="2,5,2,2"
                                               Source="{Binding Path}" />
                                        <TextBlock Grid.Row="2"
                                                   Margin="2"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   FontWeight="Bold"
                                                   Foreground="Black"
                                                   Style="{StaticResource MaterialDesignBody2TextBlock}"
                                                   Text="{Binding Name}" />
                                    </Grid>
                                </Border>
                            </materialDesign:Card>
                           
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>