One-step learning of Silverlight 2 series (32): Image and image synthesis instance-"King of Kung Fu" stills playback

Source: Internet
Author: User
Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

In this article, we will implement a graphic image instance-image playback, and use Storyboard to achieve some animation effects.

Today, I am also a title speaker :), which is actually a simple image player. It has nothing to do with the stills of "The King of Kung Fu, I found several stills of the upcoming movie "King of Kung Fu" on the Internet as an example.

Effect

The final result is as follows:

Click play on the left or right side of the picture

In another example

Main Implementation

When you click, the Source attribute of the image is dynamically changed:

void Play(){    currentImg.Source = new BitmapImage(new Uri(index.ToString() + ".png", UriKind.Relative));    int left = index == MIN ? MAX : index - 1;    leftImg.Source = new BitmapImage(new Uri(left.ToString() + ".png", UriKind.Relative));    int right = index == MAX ? MIN : index + 1;    rightImg.Source = new BitmapImage(new Uri(right.ToString() + ".png", UriKind.Relative));}

And use Storyboard to change some Transform values to achieve the animation effect:

<Canvas.Resources>    <Storyboard x:Name="myStoryboard">        <DoubleAnimation  Storyboard.TargetName="myTransform"  Storyboard.TargetProperty="AngleY"  From="0" To="180" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>    </Storyboard></Canvas.Resources

You can download the complete sample code from here.

Conclusion

This article implements a simple image player and uses Storyboard to implement some animation effects.

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: info-contact@alibabacloud.com 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.