Windows 8 Store Apps Learning (19) Animation linear animation, key frame animation, ease animation

Introduced

Re-imagine the Windows 8 Store Apps Animation

Linear Animation-A total of 3 species: ColorAnimation, DoubleAnimation, PointAnimation, all inherited from Timeline

Key-Frame animations-a total of 4 species: ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, Objectanimationusingkeyframes they all inherit from Timeline

Slow motion animation-easing

Example

1. Demonstrating the application of linear animation

Animation/linearanimation.xaml

<page x:class= "XamlDemo.Animation.LinearAnimation" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presen Tation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:XamlDemo.Animation "xmlns:d=" "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/
            markup-compatibility/2006 "mc:ignorable=" D "> <grid background=" Transparent "> <!-- There are 3 linear animations: ColorAnimation, DoubleAnimation, PointAnimation, all of which inherit from timeline Storyboard.targe Tname-attached property, the name of the object to animate Storyboard.TargetProperty-attached properties, the properties of the object to animate BeginTime-timeline is triggered Begi Ntime time to start playing TimeSpan-[-][Day.] When: minutes: seconds [. 1 to 7 of seconds after the decimal] (can be positive; can be negative; nullable; default = 0) from-animation starting value to-animation end by-animation from start value, required change Total amount (to precedence by by) Duration-Time line Duration TimeSpan-[-][Day.]
                When: minutes: seconds [. 1 digits to 7 seconds after the decimal]Automatic-Automatically determines Forever-infinitely long autoreverse-whether to return the original path after the animation completes. The default value is False RepeatBehavior-the time, number, or type of animation repeats TimeSpan-[-][Day.] When: minutes: seconds [. 1 digits to 7 seconds after decimal] NX-Number of plays. 1x, 2x, 3x Forever-a multiple of the rate at which SpeedRatio-timeline is permanently played. Default value 1 Fillbehavior-Behavior after animation (System.Windows.Media.Animation.FillBehavior enumeration) Fillbehavior.hol DEnd-After the animation is finished, the UI retains the animated state. Default value Fillbehavior.stop-after the animation finishes, the UI reverts to the state before the animation note: In WinRT for a smooth experience, part of the move The picture is optimized for "standalone animation," where the animation is not dependent on the UI thread, but there is also a part of the animation that is not optimized for "standalone animation," which we call "dependent animation," which needs to run on the UI thread, by setting Enabledependentanimation to True (default Think false), turn on "dependent animation" and set Timeline.allowdependentanimations to False (the default is true) to disable the "dependent animation" in
            Dependent Animation-Standalone animation dependent Animation-dependent animation--> <Grid.Resources>
           <beginstoryboard x:name= "Storyboardcolor" >     <Storyboard> <!--Color value linear animation--> <!--move The property to be modified is ellipse.fill, the resulting value of the animation is given to Solidcolorbrush.color, and then SolidColorBrush is the value of the Fill property after the animation like this: (Uielement.rendertransform). (Compositetransform.translatey) and (Uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scalex)--> <coloranimation Storyb Oard. Targetname= "Ellipse" storyboard.targetproperty= "(Ellipse.fill).
                        (solidcolorbrush.color) "Begintime=" 00:00:00 "from=" Red "
                        to= "Yellow" duration= "0:0:3" autoreverse= "true" repeatbehavior= "3x" > </ColorAnimation> </Storyboard> & Lt;/beginstoryboard> &Lt BeginStoryboard x:name= "storyboarddouble" > <Storyboard> <!--Double value linear Animation--
                    > <!--Animation The property to be modified is Canvas.Left--> <doubleanimation storyboard.targetname= "Rectangle" storyboard.targe Tproperty= "(canvas.left)" from= "by=" Begi
                        Ntime= "0:0:0" duration= "00:00:03" autoreverse= "true"
            Repeatbehavior= "Forever" > </DoubleAnimation> </Storyboard> </BeginStoryboard> <beginstoryboard x:name= "Storyboardpoint" > <storyboa rd> <!--point value linear animation--> <pointanimation Enable Dependentanimation= "TRue "Storyboard.targetname=" EllipseGeometry "storyboard.targetproperty=" Ce Nter "Begintime=" 00:00:00 "from=" 50,50 "to=" 200,20 0 "duration=" 00:00:03 "autoreverse=" true "repeatbe Havior= "Forever" > </PointAnimation> </Storyboard> </begi nstoryboard> </Grid.Resources> <stackpanel margin= "0 0 0" > <el  Lipse x:name= "Ellipse" fill= "Orange" width= "," height= "the" horizontalalignment= "left"/> <canvas Width= "height=" horizontalalignment= "left" margin= "0 0 0" > <rectangle x:name= "Rectangle
                
            "Fill=" Orange "width=" height= "canvas.left="/> </Canvas> <path fill= "Orange" &GT <Path.Data> <ellipsegeometry x:name= "EllipseGeometry" center= "50,50" radiusx= "radiusy=" 15 "/> </Path.Data> </Path> </StackPanel> < /grid> </Page>