WPF动画小短片_银光中国 Silverlight 资源社区论坛

　　前两天，朋友让用WPF写个小例子，关于Animation部分的，好久不用WPF了，都有些生疏了。。

　　要求是这样的，一个图片从右往左移动，走到中间，淡出，然后一个动画(video)淡入，再往左移出。

　　第二张图片从上往下走，走到中间，旋转360°，然后淡出。动画播放过程，有背景音乐的辅助。

　　用最简单的方式实现了，有需要的内容可以参考参考。。。

　　XML代码：

<Window x:Class="Animation.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="700" Width="850" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">

    <Window.Resources>

        <Storyboard x:Key="sb">

            <!--image1 animation-->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img1" Storyboard.TargetProperty="(UIElement.Opacity)">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:04" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img1_translate" Storyboard.TargetProperty="X">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="800"/>

                <LinearDoubleKeyFrame KeyTime="00:00:02" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <!--end-->

            <!--video animation-->

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:05" Storyboard.TargetName="video" 

Storyboard.TargetProperty="(UIElement.Opacity)">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:01" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:05" Storyboard.TargetName="video_translate" Storyboard.TargetProperty="X">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:04" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:05" Value="-800"/>

            </DoubleAnimationUsingKeyFrames>

            <MediaTimeline BeginTime="00:00:05" Source="1.wmv" Storyboard.TargetName="video" Duration="00:00:08"/>

            <!--end-->

            <!--image2 animation-->

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:10" Storyboard.TargetName="img2" Storyboard.TargetProperty="(UIElement.Opacity)">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:06" Value="1"/>

                <LinearDoubleKeyFrame KeyTime="00:00:07" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:10" Storyboard.TargetName="img2_translate" Storyboard.TargetProperty="Y">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="-600"/>

                <LinearDoubleKeyFrame KeyTime="00:00:02" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:06" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:10" Storyboard.TargetName="img2_rotate" Storyboard.TargetProperty="Angle">

                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:03" Value="0"/>

                <LinearDoubleKeyFrame KeyTime="00:00:06" Value="360"/>

            </DoubleAnimationUsingKeyFrames>

            <!--end-->

        </Storyboard>

        <Style TargetType="{x:Type Button}">

            <Setter Property="Margin" Value="5"/>

            <Setter Property="Width" Value="60"/>

            <Setter Property="Height" Value="45"/>

        </Style>

    </Window.Resources>

    <Grid>

        <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" Height="600"

                      Width="800" VerticalAlignment="Top">

            <Grid Background="#FFF1F1F1">

                <Image Source="Blue hills.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5 0.5" Name="img1" Opacity="0">

                    <Image.RenderTransform>

                        <TransformGroup>

                            <TranslateTransform x:Name="img1_translate"/>

                        </TransformGroup>

                    </Image.RenderTransform>

                </Image>

                <MediaElement Source="1.wmv" Stretch="UniformToFill" RenderTransformOrigin="0.5 0.5" Name="video" Opacity="0" Volume="0">

                    <MediaElement.RenderTransform>

                        <TransformGroup>

                            <TranslateTransform x:Name="video_translate"/>

                        </TransformGroup>

                    </MediaElement.RenderTransform>

                </MediaElement>

                <Image Source="Sunset.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5 0.5" Name="img2" Opacity="0">

                    <Image.RenderTransform>

                        <TransformGroup>

                            <TranslateTransform x:Name="img2_translate"/>

                            <RotateTransform x:Name="img2_rotate"/>

                        </TransformGroup>

                    </Image.RenderTransform>

                </Image>

            </Grid>

        </ScrollViewer>

        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">

            <Button Content="Play" Name="play"/>

            <Button Content="Pause" Name="pause"/>

            <Button Content="Resume" Name="resume"/>

            <Button Content="Stop" Name="stop"/>

        </StackPanel>

        <MediaElement Width="100" Height="100" Visibility="Hidden" LoadedBehavior="Manual" Name="bgm"/>

    </Grid>

</Window>

　　后台逻辑代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

namespace Animation

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

            this.Loaded += (s, e) =>

                {

                    sb = this.Resources["sb"] as Storyboard;

                    sb.Completed += new EventHandler(sb_Completed);

                    this.bgm.Source = new Uri(@"she is the one.mp3", UriKind.RelativeOrAbsolute);

                };

            this.play.Click += (s, e) =>

                {

                    if (sb != null)

                    {

                        sb.Begin(this, true);

                    }

                    bgm.Play();

                };

            this.pause.Click += (s, e) =>

            {

                if (sb != null)

                {

                    sb.Pause(this);

                }

                bgm.Pause();

            };

            this.resume.Click += (s, e) =>

            {

                if (sb != null)

                {

                    sb.Resume(this);

                }

                bgm.Play();

            };

            this.stop.Click += (s, e) =>

            {

                if (sb != null)

                {

                    sb.Stop(this);

                }

                bgm.Stop();

            };

        }

        private void sb_Completed(object sender, EventArgs e)

        {

            bgm.Stop();

        }

        private Storyboard sb = null;

    }

}

　　虽然短片就十几秒，但是看起来应该还是比较流畅的。。不过，如果透过这个例子，好好设计一下框架(加入Mask效果，控件的创建以一种更加合理的方式)，我们可以利用它来做一个Template(模板)，素材都可以之后任意添加，这样，对于不同的素材就能看到不一样的短片，呵呵。。

　　很显然，我的这种实现方式不值得推荐，随意看看就好，呵呵呵。。。

源码下载1

源码下载2

源码下载3

　　本文来自xirihanlin的博客，原文地址：http://www.cnblogs.com/xirihanlin/archive/2009/09/12/1565087.html

银光中国 Silverlight 资源社区论坛

搜索

热门标签

WPF动画小短片

银光中国 Silverlight 资源 社区 论坛

搜索

热门标签

WPF动画小短片

银光中国 Silverlight 资源社区论坛