穩紮穩打Silverlight(37) - 3.0動畫之Easing(緩動效果)

 [索引頁]
[源碼下載]


穩紮穩打Silverlight(37) - 3.0動畫之Easing(緩動效果)


作者:webabcd


介紹
Silverlight 3.0 動畫的緩動效果:
  • Easing 可以與 Storyboard 結合實現動畫的緩動效果
  • Silverlight 3 內置 11 種緩動效果:分別爲BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase
  • 各個緩動類都繼承自 EasingFunctionBase,除了 EasingFunctionBase 提供的功能外,各個緩動類可能還會有各自的屬性(懶的寫了,查文檔吧) 
  • EasingFunctionBase 有一個用於設置緩動模式的枚舉類型屬性 EasingMode (EasingMode.EaseOut(默認值), EasingMode.EaseIn, EasingMode.EaseInOut)


在線DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html 


示例
1、Silverlight 3.0 內置的 11 種緩動效果的 Demo
Easing.xaml
<navigation:Page x:Class="Silverlight30.Animation.Easing" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable
="d"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth
="640" d:DesignHeight="480"
           Title
="Easing Page">
    
<Grid x:Name="LayoutRoot">
        
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

            
<!--用於顯示各種 Easing 的圖例列表-->
            
<StackPanel Margin="10">
                
<ListBox x:Name="lstEasing">
                    
<ListBox.ItemTemplate>
                        
<DataTemplate>
                            
<StackPanel Margin="1">
                                
<TextBlock Text="{Binding EasingName}" />
                                
<Image Source="{Binding PicAddress}" Width="300" Height="50" />
                            
</StackPanel>
                        
</DataTemplate>
                    
</ListBox.ItemTemplate>
                
</ListBox>
            
</StackPanel>

            
<StackPanel Margin="10, 200">
           
                
<!--分別用 3 種動畫來演示各類 Easing-->
                
<ComboBox x:Name="cboTransform" Margin="5">
                    
<ComboBoxItem Content="Translate" IsSelected="True" />
                    
<ComboBoxItem Content="Rotate" />
                    
<ComboBoxItem Content="Scale" />
                
</ComboBox>
                
                
<!--用各種 EasingMode 分別做演示-->
                
<ComboBox x:Name="cboEasingMode" Margin="5">
                    
<ComboBoxItem Content="EaseOut" IsSelected="True" />
                    
<ComboBoxItem Content="EaseIn" />
                    
<ComboBoxItem Content="EaseInOut" />
                
</ComboBox>

                
<Button x:Name="btnShow" Content="演示" Click="btnShow_Click" Margin="5" />

                
<!--用於做動畫演示的矩形-->
                
<Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
                    
<Rectangle.RenderTransform>
                        
<TransformGroup>
                            
<TranslateTransform x:Name="tt" X="0" Y="0" />
                            
<RotateTransform x:Name="rt" Angle="0" />
                            
<ScaleTransform x:Name="st" ScaleX="1" ScaleY="1" />
                        
</TransformGroup>
                    
</Rectangle.RenderTransform>
                
</Rectangle>

            
</StackPanel>
        
</StackPanel>
    
</Grid>
</navigation:Page>

Easing.xaml.cs
/*
 * Easing - 與 Storyboard 結合實現動畫的緩動效果
 * Silverlight 3 內置 11 種緩動效果:分別爲BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase
 * 各個緩動類都繼承自 EasingFunctionBase,除了 EasingFunctionBase 提供的功能外,各個緩動類可能還會有各自的屬性(懶的寫了,查文檔吧)
 * EasingFunctionBase 有一個用於設置緩動模式的枚舉類型屬性 EasingMode (EasingMode.EaseOut(默認值), EasingMode.EaseIn, EasingMode.EaseInOut)
 
*/


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;
using System.Windows.Navigation;

using Silverlight30.Model;
using System.Xml.Linq;

