关键帧动画

最新推荐文章于 2025-07-09 00:06:34 发布

原创最新推荐文章于 2025-07-09 00:06:34 发布 · 882 阅读

1 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了关键帧动画的工作原理，通过目标属性值的差异创建丰富动画效果。关键帧动画可应用于多个属性间的平滑渐变，从而实现复杂动画。讨论了DoubleAnimationUsingKeyFrames和ColorAnimationUsingKeyFrames两种关键帧动画元素，并展示了它们的实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：Visual Studio2015
撰写时间：2019年5月25日

关键帧动画
1、关键帧动画根据目标属性值之间的差异产生各种动画效果
2、一个关键帧动画可以在任意多个的目标属性值之间进行渐变
3、关键帧动画可以产生更多，更复杂的动画效果

关键帧动画元素：DoubleAnimationUsingKeyFrames，ColorAnimationUsingKeyFrames

Double关键帧动画：DoubleAnimationUsingKeyFrames

<!--平滑-->
    <Canvas Width="400" Height="100">
        <!--触发器-->
        <Canvas.Triggers>
            <!--事件触发器-->
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <!--执行一个动作-->
                <EventTrigger.Actions>
                    <!--开始故事版-->
                    <BeginStoryboard>
                        <!--创建一个故事版-->
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Scenario2KeyFrameRectangle"
                                                           Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3">
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="200"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="300"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Canvas.Triggers>
        <!--矩形-->
        <Rectangle x:Name="Scenario2KeyFrameRectangle" Width="100" Height="100" Fill="Indigo"></Rectangle>
    </Canvas>

效果图
在这里插入图片描述

Color关键帧动画：ColorAnimationUsingKeyFrames

<Grid Width="300" Height="100">
        <Grid.Triggers>
            <!--指定事件-->
            <EventTrigger RoutedEvent="Grid.Loaded">
                <!--执行一个动作-->
                <EventTrigger.Actions>
                    <!--开始故事版-->
                    <BeginStoryboard>
                        <!--创建一个故事版-->
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="aa"
                                                          Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                          Duration="0:0:4" RepeatBehavior="Forever">
                                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Red"/>
                                <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Orange"/>
                                <DiscreteColorKeyFrame KeyTime="0:0:3" Value="Blue"/>
                                <EasingColorKeyFrame KeyTime="0:0:4" Value="Pink"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Grid.Triggers>
        <Rectangle x:Name="aa" Width="100" Height="100" Fill="White" Margin="10,0,190,0"></Rectangle>
</Grid>

效果截图
在这里插入图片描述