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

Source: Internet
Author: User
Tags thread xmlns


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


1. Demonstrating the application of linear animation


<page x:class= "XamlDemo.Animation.LinearAnimation" xmlns= "Http:// Tation "xmlns:x=" Http:// "xmlns:local=" Using:XamlDemo.Animation "xmlns:d=" "" xmlns:mc= "
            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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.