[Win8] Windows 8 Development notes (11): Introduction to the storyboard of the animated story Edition

Create a new project named testanimation to test the use of the animated storyboard.

Drag a button to perform the experiment.

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top">            <Button.RenderTransform>                <ScaleTransform x:Name="st1">                                    </ScaleTransform>            </Button.RenderTransform>        </Button>    </Grid></Page>

Then declare a storyboard Resource:

 

 

    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleX" From="0" To="10">            </DoubleAnimation>            </Storyboard>    </Page.Resources>

Double-click the button to add a listener and start the animation so that the width of the button changes 10 times when the button is clicked.

 

 

        private void Button_Click_1(object sender, RoutedEventArgs e)        {            sb1.Begin();        }

Run the project to see the effect.

 

Of course, animation is not limited to rendertransform, but can also be used for ing.

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleX" From="0" To="10">            </DoubleAnimation>        </Storyboard>        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360">            </DoubleAnimation>        </Storyboard>    </Page.Resources>        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top" Click="Button_Click_1">            <Button.RenderTransform>                <ScaleTransform x:Name="st1">                </ScaleTransform>            </Button.RenderTransform>            <Button.Projection>                <PlaneProjection x:Name="pp1" RotationY="30">                </PlaneProjection>            </Button.Projection>        </Button>    </Grid></Page>

Multiple animations can be played simultaneously -. -Because begin is not blocked.

 

But what is the animation time? What are the details?

We can customize these items.

For example, duration can specify how long the animation has been played:

 

<Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03">            </DoubleAnimation>        </Storyboard>

For example, whether autoreverse automatically performs reverse playback:

 

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03" AutoReverse="True">            </DoubleAnimation>        </Storyboard>

For example, if repeatbehavior is set to forever or 3x, you can play it again:

 

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03" RepeatBehavior="Forever">            </DoubleAnimation>        </Storyboard>

In addition to the above, there are other models.

 

For example, easingfunction is an attribute of doubleanimation,

The bouncease is a spring effect, and you can try it yourself.

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:01" RepeatBehavior="3x">                <DoubleAnimation.EasingFunction>                    <BackEase>                    </BackEase>                </DoubleAnimation.EasingFunction>            </DoubleAnimation>        </Storyboard>

With doubleanimation, you can rotate images in a three-dimensional manner, flash text, and Subtitle effects on titles. click the button to slide the dialog box.

 

Next, let's talk about the sequence playback of the animation.

For example, this Code:

 

<Page X: class = "testanimation. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: testanimation "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <page. resources> <storyboard X: Name = "SB1"> <doubleanimation storyboard. targetname = "ST1" storyboard. targetproperty = "scalex" from = "1" to = "2"> </doubleanimation> </storyboard> <storyboard X: Name = "sb2"> <doubleanimation storyboard. targetname = "ST1" storyboard. targetproperty = "scaley" from = "1" to = "2"> </doubleanimation> </storyboard> </page. resources> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <button content = "button" horizontalalignment = "Left" margin = "200,100, 100 "verticalignment =" TOP "Click =" button_click_1 "/> <Image Source =" header .jpg "horizontalalignment =" center "Height =" 100 "verticalignment =" center "width = "" "Name =" image "> <image. rendertransform> <scaletransform X: Name = "ST1"/> </image. rendertransform> </image> </GRID> </Page>

 

What should I do if I want to change both scalex and scaley horizontally and vertically?

Add a conpleted event to the first animation:

 

<Page X: class = "testanimation. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: testanimation "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <page. resources> <storyboard X: Name = "SB1"> <doubleanimation storyboard. targetname = "ST1" completed = "doubleanimation_completed_1" storyboard. targetproperty = "scalex" from = "1" to = "2"> </doubleanimation> </storyboard> <storyboard X: Name = "sb2"> <doubleanimation storyboard. targetname = "ST1" storyboard. targetproperty = "scaley" from = "1" to = "2"> </doubleanimation> </storyboard> </page. resources> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <button content = "button" horizontalalignment = "Left" margin = "200,100, 100 "verticalignment =" TOP "Click =" button_click_1 "/> <Image Source =" header .jpg "horizontalalignment =" center "Height =" 100 "verticalignment =" center "width = "" "Name =" image "> <image. rendertransform> <scaletransform X: Name = "ST1"/> </image. rendertransform> </image> </GRID> </Page>

Then add the corresponding processing in the background code:

 

 

Using system; using system. collections. generic; using system. io; using system. LINQ; using Windows. foundation; using Windows. foundation. collections; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. data; using Windows. UI. XAML. input; using Windows. UI. XAML. media; using Windows. UI. XAML. navigation; // "blank page" item template in http://go.microsoft.com/fwlink? On linkid = 234238, the introduction namespace testanimation {// <summary> /// can be used for itself or navigation to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent () ;}/// <summary> /// call when this page is to be displayed in the frame. /// </Summary> /// <Param name = "E"> describes how to access event data on this page. Parameter // properties are usually used on the configuration page. </Param> protected override void onnavigatedto (navigationeventargs e) {} private void button_click_1 (Object sender, routedeventargs e) {sb1.begin ();} private void upload (Object sender, Object E) {sb2.begin ();}}}