Windows Phone development (39): Key Frame Animation

Although the previous several animations will make you feel very interesting, you don't know if you have found them. In the series of xxxanimation mentioned above, they all have one thing in common, the animation is generated only between the two values. If 'by' is used, the animation is performed between the original value and the target value after 'by' is added. If 'from', 'to' is used, it is better understood, that is, the animation of the values between the first and the last two values.

What if I want three values? Or N values? What is the time interval between each value? What if I want more complex animation effects? For example, you can append the easing function. Obviously, the animation classes we mentioned earlier cannot be completed.

I wonder if you have played flash before. What would you do if it was in flash? Yes, I will definitely say-key frames. Yes. Is there any Key Frame Animation in Silverlight for Windows Phone? The answer is obviously yes.

 

Compared with the simple animation mentioned above, the Key Frame Animation will become more complex and more difficult to understand. I ask you, are you afraid?

If you are afraid of it, don't look down. You have to waste it halfway, and you are scolded by your mother when you go home. If you dare to challenge, don't hesitate!

 

I 'd like to share some good news with you. In actual development, you don't have to write the XAML. Remember the powerful design tool that never existed before in human history-Express blend. Well, for D, if necessary, you can take it out and use it. Don't use such a good stuff to rust in the hard disk, it will pollute the environment. It's easier to use that guy for animation. You may suspect that you are using flash, which may be better than flash.

 

If you ask me how I learned the Key Frame Animation, I can only answer you: coding only. As for whether you believe it or not, you must believe this sentence if you want to become a master.

 

If you don't want to talk about it, first we need to find out some approximate lines related to key frames.

From the previous course, you must know that there can be n timeline objects in a storyboard, but you know that timeline is an abstract class. To put it bluntly, it is the object where classes derived from timeline can be placed, except storyboard, which cannot be nested.

In other words, the storyboard can contain N key frame timelines, which is similar to a simple animation. The key frame animation only targets values such as double, color, and point. Very easy to find, as long as you see the xxxanimationusingkeyframes words are all key frame animation time series, why is there a s behind, ah, plural form, elementary English, no need to explain, since it is a plural number, of course there can be n key frames in a timeline.

 

Now, you must be in the fog in the cloud. So, the theoretical things are also nonsense. Is it really cute?

This section describes doubleanimationusingkeyframes. There are three key frames in it: lineardoublekeyframe, splinedoublekeyframe, and easingdoublekeyframe. We only play the first two, followed by an animation with a easing function, since the easing animation works in the same way, I want to play it in a special section.

 

Lineardoublekeyframe is quite understandable. In fact, it is very similar to doubleanimation, but the key frame is characterized by a time point corresponding to a value. Therefore, remember this sentence: any key frame has a one-to-one correspondence between keytime and value. A time point corresponds to a value.

Linear Key Frame Animation features "Uniform linear motion". Let's review the physics knowledge of junior high school. The two values of the two keys are evenly calculated based on the time interval.

 

In addition, let's take a look at splinedoublekeyframe, which is hard to understand. In fact, you can also use it if you don't understand it. Actually, some things in this world don't have to be understood before they can be used, for example, it is unlikely that you want to study how the medicine is processed before taking the medicine and then eat it again. Do you want to know how rice is planted before eating? Obviously not.

Splinedoublekeyframe is translated into spline interpolation by SDK documents, which increases the magic. When I was studying, If I encountered something that I could not understand at all, I would write the code to try it, write different code, test it from different angles, and play a lot, your inspiration is coming.

What is the inner interpolation animation? It's not just a "variable speed linear motion". You see, I have reviewed the physics of the senior high school entrance exam. Alas, I almost got a full score in that year, it's just playing with acceleration.

The key is to have a keyspline attribute, which sets a keyspline object. The keyspline class has two attributes: controlpoint1 and controlpoint2, which are two vertices. It is said that they are two control points of the besell curve.

It's really complicated. If you think it's really hard to understand, are you interested in playing this game? After playing, you must have a deeper understanding of this stuff, game address: http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm? Sref = keysplineexample

This game is very interesting and must be played seriously.

 

Next, let's start with a piece of beautiful XAML code. +

