WPF动画小短片
前两天，朋友让用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;
}
}
Sample的代码地址：https://files.cnblogs.com/xirihanlin/DL090911@cc-AnimationDemo.zip
虽然短片就十几秒，但是看起来应该还是比较流畅的。。不过，如果透过这个例子，好好设计一下框架（加入Mask效果，控件的创建以一种更加合理的方式），我们可以利用它来做一个Template（模板），素材都可以之后任意添加，这样，对于不同的素材就能看到不一样的短片，呵呵。。
很显然，我的这种实现方式不值得推荐，随意看看就好，呵呵呵。。。
