多种动画Windows Phone 7

Question

I am trying to make one-hand machine game. To animate falling down Images I am using storyboard. My question is if someone know how to make multiple images. In this code I have just on image falling down. Somone know how to make eg 100 images animation in the storyboard?

    private Storyboard CreateStoryBoard()
    {
        Storyboard sb = new Storyboard();

        DoubleAnimation firstAnimation = new DoubleAnimation();
        firstAnimation.SpeedRatio = 8;
        firstAnimation.From = 0;
        firstAnimation.To = 600;
        firstAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));




        Storyboard.SetTarget(firstAnimation, Okejka);
        Storyboard.SetTargetProperty(firstAnimation, new PropertyPath("(Canvas.Top)"));
        sb.Children.Add(firstAnimation);
        return sb;
    }


  private void SpinButton_Click(object sender, RoutedEventArgs e)
    {
        Storyboard sb = CreateStoryBoard();
        sb.Begin();
    }

Answer 1

For each object you need create DoubleAnimation, each DoubleAnimation add to one Storyboard and then play it.

This is one method of my AnimationHelper, I modified it for this case.

    public static void Animate(List<DependencyObject> objects, EventHandler onComplete = null)
    {
        Storyboard sb = new Storyboard();
        foreach (DependencyObject obj in objects)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.From = FromValue; // Set you From value
            da.To = ToValue; // Set your To value
            da.Duration = new Duration(TimeSpan.FromSeconds(2)); // Set your Duration
            // a.EasingFunction = anim.Func; Easing function
            // da.BeginTime = anim.BeginTime; Begin time for each DA
            Storyboard.SetTarget(da, obj);
            Storyboard.SetTargetProperty(da, new PropertyPath(/* this your Property path */));
            sb.Children.Add(da);
        }                        
        if (onComplete != null)
            sb.Completed += onComplete;
        sb.Begin();
    }

UPDATE #1 The next code is Button.Click event handler, this code creates 20 Images and adds it to Canvas, next step is create animations for each Image using one instance of Storyboard.

    private async void b1_Click(object sender, RoutedEventArgs e)
    {
        CanvasContainer.Children.Clear();
        _images = new List<Image>();

        // load bitmap
        BitmapImage bmp = new BitmapImage(new Uri("Assets/appbar/appbar.italic.png", UriKind.Relative));

        // create 20 Image instance
        for (int i = 0; i < 20; i++)
        {
            Image img = new Image();
            img.Source = bmp;
            img.Stretch = Stretch.Fill;
            img.Width = 20;
            img.Height = 20;

            _images.Add(img);
            Canvas.SetTop(img, 0);
            Canvas.SetLeft(img, i * 20 + 5);
            CanvasContainer.Children.Add(img);
        }

        // Simulate some delay or any task (3 sec)
        await Task.Delay(3000); 


        Storyboard sb = new Storyboard();
        // delay animation time for each object
        TimeSpan beginTime = TimeSpan.FromMilliseconds(0);

        foreach (Image img in _images)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.From = 0; // Set start value to 0 px
            da.To = 700; // Set end value to 700 px
            da.Duration = new Duration(TimeSpan.FromSeconds(2)); // Set animation time to 2 sec
            da.BeginTime = beginTime; // Set delay for each Image
            beginTime += TimeSpan.FromMilliseconds(100);

            Storyboard.SetTarget(da, img);
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));

            sb.Children.Add(da);
        }

        sb.Begin();
    }

Code result: