silverlight系列(AnimationView、KeyFrameAnimation)

2010-03-04 12:39 key_sky 阅读(530) 评论(0) 编辑收藏举报

一、AnimationView

在容器的资源例如StackPanel.Resources。创建动画需要创建Storyboard对象并使用TargetName和TargetProperty附加属性指定要进行动画处理的对象和属性。Storyboard是一个为其所包含的动画提供目标信息的容器时间线。

DoubleAnimation:对Rectangle的width或Ellipse的hegiht进行动画处理。
ColorAnimation:对SolidColorBrush或GradientStop的Color进行动画处理。
PointAnimation:对EllipseGeometry的Center位置进行的动画处理。
Object:对Fill属性进行动画处理，使其在不同的GradientBrush之间进行转换创建两个Double值之间的过度，来实现透明,宽度高度等属性的变化。用From设置起始值，To设置终止值。若要相对于起始值的结束值使用。
ByDuration:从其其实值过度为目标值所需的时间，timespan格式,默认值为1s。
AutoReverse:元素消失后是否逐渐恢复。
RepeatBehavior:动画是否无限期地重复。
FillBehavior:指定时间线结束时的行为方式，默认值为HoldEnd,动画结束后，进行动画处理的对象将保持其最终值。
缓动函数：将该动画的EasingFunction属性指定要应用于该动画的缓动函数。
BackEase:在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
BounceEase:创建弹回效果。
CircleEase:创建使用循环函数或减速的动画。
CubicEase:创建使用公式f(t)=t^3加速或减速的动画。
ElasticEase:创建表示弹簧在停止前来回震荡的动画。
ExponentialEase:创建使用指数公式加速或减速的动画。
PowerEase:创建使用公式f(t)=t^p加速或减速的动画。
QuadraticEase:创建使用公式 f(t) = t2 加速和/或减速的动画。
QuarticEase：创建使用公式 f(t) = t4 加速和/或减速的动画。
QuinticEase：创建使用公式 f(t) = t5 加速和/或减速的动画。
SineEase：创建使用正弦公式加速和/或减速的动画
EasingMode属性更改缓动函数的行为方式：EaseIn:内插遵循与缓动相关联的算术公式。EaseOut:内插遵循100%内插减去与缓动幻术相关联的公式输出。EaseInOut:内插将EaseIn用于动画的牵绊部分，将EaseOut用于动画后半部分。

二、KeyFrameAnimation

关键帧动画处理步骤：

按照对From/To/By动画使用的方法声明动画并指定其Duration。
对于每一个目标值，创建相应类型的关键帧，设置其值和KeyTime,并将其添加到动画的KeyFrames集合内。
按照对From/To/By动画使用的方法，将动画与属性相关联。

关键帧通过指定KeyTime和Value来进行定义：

Value:指定关键帧的目标值

KeyTime:指定到达关键帧的Value的时间

关键帧动画类型主要有ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、ObjectAnimationUsingKeyFrames。其中前三种支持离散、线性、样条三种内插方法，Object关键帧只支持离线内插方法。

内插方法：

线性内插:动画以段持续期间内的固定速度来播放。
离散内插:动画函数将从一个值跳到另一个没有内插的值。
样条内插:精确控制加速减速，按照三次贝塞尔曲线的弯曲点来控制速度。

三、编程方式对动画的控制：

