[Silverlight][WPF][Flex] 我要我的对象浮出来、褪出去 - 善用事件套用对象出现与移除的动画

常常在实践系统的时候，会为了强调出 RIA中Rich的威力，会希望让对象被加到画面上或是被移除的时候能套用一段动画，来强调这件事的发生，这篇就来看看在Flex中和WPF/Silverlight里，怎么分别做到这种效果~

常常在实践系统的时候，会为了强调出 RIA中Rich的威力，会希望让对象被加到画面上或是被移除的时候能套用一段动画，来强调这件事的发生，而在Flex中的对象很亲切的提供了addedEffect和removedEffect两个属性可以供我们设定，只要针对对象的这两个属性加以指定给予某个特效，在新增/移除该对象到某个容器的时候，就会自动播放该动画，让我们看看下面的例子：

源代码如下：

Flex_OnLoadAnimation.mxml

<?xml version="1.0" encoding="utf-8"?>

	
		
	

	


		 0 )
				{
					this.tileGroup.removeElementAt( this.tileGroup.numChildren - 1 );
				}
			}

		]]>

	

	
		
		
		
			
			
		
	

就这么简单，很轻松就能套用动画(这是直接针对要被加入/移除的对象加特效的作法，还有另一种是直接针对容器加特效的作法，之后另开其他文章介绍)。

而在WPF和Silverlight要做到类似的效果，该怎么办呢?这边就跟大家分享我自己的因应之道(如果有更高明的技巧也请不吝分享给我喔!!)，利用对象的Loaded事件就可以做到加入时就拨放动画了~但是比较麻烦的是当对象要被移除前也要播动画，那怎么办呢?(绝对不是反过来利用Unloaded事件嘿~)要移除对象时播放动画，就得动个小手脚了，要反过来先播放动画，再利用动画的Completed事件来移除对象才行，请看以下的范例：

(*若无法正常浏览本WPF版范例，烦请参考[Windows7]使用IE9、FireFox与Chrome浏览WPF browser Application(.XBAP)的方式一文调整浏览器设定)

来看看WPF的Xaml和程序：

Page1.xaml

程序的部分得注意的是要避免动画的播放和停止互相干扰，所以在动画播放完毕之前将画面先设为IsEnabled = false。

Page1.xaml.cs

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Wpf_OnLoadAnimation
{
    /// 

    /// Interaction logic for Page1.xaml
    /// 
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();

        }

        private void btnAddGrid_Click( object sender , System.Windows.RoutedEventArgs e )
        {
            Grid myGrid = new Grid { Background = Brushes.Red , Width = 100 , Height = 100 , Margin = new Thickness( 2 ) };

            myGrid.Loaded += new RoutedEventHandler( MyGrid_Loaded );

            wrpPanel.Children.Add( myGrid );
        }

        void MyGrid_Loaded( object sender , RoutedEventArgs e )
        {
            Grid grid = sender as Grid;

            DoubleAnimation showAnimation = new DoubleAnimation { Duration = new Duration( TimeSpan.FromMilliseconds( 1000 ) ) , };
            showAnimation.From = 0;
            showAnimation.To = 1;
            Storyboard.SetTargetProperty( showAnimation , new PropertyPath( Grid.OpacityProperty ) );
            Storyboard strbStoryBoard = new Storyboard();
            strbStoryBoard.Children.Add( showAnimation );
            strbStoryBoard.Begin( grid );
        }

        private void btnRemoveLast_Click( object sender , RoutedEventArgs e )
        {
            if( this.wrpPanel.Children.Count > 0 )
            {
                this.IsEnabled = false;

                Grid grid = this.wrpPanel.Children.OfType().Last() as Grid;

                DoubleAnimation hideAnimation = new DoubleAnimation { Duration = new Duration( TimeSpan.FromMilliseconds( 300 ) ) , };
                hideAnimation.From = 1;
                hideAnimation.To = 0;
                Storyboard.SetTargetProperty( hideAnimation , new PropertyPath( Grid.OpacityProperty ) );
                Storyboard strbStoryBoard = new Storyboard();
                strbStoryBoard.Children.Add( hideAnimation );

                strbStoryBoard.Completed += new EventHandler( strbStoryBoard_Completed );

                strbStoryBoard.Begin( grid );

            }

        }

        void strbStoryBoard_Completed( object sender , EventArgs e )
        {
            this.wrpPanel.Children.RemoveAt( this.wrpPanel.Children.Count - 1 );

            this.IsEnabled = true;
        }
    }
}

最后一样附上这次的源代码，请自行服用：

原文:大专栏  [Silverlight][WPF][Flex] 我要我的对象浮出来、褪出去 - 善用事件套用对象出现与移除的动画