Recommended

Skip Navigation LinksHome / Search

Search

 
Results Per Page

Found 5 results for Animation Easing.
Date between: <not defined> and <not defined>
Search in: News , Articles , Tips , Shows , Showcase , Books

Order by Publish Date   Ascending Title   Rating  

  • 0 comments  /  posted by  Silverlight Show  on  Jul 21, 2009 (11 months ago)

    In this tutorial Alex Knight will show you how to create a simple toggle button that has an on and off state using the "Make in to a control" feature in Expression Blend 3, the Visual State Manager, and some Animation Easing.

    First we need to create the design of the control. You can use Expression Design or Blend for this or import your design from Photoshop. For this tutorial I will only use Expression Blend.



  • 0 comments  /  posted by  Silverlight Show  on  May 08, 2009 (more than a year ago)
    On the Silverlight SDK blog there is a sample that introduces each one of the 11 new easing functions and allows you to change their properties.

    Easing functions allow you to apply custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring. You could use Key-Frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.

    Currently, there are 11 new easing functions that you can apply to your animations. You can apply these using Blend 3 beta or you can use XAML or procedural code.

  • 0 comments  /  posted by  Silverlight Show  on  Apr 16, 2009 (more than a year ago)
    Mike Snow has another tip for you in which he shows how to apply built in animation functions to your Silverlight controls using Animation Easing.

    The result is a variety of animation effects that make your controls move in a more realistic way. For example, you can add springiness to your controls, set how many times you want it to bounce when it hits a destination point, etc.

  • 0 comments  /  posted by  Silverlight Show  on  Mar 27, 2009 (more than a year ago)
    Jeff Prosise has posted about the new feature of Silverlight 3 for dressing up animations - Easing.

    Animation easing makes it incredibly easy to add effects to your animations. Silverlight 3 Beta 1 comes with about a dozen different easing classes, including BounceEase, which adds bounce to animations, and ElasticEase, which adds oscillations. You can also write easing classes of your own by deriving from the EasingFunctionBase class. But the predefined easing classes are so rich and varied that you may never need to write your own.

  • 9 comments  /  posted by  Nikolay Raychev  on  Mar 25, 2009 (more than a year ago)

    Introduction

    Animation Easing are built in animation functions in Silverlight 3. They include several commonly used animations effects.

    Overview

    I'll describe in details how you can use the BackEase animation. Imagine that you want to move an Ellipse from the top to the bottom of a Canvas. You just create a Storyboard with DoubleAnimation as follows:

    <UserControl x:Class="AnimationEasings.MainPage" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" 
        Width="150" Height="450">  
        <UserControl.Resources> 
            <Storyboard x:Name="sbBackEaseIn">  
                <DoubleAnimation From="50" To="400" Duration="0:0:10" 
                    Storyboard.TargetName="circle" 
                    Storyboard.TargetProperty="(Canvas.Top)">  
                </DoubleAnimation> 
            </Storyboard> 
        </UserControl.Resources> 
        <Canvas x:Name="LayoutRoot" 
                Background="LightYellow">  
            <Ellipse x:Name="circle" Width="50" 
                Height="50" Canvas.Top="0" Canvas.Left="50">  
                <Ellipse.Fill> 
                    <ImageBrush x:Name="backgroundImageBrush" 
                        Stretch="UniformToFill">  
                        <ImageBrush.ImageSource> 
                            <BitmapImage x:Name="bmpBackground" 
    UriSource="http://www.silverlightshow.net/Storage/Users/nikolayraychev/sls_icon.jpg">  
                            </BitmapImage> 
                        </ImageBrush.ImageSource> 
                    </ImageBrush> 
                </Ellipse.Fill> 
            </Ellipse> 
        </Canvas> 
    </UserControl> 

    Code behind:

    public MainPage()  
    {  
        InitializeComponent();  
     
        this.sbBackEaseIn.Begin();  

    OK, but what if you want to make the ellipse move up for a while and after that move down.


Help us make SilverlightShow even better. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)