作者:李坤凤
本次任务完成时间: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>