Animation in WPF

本文介绍了一个使用WPF创建的椭圆动画实例。该实例通过定义椭圆的位置变化实现动画效果,利用双精度动画和关键帧来平滑地改变椭圆的位置。
<Window x:Class="GraphicAnimation.Window1"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GraphicAnimation" Height="471" Width="648"
     xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d=" http://schemas.microsoft.com/expression/interactivedesigner/2006"
      mc:Ignorable="d"
    >
  <Grid >
    <Ellipse Stroke="#FF000000" HorizontalAlignment="Left"  Width="89" x:Name="Ellipse" RenderTransformOrigin="0.5,0.5" Margin="57,0,0,44" Height="83" VerticalAlignment="Bottom">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <TranslateTransform X="0" Y="0"/>
          <ScaleTransform ScaleX="1" ScaleY="1"/>
          <SkewTransform AngleX="0" AngleY="0"/>
          <RotateTransform Angle="0"/>
          <TranslateTransform X="0" Y="0"/>
          <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
      </Ellipse.RenderTransform>
      <Ellipse.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
          <GradientStop Color="sc#1, 0.8242602, 0.157461286, 0.157461286" Offset="0"/>
          <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
      </Ellipse.Fill>
      <Ellipse.OpacityMask>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
          <GradientStop Color="sc#1, 0.8242602, 0.157461286, 0.157461286" Offset="0"/>
          <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
      </Ellipse.OpacityMask>
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard  d:StoryboardName="Timeline1">
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.X)" Storyboard.TargetName="Ellipse">
                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0" KeyTime="00:00:00"/>
                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="300" KeyTime="00:00:10"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.Y)" Storyboard.TargetName="Ellipse">
                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0" KeyTime="00:00:00"/>
                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-300" KeyTime="00:00:10"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
  </Grid>
</Window>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值