Silverlight Animation learning Note (iii): easing function

(a) Definition:

Easing function: You can apply a custom arithmetic formula to an animation

(b) Why the easing function should be used:

You may want an object to bounce back realistically or behave like a spring. You can simulate these effects roughly using keyframe animations or even from/to/by animations, but you may need to do a lot of work, and the accuracy of the animation is reduced compared to using arithmetic formulas.

(c) Examples of explanation:

1<usercontrol x:class="animationstudy.easingfunctionanimation"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"4Xmlns:d="http://schemas.microsoft.com/expression/blend/2008"5Xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"6mc:ignorable="D"7d:designheight=" -"D:designwidth=" -">8 9<stackpanel x:name="LayoutRoot"Background=" White">Ten<StackPanel.Resources> One<!-- A easing function: -(1) Easingfunction Property: Specifies the easing function to apply to the animation -(2Easingmode Properties: Change the behavior of the easing function (change the interpolation mode of the animation: EaseIn, EaseOut, easeinout) the(3) Easingmode three ways to plug in: - EaseIn: Interpolation follows the arithmetic formula associated with the easing function.  -EaseOut: Interpolation follows -%interpolated subtracts the formula output associated with the easing function.  - easeinout: Interpolation uses EaseIn for the first half of the animation, and EaseOut is used for the second half of the animation.  +(4) easing function application range: -from/to/by Animation + Key-Frame animations A（5) Common easing functions: at backease: Slightly retract the motion of an animation before it starts animating along the indicated path.  - bounceease: Creates a bounce effect.  -Circleease: Create using loop function acceleration and/or slowing down the animation.  - Elasticease: Creates an animation that represents a spring that stops coming back to the oscillation.  -Sineease: Create use sine formula to accelerate and/or slowing down the animation.  -Exponentialease: Create using exponential formula acceleration and/or slowing down the animation.  in "Powerease animation" creates the same behavior as Cubicease, Quadraticease, Quarticease, and quinticease that use Power properties -Powerease: Create using equation f (t) = TP (where P equals Power property) acceleration and/or slowing down the animation.  toCubicease: Create using formula F (t) = T3 acceleration and/or slowing down the animation.  +Quadraticease: Create using formula F (t) = t2 acceleration and/or slowing down the animation.  -Quarticease: Create using formula F (t) = T4 acceleration and/or slowing down the animation.  theQuinticease: Create using formula F (t) = T5 acceleration and/or slowing down the animation.  *（6Create your own custom easing function by inheriting from Easingfunctionbase $ override the Easeincore method to add your own mathematical logic for the behavior of the easing function, as in the following code:Panax Notoginseng                 namespacecustomeasingfunction -                 { the                      Public classCustomseventhpowereasingfunction:easingfunctionbase +                     { A                          PublicCustomseventhpowereasingfunction ():Base()  the                         {  +                         }               -                         protected Override DoubleEaseincore (Doublenormalizedtime) $                         {                             $                             returnMath.pow (Normalizedtime,7); -                         } -                     } the             } --Wuyi<storyboard x:name="Mystoryboard"> the<DoubleAnimationUsingKeyFrames -storyboard.targetproperty="Height" WuStoryboard.targetname="MyRectangle"> -<easingdoublekeyframe value=" -"Keytime="00:00:02"> About<EasingDoubleKeyFrame.EasingFunction> $<cubicease easingmode="EaseOut"/> -</EasingDoubleKeyFrame.EasingFunction> -</EasingDoubleKeyFrame> -                      A<easingdoublekeyframe value=" $"Keytime="00:00:06"> +<EasingDoubleKeyFrame.EasingFunction> the<bounceease bounces="5"Easingmode="EaseOut"/> -</EasingDoubleKeyFrame.EasingFunction> $</EasingDoubleKeyFrame> the</DoubleAnimationUsingKeyFrames> the</Storyboard> the</StackPanel.Resources> the<rectangle x:name="MyRectangle"mouseleftbuttondown="mouse_clicked"  -Fill="Blue"Width=" $"height=" $"/> in</StackPanel> the</UserControl>

Article turned from: http://www.cnblogs.com/Joetao/articles/2054250.html