WPF动画

往复改变控件大小

      // 用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实现

        <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改变位置
        <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改变位置
        <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>

改变控件背景色

        <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使用简单动画时介绍的缓动效果,如同拨珠掉到地效果

线性变化关键帧应用:

        <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>

离散变化关键帧:

        <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>

样条关键帧应用:

        <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>

缓冲式关键帧应用:

        <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运动
    <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运动
<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路径动画:

<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动画路径:

    <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动画缓动属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值