往复改变控件大小
C#
// 用C#代码进行编写
var widthAnimation = new DoubleAnimation()
{
Duration = new Duration(TimeSpan.FromSeconds(5)),
RepeatBehavior = RepeatBehavior.Forever,
AutoReverse=true,
From = 100,
To = 500
};
var heightAnimation = new DoubleAnimation()
{
Duration = new Duration(TimeSpan.FromSeconds(5)),
RepeatBehavior = RepeatBehavior.Forever,
AutoReverse = true,
From = 100,
To = 500
};
Storyboard storyboard = new Storyboard()
{
Children = new TimelineCollection()
{
widthAnimation,heightAnimation
},
};
// 这个如果同时进行两个动画，会出现开始不同步
// this.border.BeginAnimation(WidthProperty,widthAnimation);
// 使用Storyboard可以保证多个动画同步进行
Storyboard.SetTarget(widthAnimation, border);
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
Storyboard.SetTarget(heightAnimation, border);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
storyboard.Begin();用xaml实现
html
<Border
Name="border"
Width="100"
Height="100"
Background="pink">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="Width"
From="100"
To="500"
Duration="0:0:5" />
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="Height"
From="100"
To="500"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>改变控件位置
- 通过magin改变位置
html
<Border
Name="border"
Width="100"
Height="100"
Background="pink">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="Margin"
From="0,0,0,0"
To="500,500,0,0"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>- 通过TranslateTransform改变位置
html
<Border
Name="border"
Width="100"
Height="100"
Background="pink">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
From="0"
To="500"
Duration="0:0:5" />
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
From="0"
To="500"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Border.RenderTransform>
<TranslateTransform X="0" Y="0" />
</Border.RenderTransform>
</Border>改变控件背景色
html
<Border
Name="border"
Width="100"
Height="100"
Background="pink">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="Pink"
To="Orange"
Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>关键帧
关键帧动画（4大类）
| 类型 | 语法 | 介绍 |
|---|---|---|
| 线性变化关键帧 | Linear+【类型名称】+KeyFrame | 简单线性动画处理，如同y=kx+b |
| 离散变化关键帧 | Discrete+【类型名称】+KeyFrame | 不连续变化，如同从A间隔一段时间直接变化到B |
| 样条关键帧 | Spline+【类型名称】+KeyFrame | 样条函数(二次贝塞尔曲线-Path) |
| 缓冲式关键帧 | Easing+【类型名称】+KevFrame | 使用简单动画时介绍的缓动效果，如同拨珠掉到地效果 |
线性变化关键帧应用：
html
<Border
Name="border"
Width="100"
Height="100"
Background="pink">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color" Duration="0:0:5">
<LinearColorKeyFrame KeyTime="0:0:0" Value="Pink" />
<LinearColorKeyFrame KeyTime="0:0:3" Value="Orange" />
<LinearColorKeyFrame KeyTime="0:0:5" Value="Red" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>离散变化关键帧：
html
<Button
Grid.Row="1"
HorizontalAlignment="Stretch"
Content="测试">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="0:0:5">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="1" />
<DiscreteStringKeyFrame KeyTime="0:0:2" Value="2" />
<DiscreteStringKeyFrame KeyTime="0:0:3" Value="3" />
<DiscreteStringKeyFrame KeyTime="0:0:4" Value="4" />
<DiscreteStringKeyFrame KeyTime="0:0:5" Value="5" />
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>样条关键帧应用：
html
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform X="0" Y="0" />
</StackPanel.RenderTransform>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<!--<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(StackPanel.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="0:0:5" Value="1500">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0.1,0.9" ControlPoint2="0.9,0.1" />
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>-->
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(StackPanel.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame
KeySpline="0.1,0.9,0.9,0.1"
KeyTime="0:0:5"
Value="1500" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Ellipse
Width="10"
Height="10"
Fill="pink" />
<Ellipse
Width="10"
Height="10"
Margin="10,0,0,0"
Fill="pink" />
<Ellipse
Width="10"
Height="10"
Margin="10,0,0,0"
Fill="pink" />
</StackPanel>缓冲式关键帧应用:
html
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform X="0" Y="0" />
</StackPanel.RenderTransform>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(StackPanel.RenderTransform).(TranslateTransform.X)">
<LinearDoubleKeyFrame KeyTime="0:0:3" Value="500" />
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="1500">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Ellipse
Width="10"
Height="10"
Fill="pink" />
<Ellipse
Width="10"
Height="10"
Margin="10,0,0,0"
Fill="pink" />
<Ellipse
Width="10"
Height="10"
Margin="10,0,0,0"
Fill="pink" />
</StackPanel>路径动画
DoubleAnimationUsingPath路径动画：
- 根据路径实现X、Y运动
html
<Canvas>
<Ellipse
Width="50"
Height="50"
Fill="pink">
<Ellipse.RenderTransform>
<TranslateTransform X="0" Y="0" />
</Ellipse.RenderTransform>
<Ellipse.Style>
<Style TargetType="Ellipse">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath
Source="X"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
Duration="0:0:4">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath
Source="Y"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:4">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
</Canvas>- 根据路径实现X、Y、角度Angle运动
html
<UserControl
x:Class="Cell.Core.Views.LogView"
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:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:Cell.Core.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prism="http://prismlibrary.com/"
d:DesignHeight="450"
d:DesignWidth="800"
prism:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Key="sb">
<DoubleAnimationUsingPath
Source="X"
Storyboard.TargetName="tt"
Storyboard.TargetProperty="X"
Duration="0:0:4">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath
Source="Y"
Storyboard.TargetName="tt"
Storyboard.TargetProperty="Y"
Duration="0:0:4">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath
Source="Angle"
Storyboard.TargetName="rt"
Storyboard.TargetProperty="Angle"
Duration="0:0:4">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="btn">
<BeginStoryboard Storyboard="{StaticResource sb}" />
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border
Width="50"
Height="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="Pink">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rt" Angle="0" />
<TranslateTransform x:Name="tt" X="0" Y="0" />
</TransformGroup>
</Border.RenderTransform>
</Border>
<Button Name="btn" Content="测试" />
</Grid>
</UserControl>PointAnimationUsingPath路径动画：
html
<UserControl
x:Class="Cell.Core.Views.LogView"
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:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:Cell.Core.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prism="http://prismlibrary.com/"
d:DesignHeight="450"
d:DesignWidth="800"
prism:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Key="sb">
<PointAnimationUsingPath
Storyboard.TargetName="eg"
Storyboard.TargetProperty="Center"
Duration="0:0:4">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="btn">
<BeginStoryboard Storyboard="{StaticResource sb}" />
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Path Fill="pink">
<Path.Data>
<EllipseGeometry
x:Name="eg"
Center="0,0"
RadiusX="40"
RadiusY="40" />
</Path.Data>
</Path>
<Button Name="btn" Content="测试" />
</Grid>
</UserControl>MatrixAnimationUsingPath动画路径：
html
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border
Width="100"
Height="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="Pink">
<Border.RenderTransform>
<MatrixTransform />
</Border.RenderTransform>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath DoesRotateWithTangent="True" Storyboard.TargetProperty="(Border.RenderTransform).(MatrixTransform.Matrix)">
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M0 0 60,100 A100 50 0 0 1 400 150" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>- 动画辅助属性
| SpeedRatio | 播放速度 |
| AccelerationRatio | 加速速率 |
| DecelerationRatio | 减速速率 |
| AutoReverse | 是否执行相反的动画 |
| FillBehavior | 动画结束状态:HoldEnd、Stop |
| RepeatBehavior | 动画重复方式，包括三种值:Forever、次数（2x）、时间 |
| lsAddtive | 将目标属性的当前值添加到动画的起始值 |
| IsCumulative | 如果动画不断重复，就累积动画值 |
| BeginTime | 动画线启动等待时长 |
| EasinaFunction | 动画缓动属性 |