We can live without Motion Path

For Silverlight, many agree it is not perfect enough coz it doesnt include many features that inside WPF. Well, as we all know, Silverlight is an engine for us to create a web-based program/application. In my opinion, being a web-based application, it should be lite but not simple of course. As I remember, last week, someone ask how to create a motion path in Silverlight in order to make a picture flying around an ellipse (circular motion). Yesterday, another post has been created where people keep on discussing the problem of silverlight without motion path.

I think all we can do is to relate Math and Programming together.
Fortunately, my PureMath teacher has taught about a set of parametric equations which declare a path of circle. Then I try to implement it on Silverlight. Finally, it works, and I my extremely happy with that. Here is the solution.

XAML

    
        
            
            
        
    

        
            
                
                     
                     
                 
             
             
             
              
              
              
              
             
             
        

C#:

        int t = 0;
        double AniX;
        double AniY;

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            Ellipse_ani_X.From = Ellipse_ani_Y.From = 0;
            Ellipse_ani_Y.To = Ellipse_ani_X.To = AniX = AniY = 0;
            t++;
            myStory_Ellipse.Begin();
        }

        private void Ellipse_ani_X_Completed(object sender, EventArgs e)
        {
            myStory_Ellipse.Stop();
            Ellipse_ani_X.From = AniX;
            Ellipse_ani_X.To= AniX = Math.Cos(t * Math.PI / 50 ) * 100;
            Ellipse_ani_Y.From = AniY;
            Ellipse_ani_Y.To = AniY = Math.Sin(t  * Math.PI / 50 ) * 100;
            t++;
            myStory_Ellipse.Begin();

        }

        private void Ellipse_ani_Y_Completed(object sender, EventArgs e)
        {

        }

I am trying to work out the motion path solution. I hope it will help all of you.

Regards,
Steve Wong(Hong Kong)
Live with Light!

Advertisements

Animation and Storyboard

Before getting closer to Silverlight, I used to make animation and some application by Flash.

Now, I have to remind all the people, who used to design Flash Application before, should be clear that it has a new system in Silverlight which is totally different from Flash.

We have Storyboard to control the animation of different objects but we have Movie Clip to control those in Flash.

In flash we have to create animation by time line everywhere, but we can do all the animation separately in Silverlight.

We create animation in code-behind as follow:

First we create our new Storyboard and Double Animation :

Storyboard Reflection_Story1 = new Storyboard(); 
DoubleAnimation Reflection_fades = new DoubleAnimation();

Then we have to set what the animation do, the value changed from …. to ….

Reflection_fades.From = 0;
Reflection_fades.To = 1;

Furthermore, we have to let the computer know, how long is the animation last for?

Reflection_fades.Duration = new Duration(TimeSpan.Parse("0:0:1"));

After that, what else we left? We have to tell the computer which object we want to apply for this animation.

Storyboard.SetTarget(Reflection_fades, Target_item);

Also, the property that you are changing from 0 to 1 on the Targert_item.

Storyboard.SetTargetProperty(Reflection_fades, "(Target_item.Opacity)");

Things left are quite simple and easy to understand!
We should let the Storyboard to control our animation, thus we add(hook) it onto the Storyboard.
Of course, we should then add the Storyboard into the Resources so that we can see it in the application.

Reflection_Story1.Children.Add(Reflection_fades);
LayoutRoot.Resources.Add(Reflection_Story1);

Lastly, we should make it starts so we can see what happens to the Opacity of the item.

Reflection_Story1.Begin();

Example is almost finished here, but for more details, you can refer to MSDN.

Because users also need to have a clear concepts of the use of different Animation (like Double, Point…)

Live With Light
Steve Wong (Hong Kong)