(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Why Register?

Flying objects against you

Submit Article
(108 votes)
Miroslav Miroslavov
>
Miroslav Miroslavov
Joined Nov 24, 2009
Articles:   8
Comments:   6
More Articles
2 comments   /   posted on May 12, 2010
Tags:   completit , animations , miroslav-miroslavov
Categories:   White Papers , General

This article is compatible with the latest version of Silverlight.

This is part 4 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

This time we will cover how to build kind of particle system with flying “3D” objects against you. In our example the objects are thrown against you when you click to open a menu item.

Lets first see how it looks.

ThrowingObjects

And double click on the surface to see ‘Flying Objects against you’ in action.

Get Microsoft Silverlight

The Idea

On double click we’ll create 50 fake 3D pyramids, that will fly against the screen. The effect of throwing is implemented using Scaling to simulate like the objects are flying against you and Translation to simulate the moving of the items. And at the end we’ll animate the opacity of the objects to make them disappear.

Of course you can create more objects and make them fly – like pigs, balls or something that comes to your mind.

The pyramids are simple 3 paths with random color for one of the sides and we’ll apply some random transformations to make them look more different and realistic.

Implementation

Lets discuss more on the actual effect and not the objects like pyramids.

First of all we’ll need a Canvas on top of everything to hold the flying objects, animate them inside and at the end remove the canvas from the scene. It’s as easy as a 3 steps.

 void ElementMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
 {
     long now = DateTime.Now.Ticks;
  
     if (lastTick - now <= 200)
    {
         Point point = e.GetPosition(null);
         Canvas canvas = new Canvas();
         LayoutRoot.Children.Add(canvas);
        var spreading = SpreadingObjects.GetSpreadAnimaion(point, canvas);
         spreading.Completed += (s, e1) => LayoutRoot.Children.Remove(canvas);
         spreading.Begin();
     }
     lastTick = now;
 }

In order to spread the objects on the scene we’ll need a staring point and the parent panel to hold the objects. And here is what happens in a couple of steps.

    1. Prepare the objects
    2. Translate them on the starting point.
    3. Scale them down for example to .5 of their actual sizes.
    4. Animate their position to random X and Y in a radios of 500 around the central point.
    5. Animate their scale for example to 3 to make them fly against us.
    6. Animate their opacity at the near end to make them disappear.
    7. And finally use a CubicEase to give a more realistic effect to the animations. 
 public static Storyboard GetSpreadAnimaion(Point startPoint, Panel objectsCanvas)
 {
     var spreading = new Storyboard();            
  
     for (int i = 0; i < ObjectFactory.PyramidsCount; i++)
     {
         FrameworkElement randomObject = ObjectFactory.CreatePyramid();
  
        CompositeTransform transform;
         randomObject.EnsureTransform(out transform);
   
         transform.TranslateX = startPoint.X;
         transform.TranslateY = startPoint.Y;
        transform.ScaleX = transform.ScaleY = .5;
   
         objectsCanvas.Children.Add(randomObject);
  
         var translateXAnimation = transform.CreateTranslateXAnimation(startPoint.X + RandomHelper.Next(-Radius, Radius),Seconds);
         var translateYAnimation = transform.CreateTranslateYAnimation(startPoint.Y + RandomHelper.Next(-Radius, Radius), Seconds);
   
         var scaleXAnimation = transform.CreateScaleXAnimation(3, Seconds);
         var scaleYAnimation = transform.CreateScaleYAnimation(3, Seconds);
   
         var opacityAnimation = randomObject.CreateOpacityAnimation(0, OpacityBeginTime, Seconds - OpacityBeginTime);
   
         translateXAnimation.EasingFunction =
             translateYAnimation.EasingFunction =
             scaleXAnimation.EasingFunction = scaleYAnimation.EasingFunction = new CubicEase
                                                                                    {
                                                                                        EasingMode = EasingMode.EaseIn
                                                                                    };
   
         spreading.Children.Add(translateXAnimation);
         spreading.Children.Add(translateYAnimation);
         spreading.Children.Add(scaleXAnimation);
         spreading.Children.Add(scaleYAnimation);
         spreading.Children.Add(opacityAnimation);
     }
   
     spreading.Completed += (s, e1) => objectsCanvas.Children.Clear();
      return spreading;
 }

Download the code

Stay tuned for the next articles from this series coming up next week.


Subscribe

Comments

  • -_-

    RE: Flying objects against you


    posted by Saul on May 01, 2011 01:23
    Thanks for this great article! I am looking to convert it to VB.NET using tutorials such as this Arrays with VB.NET one. I'm just getting started but thank you for writing this one. If you have in VB ones let me know. Thanks!
  • -_-

    RE: Flying objects against you


    posted by KAte on May 31, 2011 14:13

    Very nice article thanks!

    HTC

Add Comment

Login to comment:
  *      *       
Forgotten Password? Registration Why register?

From this series