WPF：Animation动画--AnimationExample综合动画实例（3）

TextAnimationExamaple字体动画效果

应用文本TextEffect:

对文本每个文字应用旋转变换，
针对变换的属性角度Angle、中心点Center、文字；文本效果TextEffect的属性PositionStart

<!-- The TextEffect to animate. -->
  <TextEffect PositionCount="1" x:Name="MyTextEffect">
    <TextEffect.Transform>
      <RotateTransform x:Name="TextEffectRotateTransform" 
        Angle="0" CenterX="10" CenterY="10" />
    </TextEffect.Transform>
  </TextEffect>
</TextBlock.TextEffects>
<TextBlock.Triggers>
  <EventTrigger RoutedEvent="TextBlock.Loaded">
    <BeginStoryboard>
      <Storyboard>
        <ParallelTimeline RepeatBehavior="Forever">
        
          <!-- Animates the angle of the RotateTransform
               applied to the TextEffect. -->
          <DoubleAnimation
            Storyboard.TargetName="TextEffectRotateTransform"
            Storyboard.TargetProperty="Angle" 
            From="0"
            To="360"
            Duration="00:00:0.75"                
            BeginTime="0:0:0.25" />
        </ParallelTimeline>
        
        <!-- Animates the horizontal center of the RotateTransform
             applied to the TextEffect. -->
        <DoubleAnimation
          From="30"
          To="370"
          Duration="00:00:13"
          RepeatBehavior="Forever"
          AutoReverse="True"
          Storyboard.TargetName="TextEffectRotateTransform"
          Storyboard.TargetProperty="CenterX" />
       
        
        <!-- Animates the position of the TextEffect. -->
        <Int32AnimationUsingKeyFrames
          Storyboard.TargetName="MyTextEffect"
          Storyboard.TargetProperty="PositionStart"
          Duration="0:0:13"
          AutoReverse="True"
          RepeatBehavior="Forever">
          <Int32AnimationUsingKeyFrames.KeyFrames>
            <DiscreteInt32KeyFrame Value="0" KeyTime="0:0:0" />
            <DiscreteInt32KeyFrame Value="1" KeyTime="0:0:1" />
            <DiscreteInt32KeyFrame Value="2" KeyTime="0:0:2" />
            <DiscreteInt32KeyFrame Value="3" KeyTime="0:0:3" />
            <DiscreteInt32KeyFrame Value="4" KeyTime="0:0:4" />
            <DiscreteInt32KeyFrame Value="5" KeyTime="0:0:5" />
            <DiscreteInt32KeyFrame Value="6" KeyTime="0:0:6" />
            <DiscreteInt32KeyFrame Value="7" KeyTime="0:0:7" />
            <DiscreteInt32KeyFrame Value="8" KeyTime="0:0:8" />
            <DiscreteInt32KeyFrame Value="9" KeyTime="0:0:9" />
            <DiscreteInt32KeyFrame Value="10" KeyTime="0:0:10" />
            <DiscreteInt32KeyFrame Value="11" KeyTime="0:0:11" />
            <DiscreteInt32KeyFrame Value="12" KeyTime="0:0:12" />
          </Int32AnimationUsingKeyFrames.KeyFrames>
        </Int32AnimationUsingKeyFrames>       
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</TextBlock.Triggers>

镜面反射：VisualBrush的缩放+旋转+渐变蒙版

<!-- Uses a VisualBrush to create a reflection of the animated text. -->
<Rectangle Name="ReflectedText" 
  Height="{Binding ElementName=TextBorder, Path=ActualHeight}"
  Width="{Binding ElementName=TextBorder, Path=ActualWidth}"
  HorizontalAlignment="Left">
  <Rectangle.OpacityMask>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0.0" Color="#66000000" />
        <GradientStop Offset="1.0" Color="#00000000" />
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Rectangle.OpacityMask>      
  <Rectangle.Fill>
    <VisualBrush 
      Visual="{Binding ElementName=TextBorder}">
      <VisualBrush.RelativeTransform>
        <TransformGroup>
          <ScaleTransform ScaleX="1" ScaleY="-1" />
          <TranslateTransform Y="1" />
        </TransformGroup>
      </VisualBrush.RelativeTransform>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