AnimationView.xaml:

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" 
              Loaded="StackPanel_Loaded" Width="500" Height="400">
        <StackPanel.Resources>
            <Storyboard x:Name="sd1">
                <DoubleAnimation Storyboard.TargetName="anRec" Storyboard.TargetProperty="Height"
                    From="30" To="200" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever">
                    <DoubleAnimation.EasingFunction>
                        <BounceEase Bounces="2" EasingMode="EaseInOut" Bounciness="2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
            <Storyboard x:Name="sd2">
                <ColorAnimation BeginTime="00:00:02" From="Red" To="Green" Duration="0:0:4" 
                         Storyboard.TargetName="scbrush" Storyboard.TargetProperty="Color"
                                AutoReverse="True" RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.Background>
            <SolidColorBrush x:Name="scbrush" Color="AliceBlue"/>
        </StackPanel.Background>
       <!--
         在容器的资源例如StackPanel.Resources。创建动画需要创建Storyboard对象并使用
         TargetName和TargetProperty
         附加属性指定要进行动画处理的对象和属性。Storyboard是一个为其所包含的动画提供
         目标信息的容器时间线。
         DoubleAnimation:对Rectangle的width或Ellipse的hegiht进行动画处理。
         ColorAnimation:对SolidColorBrush或GradientStop的Color进行动画处理。
         PointAnimation:对EllipseGeometry的Center位置进行的动画处理。
         Object:对Fill属性进行动画处理，使其在不同的GradientBrush之间进行转换
         创建两个Double值之间的过度，来实现透明,宽度高度等属性的变化。用From设置起始值
         ，To设置终止值。若要相对于起始值的结束值使用By
         Duration:从其其实值过度为目标值所需的时间，timespan格式,默认值为1s
         AutoReverse:元素消失后是否逐渐恢复
         RepeatBehavior:动画是否无限期地重复
         FillBehavior:指定时间线结束时的行为方式，默认值为HoldEnd,动画结束后，
         进行动画处理的对象将保持其最终值。
         缓动函数：将该动画的EasingFunction属性指定要应用于该动画的缓动函数。
         BackEase:在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动
         BounceEase:创建弹回效果
         CircleEase:创建使用循环函数或减速的动画
         CubicEase:创建使用公式f(t)=t^3加速或减速的动画
         ElasticEase:创建表示弹簧在停止前来回震荡的动画
         ExponentialEase:创建使用指数公式加速或减速的动画
         PowerEase:创建使用公式f(t)=t^p加速或减速的动画
         QuadraticEase:创建使用公式 f(t) = t2 加速和/或减速的动画
         QuarticEase：创建使用公式 f(t) = t4 加速和/或减速的动画
         QuinticEase：创建使用公式 f(t) = t5 加速和/或减速的动画
         SineEase：创建使用正弦公式加速和/或减速的动画
         EasingMode属性更改缓动函数的行为方式：
         EaseIn:内插遵循与缓动相关联的算术公式
         EaseOut:内插遵循100%内插减去与缓动幻术相关联的公式输出
         EaseInOut:内插将EaseIn用于动画的牵绊部分，将EaseOut用于动画后半部分
       -->
        <ComboBox x:Name="cbx1" Width="100" Height="25" Margin="5,5,5,5" 
                  SelectionChanged="cbx1_SelectionChanged">
            <ComboBoxItem Content="Start"/>
            <ComboBoxItem Content="Pause"/>
            <ComboBoxItem Content="Stop"/>
            <ComboBoxItem Content="Resume"/>
        </ComboBox>
        <Rectangle x:Name="anRec" Width="100" Height="75" Fill="Gold" Margin="30,5,5,5" />
    </StackPanel>

AmimationView.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 AnimationView
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void cbx1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectcontent = ((System.Windows.Controls.ComboBoxItem)cbx1.
                SelectedItem).Content.ToString();
            switch (selectcontent)
            {
                case "Start":
                    sd1.Begin();
                    break;
                case "Pause":
                    sd1.Pause();
                    break;
                case "Stop":
                    sd1.Stop();
                    break;
                case "Resume":
                    sd1.Resume();
                    break;
            }
        }

        private void StackPanel_Loaded(object sender, RoutedEventArgs e)
        {
            sd2.Begin();
        }
    }
}

运行效果：

KeyFrameAnimation.xaml:

