Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Animations : The Easing Functions

- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
4/9/2011 5:08:27 PM
Defining key frames with splines is easy in one sense—there are only four numbers involved—but also hard: You need to approximate a certain desired effect with a Bézier spline, and that’s not always obvious.

You might prefer something more “canned” that gives you an overall impression of adherence to physical law without requiring a lot of thought. This is the purpose of the animation easing functions. These are classes that derive from EasingFunctionBase with common types of transitions that you can add to the beginning or end (or both beginning and end) of your animations. DoubleAnimation, PointAnimation, and ColorAnimation all have properties named EasingFunction of type EasingFunctionBase. There are also EasingDoubleKeyFrame, EasingColorKeyFrame, and EasingPointKeyFrame classes.

EasingFunctionBase defines just one property: EasingMode of the enumeration type EasingMode, either EaseOut (the default, which uses the transition only at the end of the animation), EaseIn, or EaseInOut. Eleven classes derive from EasingFunctionBase and you can derive your own if you want to have even more control and power.

The project named TheEasingLife lets you choose among the eleven EasingFunctionBase derivatives to see their effect on a simple PointAnimation involving a ball-like object. The content area is populated with two Polyline elements and a Path but no coordinates are supplied; that’s done in code.

Example 1. Silverlight Project: TheEasingLife File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Polyline Name="polyline1"
Stroke="{StaticResource PhoneForegroundBrush}" />

<Polyline Name="polyline2"
Stroke="{StaticResource PhoneForegroundBrush}" />

<Path Fill="{StaticResource PhoneAccentBrush}">
<Path.Data>
<EllipseGeometry x:Name="ballGeometry"
RadiusX="25"
RadiusY="25" />
</Path.Data>
</Path>
</Grid>

The Resources collection contains a Storyboard with a PointAnimation targeting the Center property of the EllipseGeometry. The PointAnimation is given a Duration property but nothing else:

Example 2. Silverlight Project: TheEasingLife File: MainPage.xaml (excerpt)
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="storyboard"
Completed="OnStoryboardCompleted">
<PointAnimation x:Name="pointAnimation"
Storyboard.TargetName="ballGeometry"
Storyboard.TargetProperty="Center"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>

Notice that a handler is set for the Completed event of the Storyboard. This Completed event is defined by Timeline and is often convenient for letting a program know when an animation has completed.

The ApplicationBar has two buttons for “animate” and “settings”:

Example 3. Silverlight Project: TheEasingLife File: MainPage.xaml (excerpt)
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.play.rest.
png"
Text="animate"
Click="OnAppbarPlayButtonClick" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar.feature.settings.rest.
png"
Text="settings"
Click="OnAppbarSettingsButtonClick" />
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


The coordinates for the two Polyline elements and EllipseGeometry are set during the Loaded event handler based on the size of the content panel. The ball is intended to be animated between a Polyline at the top and a Polyline at the bottom; the actual points are stored in the ballPoints array. The direction (going down or going up) is governed by the isForward field.

Example 4. Silverlight Project: TheEasingLife File: MainPage.xaml.cs (excerpt)
public partial class MainPage : PhoneApplicationPage
{
PointCollection ballPoints = new PointCollection();
bool isForward = true;

public MainPage()
{
InitializeComponent();
Loaded += OnMainPageLoaded;
}

public EasingFunctionBase EasingFunction { get; set; }

void OnMainPageLoaded(object sender, RoutedEventArgs args)
{
double left = 100;
double right = ContentPanel.ActualWidth - 100;
double center = ContentPanel.ActualWidth / 2;
double top = 100;
double bottom = ContentPanel.ActualHeight - 100;

polyline1.Points.Add(new Point(left, top));
polyline1.Points.Add(new Point(right, top));

polyline2.Points.Add(new Point(left, bottom));
polyline2.Points.Add(new Point(right, bottom));

ballPoints.Add(new Point(center, top));
ballPoints.Add(new Point(center, bottom));

ballGeometry.Center = ballPoints[1 - Convert.ToInt32(isForward)];
}
. . .
}


Notice also the public property named EasingFunction. When you press the “animate” button, the Click handler fills in the missing pieces of the PointAnimation (including the EasingFunction property) and starts it going:

Example 5. Silverlight Project: TheEasingLife File: MainPage.xaml.cs (excerpt)
void OnAppbarPlayButtonClick(object sender, EventArgs args)
{
pointAnimation.From = ballPoints[1 - Convert.ToInt32(isForward)];
pointAnimation.To = ballPoints[Convert.ToInt32(isForward)];
pointAnimation.EasingFunction = EasingFunction;

storyboard.Begin();
}

