Simple Animations

Syntax

ArtefactAnimator.AddEase(element, property, value, time, ease, delay);

Usage

ArtefactAnimator.AddEase(element, Canvas.LeftProperty, 250, .7, AnimationTransitions.CubicEaseOut, 0);

You can also use string names as Shortcuts to DependencyProperties - See shortcuts documentation page for more info

//  "x" is already registered in AnimationTypes as Canvas.LeftProperty

    ArtefactAnimator.AddEase(element, "x", 250, .7, AnimationTransitions.CubicEaseOut, 0); 

//  AnimationTypes includes more pre-registered DependencyProperties which you can pass as strings.

    ArtefactAnimator.AddEase(element, AnimationTypes.X, 250, .7, AnimationTransitions.CubicEaseOut, 0);

Example - Movement

Ease ball to MouseDown position. Ball must be inside a Canvas - not a Grid.

XAML
<Canvas>
    <Ellipse x:Name="ball"
             Canvas.Left="0" Canvas.Top="0" 
             Fill="#FF00A4FF" Height="60" Width="60" />
</Canvas>

CODE
Application.Current.RootVisual.MouseLeftButtonDown += (s, args) =>
{
     // position info
     Point pt = args.GetPosition(null);

     // transition info
     double time = .8;
     double delay = 0;
     PercentHandler ease = AnimationTransitions.CubicEaseOut;

     // ease
     ArtefactAnimator.AddEase(ball, AnimationTypes.X, pt.X, time, ease, delay);
     ArtefactAnimator.AddEase(ball, AnimationTypes.Y, pt.Y, time, ease, delay);
};

Example - Grid Column Width

Animates the width of a Grid Column.

XAML
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="leftCol" Width="200"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition x:Name="rightCol" Width="1*"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="#5F303030" Grid.Column="1" />
    <Rectangle Fill="#5F1BAFAD" Grid.Column="2"  />
</Grid>

CODE
Application.Current.RootVisual.MouseLeftButtonDown += (s, args) =>
{
    // transition info
    double time = .8;
    double delay = 0;
    PercentHandler ease = AnimationTransitions.ElasticEaseOut;

    // new sizes
    var rnd = new System.Random();
    double widthPixels = ( rnd.NextDouble ( ) * 200 ) + 100;
    double widthStar = rnd.NextDouble ( ) * 1; 

    // animates a column width - using pixels
    ArtefactAnimator.AddEase ( leftCol, AnimationTypes.ColumWidthPixels, widthPixels, time, ease, delay);

    // animates a column width - using star
    ArtefactAnimator.AddEase ( rightCol, AnimationTypes.ColumWidthStar, widthStar, time, ease, delay);
};

Last edited Mar 30, 2010 at 2:01 AM by jgraup, version 3

Comments

No comments yet.