<StackPanel x:Name="sp1" HorizontalAlignment="Left" Background="Ivory" 
              VerticalAlignment="Top" Width="500" Height="350">
        <StackPanel.Resources>
            <Storyboard x:Name="sbd1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tstf1" 
                 Storyboard.TargetProperty="Y" Duration="0:0:8" FillBehavior="HoldEnd">
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                    <DiscreteDoubleKeyFrame Value="150" KeyTime="0:0:3"/>
                    <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2"/>
                    <DiscreteDoubleKeyFrame Value="200" KeyTime="0:0:5"/>
                    <SplineDoubleKeyFrame Value="500" KeyTime="0:0:4" KeySpline="0.25,0.25,0.75,1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </StackPanel.Resources>
        <Rectangle MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Fill="Green" Width="60"
                   Height="60" Margin="5,5,5,5">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="tstf1" X="0" Y="0"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </StackPanel>
    <!--
      关键帧动画处理步骤：
      1.按照对From/To/By动画使用的方法声明动画并指定其Duration
      2.对于每一个目标值，创建相应类型的关键帧，设置其值和KeyTime,并将其添加到动画的KeyFrames集合内
      3.按照对From/To/By动画使用的方法，将动画与属性相关联
      关键帧通过指定KeyTime和Value来进行定义：
      Value:指定关键帧的目标值
      KeyTime:指定到达关键帧的Value的时间
      关键帧动画类型主要有ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKe
      yFrames、ObjectAnimationUsingKeyFrames。其中前三种支持离散、线性、样条三种内插方法，Object关键帧只支持
      离线内插方法。
      内插方法：
      1.线性内插:动画以段持续期间内的固定速度来播放
      2.离散内插:动画函数将从一个值跳到另一个没有内插的值
      3.样条内插:精确控制加速减速，按照三次贝塞尔曲线的弯曲点来控制速度
    -->

KeyFrameAnimation.cs:

private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            sbd1.Begin();
        }

AnimationProgramming.xaml:

<Canvas x:Name="Canvas1" VerticalAlignment="Top" HorizontalAlignment="Left" 
            Width="500" Height="400" Background="FloralWhite">
        <TextBlock x:Name="tb1" Loaded="tb1_Loaded"></TextBlock>
    </Canvas>

AnimationProgramming.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 AnimationWithProgramming
{
    public partial class MainPage : UserControl
    {
        Ellipse ellipse;
        public MainPage()
        {
            InitializeComponent();
            CreateAnimation();
        }
        private void CreateAnimation()
        {
            ellipse = new Ellipse();
            ellipse.Height = 50;
            ellipse.Width = 50;
            ellipse.StrokeThickness = 2;
            Color color = Color.FromArgb(255, 0, 199, 200);
            SolidColorBrush scbrush = new SolidColorBrush(color);
            SolidColorBrush scbrushstroke = new SolidColorBrush(
                Color.FromArgb(255, 255, 199, 200));
            ellipse.Fill = scbrush;
            ellipse.Stroke = scbrushstroke;
            //创建圆

            Canvas1.Children.Add(ellipse);

            Duration duartion = new Duration(TimeSpan.FromSeconds(5));
            DoubleAnimation dbAnimation1 = new DoubleAnimation();
            DoubleAnimation dbAnimation2 = new DoubleAnimation();
            dbAnimation1.AutoReverse = true;
            dbAnimation2.AutoReverse = true;
            dbAnimation1.Duration = duartion;
            dbAnimation1.Duration = duartion;
            //创建动画持续时间

            Storyboard storyboard = new Storyboard();
            storyboard.Duration = duartion;
            storyboard.Children.Add(dbAnimation1);
            storyboard.Children.Add(dbAnimation2);
            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(dbAnimation1, ellipse);
            Storyboard.SetTarget(dbAnimation2, ellipse);
            //设置动画控制目标
            Storyboard.SetTargetProperty(dbAnimation1, new PropertyPath("(Canvas.Top)"));
            Storyboard.SetTargetProperty(dbAnimation2, new PropertyPath("(Canvas.Left)"));
            dbAnimation1.To = 640;
            dbAnimation2.To = 480;
            Canvas1.Resources.Add("sd", storyboard);
            //资源加载storyboard
            storyboard.Begin(); 
        }
        public void tb1_Loaded(object o, RoutedEventArgs sender)
        {
            System.Windows.Threading.DispatcherTimer diptime = new System.Windows.
                Threading.DispatcherTimer();
            diptime.Interval = new TimeSpan(0, 0, 0, 1);
            diptime.Tick += new EventHandler(Self_Tick);
            diptime.Start();
        }
        public void Self_Tick(object o, EventArgs sender)
        {
            tb1.Text = "北京时间：" + DateTime.Now.ToLongTimeString() + " 圆的坐标是" +
                ellipse.Width + "," + ellipse.Height;
        }
    }
}

运行效果：

会员力量，点亮园子希望

刷新页面返回顶部

key_sky 记录学习的点点滴滴。仅此而已

silverlight系列(AnimationView、KeyFrameAnimation)

一、AnimationView

二、KeyFrameAnimation

About