namespace Silverlight30.Animation
{
    
public partial class Easing : Page
    
{
        
public Easing()
        
{
            InitializeComponent();

            
this.Loaded += new RoutedEventHandler(Easing_Loaded);
        }


        
// 綁定各種 Easing 的圖例列表
        void Easing_Loaded(object sender, RoutedEventArgs e)
        
{
            XElement root 
= XElement.Load("Animation/Easing.xml");
            var easings 
= from n in root.Elements("easing")
                          select 
new EasingModel
                          
{
                              EasingName 
= (string)n.Attribute("EasingName"),
                              Description 
= (string)n.Attribute("Description"),
                              PicAddress 
= (string)n.Attribute("PicAddress")
                          }
;

            lstEasing.ItemsSource 
= easings;
            lstEasing.SelectedIndex 
= 0;
        }


        
private Storyboard _prevStoryboard;

        
private void btnShow_Click(object sender, RoutedEventArgs e)
        
{
            
if (_prevStoryboard != null)
                _prevStoryboard.Stop();

            
// 實例化用戶所選擇的 Easing
            Type type = typeof(EasingFunctionBase).Assembly.GetType("System.Windows.Media.Animation." + ((EasingModel)lstEasing.SelectedItem).EasingName, false);
            EasingFunctionBase easing 
= Activator.CreateInstance(type) as EasingFunctionBase;

            
// 根據用戶的選擇,設置 Easing 的 EasingMode 屬性
            easing.EasingMode = (EasingMode)Enum.Parse(typeof(EasingMode), ((ComboBoxItem)cboEasingMode.SelectedItem).Content.ToString(), true);

            Storyboard sb 
= new Storyboard();
            _prevStoryboard 
= sb;

            var transformType 
= ((ComboBoxItem)cboTransform.SelectedItem).Content.ToString();
            
switch (transformType)
            
{
                
// 位移動畫結合 Easing 的演示
                case "Translate":
                    DoubleAnimation daTranslateY 
= new DoubleAnimation();
                    daTranslateY.From 
= 0 ;
                    daTranslateY.To 
= 200;
                    daTranslateY.Duration 
= TimeSpan.FromSeconds(3);

                    daTranslateY.EasingFunction 
= easing;

                    Storyboard.SetTargetProperty(daTranslateY, 
new PropertyPath("Y"));
                    Storyboard.SetTarget(daTranslateY, tt);

                    sb.Children.Add(daTranslateY);

                    
break;
                
// 縮放動畫結合 Easing 的演示
                case "Scale":
                    DoubleAnimation daScaleX 
= new DoubleAnimation();
                    daScaleX.From 
= 1;
                    daScaleX.To 
= 2;
                    daScaleX.Duration 
= TimeSpan.FromSeconds(3);

                    DoubleAnimation daScaleY 
= new DoubleAnimation();
                    daScaleY.From 
= 1;
                    daScaleY.To 
= 2;
                    daScaleY.Duration 
= TimeSpan.FromSeconds(3);

                    daScaleX.EasingFunction 
= easing;
                    daScaleY.EasingFunction 
= easing;

                    Storyboard.SetTargetProperty(daScaleX, 
new PropertyPath("ScaleX"));
                    Storyboard.SetTarget(daScaleX, st);
                    Storyboard.SetTargetProperty(daScaleY, 
new PropertyPath("ScaleY"));
                    Storyboard.SetTarget(daScaleY, st);

                    sb.Children.Add(daScaleX);
                    sb.Children.Add(daScaleY);

                    
break;
                
// 旋轉動畫結合 Easing 的演示
                case "Rotate":
                    DoubleAnimation daAngle 
= new DoubleAnimation();
                    daAngle.To 
= 0;
                    daAngle.To 
= 360;
                    daAngle.Duration 
= TimeSpan.FromSeconds(3);

                    daAngle.EasingFunction 
= easing;

                    Storyboard.SetTargetProperty(daAngle, 
new PropertyPath("Angle"));
                    Storyboard.SetTarget(daAngle, rt);

                    sb.Children.Add(daAngle);

                    
break;
            }

   
            sb.Begin();
        }

    }

}



2、自定義緩動效果的 Demo
MyCustomEasing.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight30.Animation
{
    
/// <summary>
    
/// 自定義緩動效果
    
/// </summary>

    public class MyCustomEasing : EasingFunctionBase
    
{
        
public MyCustomEasing()
            : 
base()
        
{
 
        }


        
/// <summary>
        
/// 實現 EaseIn 模式下的邏輯
        
/// EaseOut 和 EaseInOut 會自動實現
        
/// </summary>
        
/// <param name="normalizedTime">標準時間位(0 - 1之間)。即 動畫運行到此的時間 佔 動畫運行所需的全部時間 的百分比</param>
        
/// <returns></returns>

        protected override double EaseInCore(double normalizedTime)
        
{
            
// QuinticEase 效果的實現算法

            
// 假定動畫運行的總共時間爲 1 秒
            
// 那麼當 normalizedTime 爲 0.1 時,動畫運行到的位置爲無該緩動效果時,0.00001秒後的位置。以此類推
            return Math.Pow(normalizedTime, 5);
        }

    }

}


CustomEasing.xaml
<navigation:Page x:Class="Silverlight30.Animation.CustomEasing" 
           xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable
="d"
           xmlns:custom
="clr-namespace:Silverlight30.Animation"
           xmlns:navigation
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth
="640" d:DesignHeight="480"
           Title
="CustomEasing Page">
    
<Grid x:Name="LayoutRoot">
        
<StackPanel>
        
            
<StackPanel.Resources>
                
<Storyboard x:Name="ani">
                    
<DoubleAnimation 
                        
Storyboard.TargetName="tt"
                        Storyboard.TargetProperty
="Y"
                        From
="0" 
                        To
="200" 
                        Duration
="00:00:03"
                    
>
                        
<DoubleAnimation.EasingFunction>
                            
<!--使用自定義的緩動效果-->
                            
<custom:MyCustomEasing EasingMode="EaseOut" />
                        
</DoubleAnimation.EasingFunction>
                    
</DoubleAnimation>
                
</Storyboard>
            
</StackPanel.Resources>

            
<Button x:Name="btnShow" Content="演示" Margin="5" Click="btnShow_Click" />

            
<Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
                
<Rectangle.RenderTransform>
                    
<TransformGroup>
                        
<TranslateTransform x:Name="tt" X="0" Y="0" />
                    
</TransformGroup>
                
</Rectangle.RenderTransform>
            
</Rectangle>
            
        
</StackPanel>
    
</Grid>
</navigation:Page>

CustomEasing.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;
using System.Windows.Navigation;

namespace Silverlight30.Animation
{
    
public partial class CustomEasing : Page
    
{
        
public CustomEasing()
        
{
            InitializeComponent();
        }


        
private void btnShow_Click(object sender, RoutedEventArgs e)
        
{
            ani.Begin();
        }

    }

}



OK
[源碼下載]
發佈了6 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章