Animation Easing allows for you to apply built in animation functions to your Silverlight controls. 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. The functions that you can set include:
- BackEase – Moves the ball backwards by an amount specified through its amplitude before moving forward.
- BounceEase – Created an effect like a bouncing ball.
- CircleEase – Accelerates the animation based upon a circular function.
- CubicEase - Accelerates the animation based upon a cubic function.
- ElasticEase – Uses springiness and oscillation to animate.
- ExponentialEase – Accelerates the animation based upon an exponent value.
- PowerEase – Accelerates the animation based upon a power of time.
- QuadraticEase – Accelerates the animation based upon the square of time.
- QuarticEase – Accelerates the animation based upon the cube of time.
- QuinticEase – Accelerates the animation based upon the time to the power of 5.
- SineEase – Accelerates the animation along a sine wave.
Each of these has can have an EasingMode set to one of the following options:
- EaseOut – Ease takes place at the beginning of the animation.
- EaseIn – Ease takes place at the end of the animation.
- EaseInOut – EaseIn takes place for half the animation followed by EaseOut.
In addition, you can set the Duration, From and To values for the animation.
The best way to see what each of these do is to simply to try them out via this demo. Try modifying any properties that are specifically unique to the animation.
The animation functions listed above are applied directly to a storyboard that is then used to target and animate a given control. The XAML I use for each ball is as follows:
<UserControl x:Class="BouncingBall.Ball"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="BallSB">
<DoubleAnimation x:Name="BallDA" Completed="DoubleAnimation_Completed" From="0" To="1000" Duration="0:0:05"
Storyboard.TargetName="TargetBall" Storyboard.TargetProperty="(Canvas.Top)">
<DoubleAnimation.EasingFunction>
<BounceEase x:Name="Easing" Bounces="10" EasingMode="EaseOut" Bounciness="2"></BounceEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Canvas.Resources>
<Image x:Name="TargetBall" Source="ball.png" ImageOpened="Image_ImageOpened"></Image>
</Canvas>
</UserControl>
Thanks,
--Mike
From within VS you can specify which Internet browser you want launched when running your Silverlight application. Your default system browser is not affected by this setting.
To make this change right click on your startup web page and choose Browse with… from the context menu. This will bring up the following dialog.
From within this dialog select the browser you want to use and choose “Set as Default”. Close the dialog when you are done.
Thank you,
--Mike Snow
Subscribe in a reader
With the release of Silverlight 3 Beta 1 GPU (Graphics Processing Unit) acceleration (or hardware acceleration) is now available. The GPU is a processor attached to your graphics card that is generally used for calculating floating point operations. In addition, it contains a number of graphics primitives that when used will save you a lot of CPU time.
By default this option is disabled and to use it you must enable it both on your Silverlight control/plug-in as well as any of the controls you want to leverage it.
To enable it on your Silverlight control open your web page that hosts the Silverlight control.
For HTML modify the Silverlight control to include the following param:
<param name="EnableGPUAcceleration" value="true" />
For ASPX add the following attribute:
<asp:Silverlight ID="Silverlight1" EnableGPUAcceleration="true" runat="server" Source="~/ClientBin/MyApp.xap" MinimumVersion="3.0.40307.0" Width="100%" Height="100%" />
Now, to apply it to a control you will need to add CacheMode="BitmapCache” to the control. The following example shows you how to add it to an Image control:
<Image CacheMode="BitmapCache" Source="MyImage.png"></Image>
Currently BitmapCache is the only option. What this does is it causes visual elements (and all their children) to be cached as bitmaps after they have already been rendered. Once cached, your application can bypass the expensive rendering phase for the cached elements and just display them.
If you want to test out what is being cached in your application add the following attribute to your Silverlight control:
<asp:Silverlight EnableCacheVisualization="true" ID="Silverlight1" EnableGPUAcceleration="true" runat="server" Source="~/ClientBin/MyAPp.xap" MinimumVersion="3.0.40307.0" Width="100%" Height="100%" />
Uncached objects will appear tinted where as cached objects will not be tinted.
This feature is supported on:
-
Windows: Both full screen and non-full screen
-
Mac: Full screen only.
This feature should be used when the following are occurring to your control:
-
Transformations (translating, rotating, stretching, etc.).
- Clipping.
- Blending.
Thank you,
--Mike Snow
Subscribe in a reader
Of the course of the last year I have been collecting links to some really good Silverlight tutorial blogs that I thought I would share with you. These are active blogs, frequently updated, that are specifically oriented to teaching Silverlight development. That is, they are all about showing you how things are done and giving you the source code you need to do it yourself. If I have missed any good links post a comment and I will add it!
Silverlight tutorial sites in alphabetical order:
Also, here is a great Silverlight Blog summary page: http://www.netvibes.com/rboarman#Silverlight
Thank you,
--Mike