<Grid Loaded = "OnGridLoaded">
        <Ellipse VerticalAlignment = "Top" HorizontalAlignment = "Left"
                 Width = "100" Height = "100" Fill = "Blue">
            <Ellipse.RenderTransform>
                <TranslateTransform x: Name = "trf" />
            </Ellipse.RenderTransform>
        </ Ellipse>
        <Grid.Resources>
            <Storyboard x: Name = "storybrd">
                <DoubleAnimationUsingKeyFrames Duration = "0: 0: 6"
                                               RepeatBehavior = "Forever"
                                               Storyboard.TargetName = "trf"
                                               Storyboard.TargetProperty = "X">
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 6" Value = "420" />
                </ DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Duration = "0: 0: 6"
                                               RepeatBehavior = "Forever"
                                               Storyboard.TargetName = "trf"
                                               Storyboard.TargetProperty = "Y">
                    <SplineDoubleKeyFrame KeyTime = "0: 0: 2" Value = "700">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1 = "0,0" ControlPoint2 = "0,1" />
                        </SplineDoubleKeyFrame.KeySpline>
                    </ SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime = "0: 0: 3" Value = "550">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1 = "1,0" ControlPoint2 = "0.5,0" />
                        </SplineDoubleKeyFrame.KeySpline>
                    </ SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime = "0: 0: 5" Value = "95">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1 = "0,0" ControlPoint2 = "0,0.5" />
                        </SplineDoubleKeyFrame.KeySpline>
                    </ SplineDoubleKeyFrame>
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 6" Value = "730" />
                </ DoubleAnimationUsingKeyFrames>
            </ Storyboard>
        </Grid.Resources>
    </ Grid>
The code is like this, and you can't understand the consequences at your own risk. As I said in the first section, I first played WPF and Silverlight, and then played WP.

 

One more background code is needed to handle the above OnGridLoaded event.

        private void OnGridLoaded (object sender, RoutedEventArgs e)
        {
            this.storybrd.Begin ();
        }
 

Because it's an animation, it doesn't make sense, so it won't be sent. Run it yourself You must be very happy with your work!

 

 

 

History proves that an example is not enough. Let ’s have another “bottle”. In this example, we animate an Image control to make the picture move out and move away, mainly using perspective transformation.

    <Grid Loaded = "OnGridLoaded">
        <Image Name = "img" Source = "/ PhoneApp1; component / 1.jpg" Stretch = "Uniform" Opacity = "0">
            <Image.Projection>
                <PlaneProjection x: Name = "prj" />
            </Image.Projection>
        </ Image>
        <Grid.Resources>
            <Storyboard x: Name = "std" RepeatBehavior = "Forever" Duration = "0: 0: 12">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName = "img"
                                               Storyboard.TargetProperty = "Opacity">
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 3" Value = "1" />
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 8" Value = "1" />
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 12" Value = "0" />
                </ DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName = "prj"
                                               Storyboard.TargetProperty = "LocalOffsetZ">
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 0" Value = "-6000" />
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 8" Value = "0" />
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 12" Value = '-12' />
                </ DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName = "prj"
                                 Storyboard.TargetProperty = "RotationZ">
                    <SplineDoubleKeyFrame KeyTime = "0: 0: 0" Value = "360" />
                    <SplineDoubleKeyFrame KeyTime = "0: 0: 8" Value = "0">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1 = "0,0" ControlPoint2 = "0.25,0.5" />
                        </SplineDoubleKeyFrame.KeySpline>
                    </ SplineDoubleKeyFrame>
                </ DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName = "prj"
                                               Storyboard.TargetProperty = "RotationY">
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 8" Value = "0" />
                    <LinearDoubleKeyFrame KeyTime = "0: 0: 12" Value = "90" />
                </ DoubleAnimationUsingKeyFrames>
            </ Storyboard>
        </Grid.Resources>
    </ Grid>
Don't forget to deal with OnGridLoaded.

        private void OnGridLoaded (object sender, RoutedEventArgs e)
        {
            this.std.Begin ();
        }
 

Well, it ’s better to post a picture, so that some people say that there is no truth, you can look for pictures casually, as long as the content is healthy.

 

 

One more thing to tell you, lest you go to "dog ferry", the animation-related classes are basically located in the System.Windows.Media.Animation namespace.

 

As for the source code, big I will keep the source code for some articles. I am relatively backward and I do n’t use a network disk, so for the time being, if there is a friend who needs the source code, please leave your beloved Yimeier hostage, I will treat her kindly, rest assured.