TranslateTextAnimationExample平移单个文本效果

同理见上。
针对PositionStart+TranslateTransform.Y动画

SkewTextAnimationExample扭曲单个文本效果

同理见上。镜像方框绑定源方框大小
针对PositionStart+SkewTransform.CenteX/Y动画

AnimatedPargraphExample文字段落动画

同理如上，但是实现效果是只对动画选定PositionCount的可变数量文字选择，再进行旋转动画，

<!-- Binds the editable text to this TextBlock. -->
<TextBlock.Text>  
  <Binding ElementName="EntryTextBox" Path="Text"/>  
</TextBlock.Text>

<TextBlock.TextEffects>
  <TextEffect x:Name="RotationTextEffect" 
    PositionStart="0"
    PositionCount="0">
    <TextEffect.Transform>
      <RotateTransform 
        x:Name="TextEffectRotateTransform" 
        Angle="0" CenterX="200" CenterY="200" />
    </TextEffect.Transform>
  </TextEffect>     
</TextBlock.TextEffects>    
<TextBlock.Triggers>
  <EventTrigger RoutedEvent="TextBlock.Loaded">
    <BeginStoryboard>
      <Storyboard>
      
        <!-- Animates the angle of a RotateTransform 
             that's been applied to the text. -->
        <DoubleAnimation         
          Storyboard.TargetName="TextEffectRotateTransform"
          Storyboard.TargetProperty="Angle"
          From="0" To="360"
          Duration="0:0:15"
          RepeatBehavior="Forever" />
          
        <!-- Animates the number of characters affected
             by the TextEffect from 0 to the number of
             characters contained by the TextBox. -->  
        <Int32Animation
          Storyboard.TargetName="RotationTextEffect"
          Storyboard.TargetProperty="PositionCount"
          From="0" To="{Binding ElementName=EntryTextBox, Path=Text.Length}"
          Duration="0:0:45"
          RepeatBehavior="Forever" 
          AutoReverse="True" />            
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</TextBlock.Triggers> 
  </TextBlock>

因为选择中心的坐标是绝对的，如果改变了窗口大小，则需随时改变中心点位置：

// Updates the center of the RotateTransform used to rotate
// the TextBlock's characters.
private void TextBlockSizeChanged(object sender, SizeChangedEventArgs args)
{
    //if (args != null && !args.NewSize.IsEmpty)
    //{
    //    TextEffectRotateTransform.CenterX = args.NewSize.Width/2;
    //    TextEffectRotateTransform.CenterY = args.NewSize.Height/2;
    //}
}

InteractiveAnimationsExample交互控制立方体动画

立方体模型构建见之前KeySplineAniamtionExample一章说明
由画布左键点击触发动画，在Viewport3D坐标到点击左边的向量距离进行不同模式位移动画，同时自身保持X/Y轴旋转动画

后台代码：
RadioButton的模式选择转换

// Updates the cached animation transition.
private void SelectedTransitionChanged(object sender, RoutedEventArgs args)
{
    var value = (string) ((RadioButton) args.Source).Content;
    _selectedTransition = (AnimationTransitionType) Enum.Parse(typeof (AnimationTransitionType), value);
}

定义AnimaationTransitionType枚举：

public enum AnimationTransitionType
{
    Linear,
    Bounce,
    Elastic
}

选择判断动画模式：

private AnimationTransitionType _selectedTransition;

// Computes the target point when the user clicks the Canvas
// and starts the appropriate animation.
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs args)
{
    var targetPoint = args.GetPosition(ContainerCanvas);
    targetPoint.X = targetPoint.X - (MyAnimatedObject.ActualWidth/2);
    targetPoint.Y = targetPoint.Y - (MyAnimatedObject.ActualHeight/2);


    switch (_selectedTransition)
    {
        case AnimationTransitionType.Linear:
            AnimateToDestinationUsingLinearAnimation(targetPoint);
            break;

        case AnimationTransitionType.Bounce:
            AnimateToDestinationUsingBounceAnimation(targetPoint);
            break;

        case AnimationTransitionType.Elastic:
            AnimateToDestinationUsingElasticAnimation(targetPoint);
            break;
    }
}

