上下浮动动画

最新推荐文章于 2024-07-09 09:39:15 发布

番茄+鸡蛋+面

最新推荐文章于 2024-07-09 09:39:15 发布

阅读量718

点赞数

分类专栏： WPF

本文链接：https://blog.csdn.net/weixin_44552898/article/details/90607946

版权

WPF 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

作者：李坤凤
本次任务完成时间：2019年5月25日
开发工具与关键技术：开发工具：VS 关键技术: 上下浮动动画

一、动画前效果图
1、设置椭圆的大小宽度与椭圆外边距、颜色值，然后实现动画
在这里插入图片描述
二、动画后效果图
1、通过关键帧动画，显示上下椭圆的浮动，以时分秒来计算椭圆的速度

<!--触发器-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <!--事件-->
            <EventTrigger.Actions>
                <!--故事版-->
                <BeginStoryboard>
                    <Storyboard SpeedRatio="1.5" RepeatBehavior="Forever">
                        <!--关键帧动画-->
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="ellipse">
                            <LinearThicknessKeyFrame KeyTime="0:0:1.11" Value="635,265,528.6,353.4"></LinearThicknessKeyFrame>
                            <LinearThicknessKeyFrame KeyTime="0:0:5.15" Value="635,165,528.6,453.4"></LinearThicknessKeyFrame>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
</Window.Triggers>
<Grid>
  <!--背景颜色-->
  <Grid.Background>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#FFFAF4F4" Offset="0"/>
       <GradientStop Color="#FFFFD6D6" Offset="1"/>
       <GradientStop Color="#FFF9E7D0" Offset="0.343"/>
       <GradientStop Color="#FFBCF5F6" Offset="0.657"/>
       <GradientStop Color="#FFCDFDFD" Offset="0.801"/>
       <GradientStop Color="#FFD4EDFC" Offset="0.516"/>
       <GradientStop Color="#FFF0DFC7" Offset="0.237"/>
    </LinearGradientBrush>
    </Grid.Background>
        <!--样式-->
        <Ellipse Name="ellipse" Width="130" Height="120" Margin="650,245,513.6,373.4">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Offset="0.3" Color="SkyBlue"></GradientStop>
                        <GradientStop Offset="1.0"></GradientStop>
                        <GradientStop Offset="0.5" ></GradientStop>
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>