void OnStoryboardCompleted(object sender, EventArgs args)
{
isForward ^= true;
}

The Completed handler toggles the isForward value in preparation for the next animation.

When you press the “settings” button, the program navigates to the EasingFunctionDialog page that lets you choose which easing function you want:

Example 6. Silverlight Project: TheEasingLife File: MainPage.xaml.cs (excerpt)
void OnAppbarSettingsButtonClick(object sender, EventArgs args)
{
NavigationService.Navigate(new Uri("/EasingFunctionDialog.xaml", UriKind
.Relative));
}

protected override void OnNavigatedFrom(NavigationEventArgs args)
{
if (args.Content is EasingFunctionDialog)
{
(args.Content as EasingFunctionDialog).EasingFunction = EasingFunction;
}
base.OnNavigatedTo(args);
}


When the OnNavigatedFrom override determines that a transition from MainPage to EasingFunctionDialog page is in progress, it transfers the contents of its EasingFunction property to EasingFunctionDialog, which also has a public EasingFunction property.

The content area of the EasingFunctionDialog.xaml file just has a StackPanel in a ScrollViewer:

Example 7. Silverlight Project: TheEasingLife File: EasingFunctionDialog.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<StackPanel Name="stack" />
</ScrollViewer>
</Grid>

In its OnNavigatedTo override, the dialog uses reflection to fill up the StackPanel with RadioButton elements. By the time OnNavigatedTo is called, the EasingFunction property already has a valid value set by the OnNavigatedFrom override in MainPage:

Example 8. Silverlight Project: TheEasingLife File: EasingFunctionDialog.xaml.cs (excerpt)
public partial class EasingFunctionDialog : PhoneApplicationPage
{
public EasingFunctionDialog()
{
InitializeComponent();
}

public EasingFunctionBase EasingFunction { get; set; }

. . .

protected override void OnNavigatedTo(NavigationEventArgs args)
{
// Create "None" RadioButton
RadioButton radio = new RadioButton();
radio.Content = "None";
radio.IsChecked = (EasingFunction == null);
radio.Checked += OnRadioButtonChecked;
stack.Children.Add(radio);

Assembly assembly = Assembly.Load("System.Windows");

// Create RadioButton for each easing function
foreach (Type type in assembly.GetTypes())
if (type.IsPublic && type.IsSubclassOf(typeof(EasingFunctionBase)))
{
radio = new RadioButton();
radio.Content = type.Name;
radio.Tag = type;
radio.IsChecked = (EasingFunction != null &&
EasingFunction.GetType() == type);
radio.Checked += OnRadioButtonChecked;
stack.Children.Add(radio);
}
base.OnNavigatedTo(args);
}
. . .
}


Notice how the Tag property of each RadioButton is a Type object indicating the EasingFunctionBase derivative associated with that button. When the user presses one of the RadioButton elements, that Tag property is used to make a new object of that type:

Example 9. Silverlight Project: TheEasingLife File: EasingFunctionDialog.xaml.cs (excerpt)
void OnRadioButtonChecked(object sender, RoutedEventArgs args)
{
Type type = (sender as RadioButton).Tag as Type;

if (type == null)
{
EasingFunction = null;
}
else
{
ConstructorInfo constructor = type.GetConstructor(Type.EmptyTypes);
EasingFunction = constructor.Invoke(null) as EasingFunctionBase;
}
}

Finally, when you’re finished choosing the easing function you want, you press the Back button and the dialog’s OnNavigatedFrom override is called. This responds by storing the current selection back in MainPage:

Example 10. Silverlight Project: TheEasingLife File: EasingFunctionDialog.xaml.cs (excerpt)
protected override void OnNavigatedFrom(NavigationEventArgs args)
{
if (args.Content is MainPage)
{
(args.Content as MainPage).EasingFunction = EasingFunction;
}
base.OnNavigatedFrom(args);
}

Keep in mind that these EasingFunctionBase derivatives have all default property settings, including the EasingMode property that restricts the effect only to the end of the animation. You’ll find that a couple of these effects—specifically BackEase and ElasticEase—actually overshoot the destination. While this doesn’t matter in many cases, for some properties it might result in illegal values. You don’t want to set Opacity to values outside the range of 0 and 1, for example.

Other -----------------
- Animations : The Bouncing Ball Problem
- Animations : Splines and Key Frames
- Animations : Animating Attached Properties (or Not)
- Animations : Trigger on Loaded
- Animations : Key Frame Animations
- Animations : A Cautionary Tale
- Animations - XAML-Based Animations
- Animations - Some Variations
- Animations : Click and Spin
- Animations : Frame-Based vs. Time-Based
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server