Windows Phone 8.1 Path button making share

Objective

　　Often in the blog park to see everyone's article, because I wrote too bad, did not write a blog and small partners to share, yesterday to see the Android colleague do the button is quite good, think also do a. Now write the process, please do not hesitate to comment (the first blog will not typesetting ... Let's see.

Begin

In general to do animation before, used to do a blend of first animation, because blend to do animation quickly, you can easily see the effect of animation, when the animation debugging about the same time with VS open (an expanded animation and a recalled animation, In fact, set the storyboard AutoReverse property can automatically perform the recovered animation but the process can not control, only write two animation separate)

Depending on the requirements, if animations are more flexible, it is necessary to convert the generated XAML code into C # code. (The advantage of using blend is that debugging animations are easy to translate into C # code), which uses four animation x-axis translation, y-axis translation, center point rotation, property value changes.

The code uses the Keyframe animation, so it looks longer and can actually be doubleanimation without the keyframe animations.

This animation mainly controls the rotation of five buttons, from 360 to 0 rotation animation

Storyboard expand =NewStoryboard ();  for(inti =0; I <5; i++)            {                //Rotate AnimationDoubleAnimationUsingKeyFrames rotation =NewDoubleAnimationUsingKeyFrames (); Storyboard.settargetproperty (Rotation,"(Uielement.rendertransform). (compositetransform.rotation)"); //This method is only available for animations in XAML//storyboard.settargetname (rotation, "image" + i);storyboard.settarget (Rotation, This. FindName ("Image"+i) asImage); Easingdoublekeyframe startangle=NewEasingdoublekeyframe (); Startangle.value= - the; Startangle.keytime= Keytime.fromtimespan (Timespan.frommilliseconds (0)); Rotation.                Keyframes.add (startangle); if(i==2) {rotation. BeginTime= Timespan.frommilliseconds ( -); }                Else if(i==3) {rotation. BeginTime= Timespan.frommilliseconds ( -); }                Else if(i==4) {rotation. BeginTime= Timespan.frommilliseconds ( Max); } easingdoublekeyframe Endangle=NewEasingdoublekeyframe (); Endangle.value=0; Endangle.keytime= Keytime.fromtimespan (Timespan.frommilliseconds ( -)); Rotation.                Keyframes.add (Endangle); Expand.            Children.add (rotation); }

Rotation. BeginTime = Timespan.frommilliseconds (50);

This is the order of control when the button comes out, the button above the first to perform the animation.

The y-axis translates the animation so that each button is shifted in a different distance so it can only be judged by the if else. Attention

This method is only available for animations in XAML

Storyboard.settargetname (rotation, "image" + i);

Storyboard.settarget (rotation, this. FindName ("image" +i) as image);//code-generated animations Use this method

   for (int i = 1; i < 5; i++) {//y axis pan doubleanimationusingkeyframes ytransa                LTE = new DoubleAnimationUsingKeyFrames (); Storyboard.settargetproperty (Ytransalte, "(Uielement.rendertransform). (                Compositetransform.translatey) "); Storyboard.settarget (Ytransalte, this.                FindName ("image" + i) as image);                Starting point Easingdoublekeyframe Ystartpoint = new Easingdoublekeyframe ();                Ystartpoint.keytime = Keytime.fromtimespan (timespan.frommilliseconds (0));                if (i = = 1) {ystartpoint.value = 180; } else if (i = = 2) {Ytransalte.                    BeginTime = Timespan.frommilliseconds (50);                Ystartpoint.value = 140; } else if (i = = 3) {Ytransalte.                    BeginTime = timespan.frommilliseconds (100); Ystartpoint.                Value = 82; } else if (i = = 4) {Ytransalte.                    BeginTime = Timespan.frommilliseconds (150);                Ystartpoint.value = 10;               } ystartpoint.easingfunction = new Powerease () {easingmode = 0};                End Easingdoublekeyframe Yendpoint = new Easingdoublekeyframe ();                Yendpoint.keytime = Keytime.fromtimespan (timespan.frommilliseconds (500));                Yendpoint.value = 0; Yendpoint.easingfunction = new Powerease () {easingmode = 0};

The animation of the x-axis is similar, do not write, the following is the image, whether to display the value of the property changes (when the button is not yet out of the page is hidden, after the recall button, and hidden)

    Animate the value of a property objectanimationusingkeyframes Visi = new Objectanimationusingkeyframes ();                Storyboard.settargetproperty (Visi, "(uielement.visibility)"); Storyboard.settarget (Visi, this.                FindName ("image" + i) as image);                DiscreteObjectKeyFrame startobj = new DiscreteObjectKeyFrame ();                Startobj.keytime = Keytime.fromtimespan (timespan.frommilliseconds (0));                Startobj.value = visibility.visible;                DiscreteObjectKeyFrame endobj = new DiscreteObjectKeyFrame ();                Endobj.keytime = Keytime.fromtimespan (timespan.frommilliseconds (500));                Endobj.value = visibility.visible; if (i = = 2) {Visi.                                  BeginTime = Timespan.frommilliseconds (50); } else if (i = = 3) {Visi.                BeginTime = timespan.frommilliseconds (100); } else if (i = =4) {Visi.                BeginTime = Timespan.frommilliseconds (150); } Visi.                Keyframes.add (Startobj); Visi.                Keyframes.add (Endobj); Expand. Children.add (Visi);

The above is the button to expand the animation, but also to write back the animation, change the code to expand the animation just fine.

Effect

Front-end Code

<Grid>        <CanvasHorizontalAlignment= "Left"Height= "228"Margin= "0,402,0,0"VerticalAlignment= "Top"Width= "234">            <Imagex:name= "Image0"Height= " the"Width= " the"Canvas.Top= " the"Rendertransformorigin= "0.5,0.5"Source= "Ms-appx:///assets/image/button1.png"Tapped= "image0_tapped">                <Image.rendertransform>                    <Compositetransform/>                </Image.rendertransform>            </Image>            <ImageVisibility= "Collapsed"x:name= "Image1"Height= " the"Width= " the"Canvas.Left= "$"Source= "Ms-appx:///assets/image/button2.png"Rendertransformorigin= "0.5,0.5">                <Image.rendertransform>                    <Compositetransform/>                </Image.rendertransform>            </Image>            <ImageVisibility= "Collapsed"x:name= "Image2"Height= " the"Width= " the"Canvas.Top= "Max"Canvas.Left= " the"Source= "Ms-appx:///assets/image/button3.png"Rendertransformorigin= "0.5,0.5">                <Image.rendertransform>                    <Compositetransform/>                </Image.rendertransform>            </Image>            <ImageVisibility= "Collapsed"x:name= "Image3"Height= " the"Width= " the"Canvas.Top= "98"Canvas.Left= "Max"Source= "Ms-appx:///assets/image/button4.png"Rendertransformorigin= "0.5,0.5">                <Image.rendertransform>                    <Compositetransform/>                </Image.rendertransform>            </Image>            <ImageVisibility= "Collapsed"x:name= "Image4"Height= " the"Width= " the"Canvas.Top= "The "Canvas.Left= "175"Source= "Ms-appx:///assets/image/button5.png"Rendertransformorigin= "0.5,0.5" >                <Image.rendertransform>                    <Compositetransform/>                </Image.rendertransform>            </Image>        </Canvas>    </Grid>

Windows Phone 8.1 Path button making share