后台代码定义动画BounceEase动画：

// Animates to the target point using a custom
// BouncAnimation.
private void AnimateToDestinationUsingBounceAnimation(Point targetPoint)
{
    var bounceXAnimation =
        new BounceDoubleAnimation
        {
            From = Canvas.GetLeft(MyAnimatedObject),
            To = targetPoint.X,
            Duration = TimeSpan.FromSeconds(5),
            EdgeBehavior = BounceDoubleAnimation.EdgeBehaviorEnum.EaseIn
        };
    MyAnimatedObject.BeginAnimation(Canvas.LeftProperty, bounceXAnimation);

    var bounceYAnimation =
        new BounceDoubleAnimation
        {
            From = Canvas.GetTop(MyAnimatedObject),
            To = targetPoint.Y,
            Duration = TimeSpan.FromSeconds(5),
            EdgeBehavior = BounceDoubleAnimation.EdgeBehaviorEnum.EaseIn
        };
    MyAnimatedObject.BeginAnimation(Canvas.TopProperty, bounceYAnimation);
}

RotatingCubeExample旋转立方体动画

SplineExample

见之前KeySpline一章说明

ControlLableRotatingCubeExample可控立方体

此实现思路是使用鼠标位于对应方向按钮上即可驱动立方体对应方向旋转，在xaml实现即可，如需点击下即旋转一段距离或时间，可后台设置动画，设定时间、角度值即可

通过对Transform3Dgroup.Children旋转动画RotateTransformed3D.Rotation的绕X/Y轴选择AxisAngleRotation3D的角度Angle参数即可。

<Button 
    Width="50" Height="50"
    Grid.Column="1" Grid.Row="0">
    <Image>
      <Image.Source>
        <DrawingImage>
          <DrawingImage.Drawing>
            <DrawingGroup>
              <DrawingGroup.Children>
                <GeometryDrawing Geometry="{StaticResource UpArrowGeometry}">
                  <GeometryDrawing.Pen>
                    <Pen Thickness="10" Brush="Black"  />
                  </GeometryDrawing.Pen>
                </GeometryDrawing>
              </DrawingGroup.Children>
            </DrawingGroup>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>

    <Button.Triggers>
      <EventTrigger RoutedEvent="Button.MouseEnter">
        <BeginStoryboard Name="UpwardSpinBeginStoryboard">
          <Storyboard>
          
            <!-- Rotates the cube upwards. -->
            <DoubleAnimation 
              Storyboard.TargetName="myVerticalRotation"
              Storyboard.TargetProperty="Angle"
              By="90" Duration="0:0:0.5" IsCumulative="True"
              RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.MouseLeave">
        <PauseStoryboard BeginStoryboardName="UpwardSpinBeginStoryboard" />
      </EventTrigger>
    </Button.Triggers>
  </Button>

AnimatingAlongAPathExample沿路径动画

如何沿 PathGeometry 对象定义的几何路径旋转（转动）对象。（沿路径的X/Y/Angle进行立方体的X/Y/Z轴旋转+X/Y轴角度旋转）:

第一个 DoubleAnimationUsingPath 针对应用于该矩形的 RotateTransform 进行动画处理。动画将生成角度值。它使矩形沿着路径的轮廓线旋转（转动）。
其他两个对象将对应用于矩形的 TranslateTransform 的 X 和 Y 值进行动画处理。它们使矩形沿着该路径水平和垂直移动。
DoubleAnimationUsingPath.Source 属性：获取或设置此动画的 PathGeometry 方位，确定此动画的输出值。默认值为 X

