Get Started with Tweened 2.1.2 stable version


Welcome to you :)

This is the page dedicated to the use of the Tweened library. You’ll find all informations necessary to use that library for production dev or for your personal experimentation. The Tweened library is licensed under Ms-Pl.  You can Download Tweened here.

Goal of Tweened library for Silverlight 2

Establishment

What properties can we animate ?

What is an equation of movement? What types of equations can be used with Tweened?

The methods of control animation class Tween

________________________________________________________

The main goal of Tweened library for Silverlight 2

As its name suggests this library allows to animate objects. But you have a choice regarding property of the object to animate or on the type of animation you want.

With 2 lines of code you can create complex animations like bouncing a ball or make elastic menus. For those not familiar with the tweens, I am not inventing anything, this principle existed in Flash for many years. In fact all the work was to bring in the most efficient and effective principle of the tween to Silverlight.From this point of view, this library is completely different from what may exist for Flash.

Why? simply because I create the Silverlight 2 XAML dynamically to create the Storyboard resources I need. In addition, do not tell you that you are going to do traditional animation with this library but rather see this library as a tool to automatically animate menus or buttons or things like that. The traditional animation to animate complex objects remains a craftsman in the true sense of the term.

________________________________________________________

Establishment

The principle is simple, the library Tweened can automatically create storyboard resources type to execution. Here is the introduction:

  • First you have to install Tweened.dll

To do that you just have to Add Reference “Tweened.dll” to your Silverlight 2 project


  • In your page.xaml.cs

You have to add the line :

using Tweened;
  • Then in the Page_Loaded void method, you must create an object wich is specific part of the library Tweened, this object describes the animation and the object that will receive this animation :
    TweenObject myTO = new TweenObject(aXamlObject, TweenableProperties.X, TweenedEquations.EaseOutElastic, 2, 100);
 
    /*
 
    I do not set the starting value but if I needed I could do so with the last parameter. So the starting value is the present value of the property of the XAML object.
 
    */
The parameters are:
  1. The first parameter is the object that will be animated.
  2. The second contains the property to animate. To get the list of TweenableProperties just refer to the static class.
  3. The third parameter is the equation that defines the motion  whether you want the object bounces or slow down for example. All Equations can be found in TweenedEquation static class.
  4. Then we define the number of decimal or integer second, 0.5 allows a period of half a second.
  5. The end value is the fifth parameter is the final value that the property should take at the end of animation.
  6. The start value is the sixth parameter is the value that the property should take at the start of animation, this parameter is optional.
  • Then you create a new Tween
        TweenObject myTO = new TweenObject(aXamlObject, TweenableProperties.X, TweenedEquations.EaseOutElastic, 2, 100);
 
        Tween myTween = new Tween();
 
        myTween.AddSequences(myTO);
 
        /* myTween.AddSequences(myTO1,  myTO2, myTOn ...); */
  • Finally, you just use the simplest method of the Tween object to trigger the animation :
    myTween.Start();

That’s finished. Without Tweened steps would have been many and complex.

What kinds of objects can we animate with this library?

You can animate two large families of XAML objects: Shape and UserControls. You do not actually limitations point of view as long as your item is displayed in Blend. If you have problems, please feel free to post a comment.

________________________________________________________
What properties can we animate ?

Two families of properties are available:

  • The graphical properties of the object, such as “opacity” or “Canvas.Left” or Fill and Stroke for the Shape. (ColorAnimation for shape at the moment)
  • The properties RenderTransform type : Tweened is based on RenderTransform nodes XAML created by default in Blend to respect and simplify process, i initialize automatically objects that do not have the TransformGroup node. That allows RenderTransform objects of any kind as vector.
These properties are accessible in a transparent way, you do not have to worry what type of property you want to animate. Internally Tweened uses a proxy.

All these properties are static properties of the static class TweenableProperties.

________________________________________________________

What is an equation of movement? What types of equations can be used with Tweened?

An equation of motion allows returning a set of values based on duration, start value and final value of a property. To simplify, there are lots of ways for an object to get from point A to point B. Each equation is a different way to bring an interpolation, whatever its type: the location, size or opacity for example. For my part, I took the equations of Robert Penner, so I thank him a lot as a “Flasher” and a “Silverlighter” :) To list the types of movements, you can use the TweenedEquations static class.

________________________________________________________

The methods of control animation class Tween
  • Method triggering animation :

myTween.Start() ;

  • Method of animation resets animation and stop the playhead :

myTween.Stop() ;

  • Pause or resume animation what ever the direction (tweening or reversing) :

myTween.Pause() ;

  • the reverse method can read Tween in reverse, very convenient for the menus:

myTween.Reverse() ;

  • the method used to redefine a new final value, very practical to define new positions on the fly :

myTween.ContinueTo(400) ;

That’s all, you know 90% percent you need to animate objet and menus.

I hope you enjoy it and do not hesitate to mail if you find bugs, I have only recently brought this library to Silverlight 2.


 

Quickstart Reference