如何以编程方式创建silverlight序列动画?

时间:2010-01-03 21:33:19

标签: silverlight

我需要设置一个矩形的动画以便首先水平移动,然后在2秒后使其垂直移动。所有这些都应该以编程方式完成。

任何人都可以帮助我吗?谢谢!

1 个答案:

答案 0 :(得分:5)

使用以下XAML:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas x:Name="LayoutRoot">
    <Rectangle x:Name="myBox" Fill="Red" Height="100" Width="100" Canvas.Left="0" Canvas.Top="0" />
  </Canvas>
</UserControl>

您可以使用以下方式以编程方式创建动画:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var moveAnimation = CreateAnimation(this.myBox);
        moveAnimation.Begin();
    }

    public Storyboard CreateAnimation(FrameworkElement element)
    {
        var storyboard = new Storyboard();

        var downAnimation = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(downAnimation, element);
        Storyboard.SetTargetProperty(downAnimation, new PropertyPath(Canvas.TopProperty));
        downAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)),
            Value = 200
        });
        storyboard.Children.Add(downAnimation);

        var overAnimation = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(overAnimation, element);
        Storyboard.SetTargetProperty(overAnimation, new PropertyPath(Canvas.LeftProperty));
        overAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)),
            Value = 0
        });
        overAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)),
            Value = 200
        });
        storyboard.Children.Add(overAnimation);


        return storyboard;
    }
}