WPF关键帧动画

weixin_464078072024-01-25 15:39

背景：要实现动画已经有关键动画了，但是关键动画如果动画比较复杂，那么就需要重复写多个DoubleAnimation。如果使用上关键帧就可以少写几遍Storyboard里面的属性

普通动画：

XML 复制代码

<DoubleAnimation From="0" To="30" Duration="0:0:2" BeginTime="0:0:3"
                 Storyboard.TargetName="" Storyboard.TargetProperty="">

使用上关键帧的动画：

XML 复制代码

<Rectangle x:Name="myRect" Width="50" Height="50" HorizontalAlignment="Left" Fill="Blue">
    <Rectangle.RenderTransform>
        <TranslateTransform x:Name="myTranslate" X="0" Y="0"/>
    </Rectangle.RenderTransform>

    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames 
                        Storyboard.TargetName="myTranslate" 
                        Storyboard.TargetProperty="X"
                        Duration="0:0:10">
                        <LinearDoubleKeyFrame Value="100" KeyTime="30%"/>
                        <LinearDoubleKeyFrame Value="300" KeyTime="60%"/>
                        <LinearDoubleKeyFrame Value="700" KeyTime="70%"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

-- 这里体现的是关键帧作用于X坐标

更加细节可以看痕迹大神的文章：https://www.cnblogs.com/zh7791/p/12897696.html