<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

    <Viewbox VerticalAlignment="Center" >
      <Canvas Width="321" Height="201" Margin="50">
        <Rectangle Width="321" Height="201" 
          Fill="{StaticResource MyWireBrushResource}">
          <Rectangle.OpacityMask>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FF000000" />
                <GradientStop Offset="1.0" Color="#00000000" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </Rectangle.OpacityMask>          
        </Rectangle>
        
        <!-- Shows what the animation path looks like. -->
        <Path Data="M 10,100 C35,0 135,0 160,100 S285,200 310,100"
          Stroke="White" StrokeThickness="2"
          Stretch="None" />

        <Viewport3D Name="MyAnimatedObject"
          ClipToBounds="True" Width="150" Height="150"
          Canvas.Left="0" Canvas.Top="10">
          <Viewport3D.Camera>
            <PerspectiveCamera x:Name="myPerspectiveCamera"
               LookDirection="0,0,-1" UpDirection="0,1,0" 
             Position="0,0,2.25" FieldOfView="45" />
          </Viewport3D.Camera>
          <Viewport3D.Children>
          <ModelVisual3D>
            <ModelVisual3D.Children>
              <StaticResource ResourceKey="PictureCubeModelVisual3DResource" />
            </ModelVisual3D.Children>
            <ModelVisual3D.Transform>
              <Transform3DGroup >
                <Transform3DGroup.Children>
                  <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                      <AxisAngleRotation3D x:Name="MyZRotation" Angle="0" Axis="0 0 1" />
                    </RotateTransform3D.Rotation>
                  </RotateTransform3D>
                  <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                      <AxisAngleRotation3D x:Name="MyHorizontalRotation" Angle="0" Axis="0 1 0" />
                    </RotateTransform3D.Rotation>
                  </RotateTransform3D>
                  <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                      <AxisAngleRotation3D x:Name="MyVerticalRotation" Angle="0" Axis="1 0 0" />
                    </RotateTransform3D.Rotation>
                  </RotateTransform3D>
                </Transform3DGroup.Children>
              </Transform3DGroup>
            </ModelVisual3D.Transform>
          </ModelVisual3D>
          </Viewport3D.Children>
          <Viewport3D.RenderTransform>
            <TransformGroup>
              <TranslateTransform X="-75"  Y="-75" />
              <TranslateTransform x:Name="PictureCubeTranslateTransform" X="0" Y="0" />
            </TransformGroup>
          </Viewport3D.RenderTransform>       
          <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
              <BeginStoryboard>
                <Storyboard>
                  <!-- Animates the cube horizontally along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="PictureCubeTranslateTransform"
                    Storyboard.TargetProperty="X"
                    Source="X" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True">
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C35,0 135,0 160,100 S285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>                    
                    
                  <!-- Animates the cube vertically along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="PictureCubeTranslateTransform"
                    Storyboard.TargetProperty="Y"  
                    Source="Y" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True">
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C35,0 135,0 160,100 S285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>
                    
                  <!-- Rotates the cube in the Z-axis along the path. -->  
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyZRotation"
                    Storyboard.TargetProperty="Angle"
                    Source="Angle" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True">
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C35,0 135,0 160,100 S285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>                    
                  
                  <!-- Rotates the cube in the Y-axis along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyVerticalRotation"
                    Storyboard.TargetProperty="Angle"
                    Source="Angle" 
                    Duration="0:0:5"
                    RepeatBehavior="Forever" AutoReverse="True" >
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C35,0 135,0 160,100 S285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>                  </DoubleAnimationUsingPath>                    
                    
                  <!-- Rotates the cube in the X-axis along the path. -->  
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyHorizontalRotation"
                    Storyboard.TargetProperty="Angle"
                    Source="Angle" 
                    Duration="0:0:5"
                    RepeatBehavior="Forever" AutoReverse="True" >
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C35,0 135,0 160,100 S285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>                  </DoubleAnimationUsingPath>                    
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Viewport3D.Triggers> 
        </Viewport3D>
      </Canvas>

    </Viewbox>
  </DockPanel>