稳扎稳打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

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

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

OK
[源码下载]