游戏人生Silverlight(2) - 趣味钢琴[Silverlight 2.0(c#)]

核心提示： 2、按键提示动画AnimationKey.xaml<UserControl x:Class="YYPiano.Controls.Parts.AnimationKey" xmlns="http://schemas.microsoft.com/winfx/2

2、按键提示动画

AnimationKey.xaml

<UserControl x:Class="YYPiano.Controls.Parts.AnimationKey"
　　　 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　　 <Canvas>
　　　　　　　 <!--3个椭圆，目标区，按键动画进入该区域后敲击则为有效敲击-->
　　　　　　　 <Ellipse x:Name="target" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="0" Canvas.Top="250" />
　　　　　　　 <Ellipse x:Name="target2" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="120" Canvas.Top="250" />
　　　　　　　 <Ellipse x:Name="target3" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="240" Canvas.Top="250" />

　　　　　　　 <!--提示按键-->
　　　　　　　 <Border x:Name="container" BorderBrush="Gray" BorderThickness="1" Width="50" Height="50" CornerRadius="50" Canvas.Left="135" RenderTransformOrigin="0.5, 0.5">
　　　　　　　　　　　 <TextBlock x:Name="key" TextAlignment="Center" VerticalAlignment="Center" FontSize="40" FontWeight="Bold">
　　　　　　　　　　　 </TextBlock>
　　　　　　　　　　　 <Border.RenderTransform>
　　　　　　　　　　　　　　　 <TransformGroup>
　　　　　　　　　　　　　　　　　　　 <RotateTransform x:Name="rt" />
　　　　　　　　　　　　　　　　　　　 <TranslateTransform x:Name="tt" />
　　　　　　　　　　　　　　　　　　　 <ScaleTransform x:Name="st" ScaleX="0.3" ScaleY="0.3" />
　　　　　　　　　　　　　　　 </TransformGroup>
　　　　　　　　　　　 </Border.RenderTransform>
　　　　　　　 </Border>

　　　　　　　 <Canvas.Resources>
　　　　　　　　　　　 <!--主动画（缓冲提示）-->
　　　　　　　　　　　 <Storyboard x:Name="mainAni" Completed="mainAni_Completed">
　　　　　　　　　　　　　　　 <!--坐标-->
　　　　　　　　　　　　　　　 <DoubleAnimation x:Name="targetX" From="0" To="0" Duration="0:0:4" Storyboard.TargetName="tt" Storyboard.TargetProperty="X" />
　　　　　　　　　　　　　　　 <DoubleAnimation From="0" To="250" Duration="0:0:4" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />

　　　　　　　　　　　　　　　 <!--旋转-->
　　　　　　　　　　　　　　　 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle" RepeatBehavior="1x" >
　　　　　　　　　　　　　　　　　　　 <SplineDoubleKeyFrame Value="366" KeySpline="0.1,0 0.2,0.95" KeyTime="0:0:4" />
　　　　　　　　　　　　　　　 </DoubleAnimationUsingKeyFrames>

　　　　　　　　　　　　　　　 <!--缩放-->
　　　　　　　　　　　　　　　 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX">
　　　　　　　　　　　　　　　　　　　 <SplineDoubleKeyFrame Value="1" KeySpline="0.1,0 0.3,0.8" KeyTime="0:0:4" />
　　　　　　　　　　　　　　　 </DoubleAnimationUsingKeyFrames>
　　　　　　　　　　　　　　　 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY">
　　　　　　　　　　　　　　　　　　　 <SplineDoubleKeyFrame Value="1" KeySpline="0.1,0 0.3,0.8" KeyTime="0:0:4" />
　　　　　　　　　　　　　　　 </DoubleAnimationUsingKeyFrames>
　　　　　　　　　　　 </Storyboard>

　　　　　　　　　　　 <!--进入目标区后的动画-->
　　　　　　　　　　　 <Storyboard x:Name="insideAni" Completed="insideAni_Completed" Duration="0:0:0.4">
　　　　　　　　　　　　　　　 <DoubleAnimation To="310" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />
　　　　　　　　　　　 </Storyboard>

　　　　　　　　　　　 <!--离开目标区后的动画-->
　　　　　　　　　　　 <Storyboard x:Name="outsideAni">
　　　　　　　　　　　　　　　 <DoubleAnimation To="400" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />
　　　　　　　　　　　　　　　 <DoubleAnimation To="0" Storyboard.TargetName="container" Storyboard.TargetProperty="Opacity" />
　　　　　　　　　　　 </Storyboard>
　　　　　　　 </Canvas.Resources>
　　　 </Canvas>
</UserControl>


AnimationKey.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace YYPiano.Controls.Parts
{
　　　 public partial class AnimationKey : UserControl
　　　 {
　　　　　　　 public AnimationKey()
　　　　　　　 {
　　　　　　　　　　　 InitializeComponent();
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 键值 A - Z，动画显示，用于提示用户应该敲什么键
　　　　　　　 /// </summary>
　　　　　　　 public Key Key
　　　　　　　 {
　　　　　　　　　　　 get { return Convert.ToChar(key.Text).ToKey(); }
　　　　　　　　　　　 set { key.Text = value.ToChar().ToString(); }
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 开始动画
　　　　　　　 /// </summary>
　　　　　　　 public void Start()
　　　　　　　 {
　　　　　　　　　　　 mainAni.Begin();
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 停止动画
　　　　　　　 /// </summary>
　　　　　　　 public void Stop()
　　　　　　　 {
　　　　　　　　　　　 mainAni.Stop();
　　　　　　　　　　　 insideAni.Stop();
　　　　　　　　　　　 outsideAni.Stop();
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 动画开始时间
　　　　　　　 /// </summary>
　　　　　　　 public TimeSpan BeginTime
　　　　　　　 {
　　　　　　　　　　　 set { mainAni.BeginTime = value; }
　　　　　　　 }

　　　　　　　 private int _targetIndex;
　　　　　　　 /**//// <summary>
　　　　　　　 /// UI 上设置了 3 个目标区，设置键的动画最终要落到哪个区上
　　　　　　　 /// </summary>
　　　　　　　 public int TargetIndex
　　　　　　　 {
　　　　　　　　　　　 set
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 if (value == 0)
　　　　　　　　　　　　　　　　　　　 targetX.To = -120;
　　　　　　　　　　　　　　　 else if (value == 1)
　　　　　　　　　　　　　　　　　　　 targetX.To = 0;
　　　　　　　　　　　　　　　 else if (value == 2)
　　　　　　　　　　　　　　　　　　　 targetX.To = 120;
　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　　　　　 targetX.To = 0;

　　　　　　　　　　　　　　　 _targetIndex = value;
　　　　　　　　　　　 }
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 主动画完成后
　　　　　　　 /// </summary>
　　　　　　　 /// <param name="sender"></param>
　　　　　　　 /// <param name="e"></param>
　　　　　　　 private void mainAni_Completed(object sender, EventArgs e)
　　　　　　　 {
　　　　　　　　　　　 if (_targetIndex == 0)
　　　　　　　　　　　　　　　 target.Fill = new SolidColorBrush(Colors.Orange);
　　　　　　　　　　　 else if (_targetIndex == 1)
　　　　　　　　　　　　　　　 target2.Fill = new SolidColorBrush(Colors.Orange);
　　　　　　　　　　　 else if (_targetIndex == 2)
　　　　　　　　　　　　　　　 target3.Fill = new SolidColorBrush(Colors.Orange);

　　　　　　　　　　　 insideAni.Begin();

　　　　　　　　　　　 OnInside();
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 目标区动画完成后
　　　　　　　 /// </summary>
　　　　　　　 /// <param name="sender"></param>
　　　　　　　 /// <param name="e"></param>
　　　　　　　 private void insideAni_Completed(object sender, EventArgs e)
　　　　　　　 {
　　　　　　　　　　　 if (_targetIndex == 0)
　　　　　　　　　　　　　　　 target.Fill = new SolidColorBrush(Colors.Transparent);
　　　　　　　　　　　 else if (_targetIndex == 1)
　　　　　　　　　　　　　　　 target2.Fill = new SolidColorBrush(Colors.Transparent);
　　　　　　　　　　　 else if (_targetIndex == 2)
　　　　　　　　　　　　　　　 target3.Fill = new SolidColorBrush(Colors.Transparent);

　　　　　　　　　　　 outsideAni.Begin();

　　　　　　　　　　　 OnOutside();
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 动画进入目标区后的事件
　　　　　　　 /// </summary>
　　　　　　　 public event EventHandler<PianoKeyEventArgs> Inside;
　　　　　　　 public void OnInside()
　　　　　　　 {
　　　　　　　　　　　 if (Inside != null)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 Inside(this, new PianoKeyEventArgs() { Key = this.Key });
　　　　　　　　　　　 }
　　　　　　　 }

　　　　　　　 /**//// <summary>
　　　　　　　 /// 动画离开目标区后的事件
　　　　　　　 /// </summary>
　　　　　　　 public event EventHandler<PianoKeyEventArgs> Outside;
　　　　　　　 public void OnOutside()
　　　　　　　 {
　　　　　　　　　　　 if (Outside != null)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 Outside(this, new PianoKeyEventArgs() { Key = this.Key });
　　　　　　　　　　　 }
　　　　　　　 }
　　　 }
}