WPF 动画

https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/graphics-multimedia/key-frame-animations-overview

 

动画修改的主要是一些属性的值，属性不必是依赖属性，仅仅是一些按照固定格式的值而已（如 Color）。

1. 3D

PerspectiveCamera

AxisAngleRotation3D

Light

material

positions

triangleIndices

texturecoordinates

 

 

透视投影和正射投影

透视投影符合人们心理习惯，即离视点近的物体大，离视点远的物体小，远到极点即为

消失，成为灭点。它的视景体类似于一个顶部和底部都被切除掉的棱椎，也就是棱台。这个

投影通常用于动画、视觉仿真以及其它许多具有真实性反映的方面。

    正射投影，又叫平行投影。这种投影的视景体是一个矩形的平行管道，也就是一个长方

体。正射投影的最大一个特点是无论物体距离相机多远，投影后的物体大

小尺寸不变。这种投影通常用在建筑蓝图绘制和计算机辅助设计等方面，这些行业要求投影

后的物体尺寸及相互间的角度不变，以便施工或制造时物体比例大小正确。

动画：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="AnimatedButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle Name="outline" RadiusX="9" RadiusY="9"
                                       Stroke="Black" Fill="{TemplateBinding Background}"
                                       StrokeThickness="1.6">
                                
                            </Rectangle>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.3"
                                                             AutoReverse="True"
                                                             Storyboard.TargetProperty="(Rectangle.StrokeThickness)" 
                                                             Storyboard.TargetName="outline"
                                                             By="1.2"/>
                                            <!--By动画从正在进行动画处理的属性的基值或前一动画的输出值继续到该值与 By 属性指定的值之和。-->
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource AnimatedButtonStyle}" Width="200" Height="100" Content="Click me!!1"/>
        <Ellipse  Height="50" Width="100">
            <Ellipse.Fill>
                <SolidColorBrush x:Name="ellipseBrush" Color="SteelBlue"/>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Duration="00:00:06" RepeatBehavior="Forever">
                                <DoubleAnimation Storyboard.TargetProperty="Width"
                                                 Duration="00:00:03"
                                                 AutoReverse="True"
                                                 FillBehavior="Stop"
                                                 RepeatBehavior="Forever"
                                                 AccelerationRatio="0.9"
                                                 DecelerationRatio="0.1"
                                                 From="100" To="300">
                                    <DoubleAnimation.EasingFunction>
                                        <BounceEase EasingMode="EaseInOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <ColorAnimation Storyboard.TargetName="ellipseBrush"
                                                Storyboard.TargetProperty="Color"
                                                 Duration="00:00:03"
                                                 AutoReverse="True"
                                                 FillBehavior="Stop"
                                                 RepeatBehavior="Forever"
                                                 From="Yellow" To="Red"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Grid>
</Window>

 2.事件触发器

  <DockPanel>
        <DockPanel.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonBeginMoveEyes">
                <BeginStoryboard x:Name="beginMoveEyes">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"
                                         By="6" DecelerationRatio=".8"
                                         Storyboard.TargetName="eyeLeft"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                        <DoubleAnimation Duration="0:0:5" RepeatBehavior="Forever" AutoReverse="True"
                                         By="6" DecelerationRatio=".8"
                                         Storyboard.TargetName="eyeLeft"
                                         Storyboard.TargetProperty="(Canvas.Top)"/>
                        <DoubleAnimation Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"
                                         By="-6" DecelerationRatio=".8"
                                         Storyboard.TargetName="eyeRight"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                        <DoubleAnimation Duration="0:0:6" RepeatBehavior="Forever" AutoReverse="True"
                                         By="6" 
                                         Storyboard.TargetName="eyeRight"
                                         Storyboard.TargetProperty="(Canvas.Top)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonStopMoveEyes">
                <StopStoryboard BeginStoryboardName="beginMoveEyes"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonResize">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation RepeatBehavior="2" AutoReverse="True"
                                         Storyboard.TargetName="scale1"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                         From="0.1" To="3" Duration="0:0:5">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation RepeatBehavior="2" AutoReverse="True"
                                         Storyboard.TargetName="scale1"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                         From="0.1" To="3" Duration="0:0:5">
                            <DoubleAnimation.EasingFunction>
                                <BounceEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </DockPanel.Triggers>
        <StackPanel Orientation="Vertical" DockPanel.Dock="Top">
            <Button x:Name="buttonBeginMoveEyes" Content="Start Move Eyes" Margin="5"/>
            <Button x:Name="buttonStopMoveEyes" Content="Stop Move Eyes" Margin="5"/>
            <Button x:Name="buttonResize" Content="Resize" Margin="5"/>
        </StackPanel>
        <Canvas>
            <Canvas.LayoutTransform>
                <ScaleTransform x:Name="scale1" ScaleX="1" ScaleY="1"/>
            </Canvas.LayoutTransform>
            <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100"
                     Stroke="Blue" StrokeThickness="4" Fill="Yellow"/>
            <Ellipse Canvas.Left="30" Canvas.Top="12" Width="60" Height="30">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0.1" Color="DarkGreen"/>
                        <GradientStop Offset="0.7" Color="Transparent"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Canvas.Left="30" Canvas.Top="35" Width="25" Height="20"
                     Stroke="Blue" StrokeThickness="3" Fill="White"/>
            <Ellipse Canvas.Left="40" Canvas.Top="43" Width="6" Height="5" Fill="Black" x:Name="eyeLeft"/>
            <Ellipse Canvas.Left="65" Canvas.Top="35" Width="25" Height="20"
                     Stroke="Blue" StrokeThickness="3" Fill="White"/>
            <Ellipse Canvas.Left="75" Canvas.Top="43" Width="6" Height="5" Fill="Black" x:Name="eyeRight"/>
            <Path Name="mouth" Stroke="Blue" StrokeThickness="4" Data="M 40,74 Q 57, 95,80,74"/>
        </Canvas>
    </DockPanel>

 3.属性触发动画

<Trigger Property="IsMouseOver" Value="True">
     <Trigger.EnterActions>
          <BeginStoryboard>
                  <Storyboard>
                          <DoubleAnimation Duration="0:0:0.3" AutoReverse="True" Storyboard.TargetProperty="(Rectangle.StrokeThickness)" Storyboard.TargetName="outline" By="1.2"/>
                   </Storyboard>
          </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

4.颜色动画

TargetName 一般为brush名字，如果属性是Background的话, 应写为  （Button.Background）.(SolidBrush.Color).

　　　　<Button.Triggers>
                    <!-- Animates the color of the brush used to paint the second button from red to blue . -->
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="myAnimatedBrush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:7" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>

 

 后台代码播放动画！

   /****************************************************/
        private SolidColorBrush updateBrush;
        public SolidColorBrush UpdateBrush
        {
            get { 
                return updateBrush; 
            }
            set
            {
                updateBrush = value;
                this.RaisePropertyChanged("RoTransform");
            }
        }
        /****************************************************/

 ColorAnimation dbAnimation              = new ColorAnimation();
        //DoubleAnimation dbAnimation             = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromSeconds(1)));

dbAnimation.From = Colors.Red;
            dbAnimation.To = Colors.Green;
            dbAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            dbAnimation.AutoReverse = true;
            dbAnimation.RepeatBehavior = RepeatBehavior.Forever;

  public void StartAnimate()
        {
            UpdateBrush.BeginAnimation(SolidColorBrush.ColorProperty, dbAnimation);
        }
        public void StopAnimate()
        {
            UpdateBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
        }