从Flash到Silverlight进阶教程

Tweener

在flash中有一个Tweener类，通过这个类我们可以通过代码来创建一些动画效果，这里将要介绍一下在Silverlight中如何像在flash中运用Tweener类一样来创建动画效果。

例子中使用的Flash Tweener类为：http://code.google.com/p/tweener/

package {
        import caurina.transitions.Tweener;
        
        import flash.display.MovieClip;
        import flash.events.MouseEvent;
        
        public class Lession02a extends MovieClip
        {
            private var ol:OL;
            
            public function Lession02a()
            {
                this.ol = this.getChildByName("mol") as OL;
                this.ol.addEventListener(MouseEvent.MOUSE_OVER,onMOUSE_OVER);
                this.ol.addEventListener(MouseEvent.MOUSE_OUT,onMOUSE_OUT);
            }
            
            private function onMOUSE_OVER(e:MouseEvent):void{
                Tweener.addTween(this.ol, {scaleX:1.2, scaleY:1.2, alpha:0.2, time:0.5, transition:"easeinoutback"});
            }
            
            private function onMOUSE_OUT(e:MouseEvent):void{
                Tweener.addTween(this.ol, {scaleX:1, scaleY:1, alpha:1, time:0.5, transition:"easeinoutback"});
            }
        }
    }

package
    {
        import flash.display.MovieClip;
    
        public class OL extends MovieClip
        {
            public function OL()
            {
                super();
            }
            
        }
    }

了解flash中Tween类的朋友我就不用多说，只要用上一次便会爱上她。flash中的Tween已经发展了很长的时间，功能也非常的强大，可以用来做很多很玄的效果。这么好的东西在Silverlight中当然也会有的，其名字为：agTweener 项目地址：www.codeplex.com/agTweener/ 当然了他还刚刚开始远没有flash中的强大。

看看要实现同样的效果在Silverlight中该怎么样做。

新建项目，参考Silverlight初级教程-建立silverlight项目。

调整舞台布局和Flash一样，参考Silverlight初级教程-绘图布局。

在flash中引用了Tweener类库

import caurina.transitions.Tweener;

在Silverlight中也是一样，需要引用Tweener类库。右键点击新建立的解决方案选择Add->Existing Project 选中刚才下载agTweener项目

右键点击Silverlight项目选择Add Reference

在弹出的对话框中选择Project选项卡，选中agTweener项目

好准备工作做好了。

制作一个自定义用户控件，注意目录结构的排放。参考从Flash到Silverlight进阶教程-用代码来创建动画中的用Blend设计UI这一节。

打开Page.xaml.cs

这里说明下"LayoutRoot"为silverlight默认的根容器，这个名字一般不会去改动他。

修改page类为如下代码。

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 Lession02b.Components;
    using agTweener;
    
    namespace Lession02b
    {
        public partial class Page : UserControl
        {
            private OL ol;
    
            public Page()
            {
                InitializeComponent();
    
                Init();
            }
    
            private void Init()
            {
                ol = new OL();
                ol.SetValue(Canvas.TopProperty, (double)150);
                ol.SetValue(Canvas.LeftProperty, (double)200);
    
                LayoutRoot.Children.Add(ol);
                TransformGroup _TransformGroup = new TransformGroup();
                ScaleTransform _ScaleTransform = new ScaleTransform();
                SkewTransform _SkewTransform = new SkewTransform();
                RotateTransform _RotateTransform = new RotateTransform();
                TranslateTransform _TranslateTransform = new TranslateTransform();
                _TransformGroup.Children.Add(_ScaleTransform);
                _TransformGroup.Children.Add(_SkewTransform);
                _TransformGroup.Children.Add(_RotateTransform);
                _TransformGroup.Children.Add(_TranslateTransform);
                ol.RenderTransform = _TransformGroup;
    
                ol.MouseEnter += new MouseEventHandler(ol_MouseEnter);
                ol.MouseLeave += new MouseEventHandler(ol_MouseLeave);
            }
    
            void ol_MouseEnter(object sender, MouseEventArgs e)
            {
                TweenParameter _tween = new TweenParameter();
                _tween.Opacity = .2;
                _tween.ScaleX = 1.2;
                _tween.ScaleY = 1.2;
                _tween.time = 0.5;
                _tween.transition = TransitionType.easeInOutBack;
                Tweener.addTween(sender as OL, _tween);
            }
    
            void ol_MouseLeave(object sender, MouseEventArgs e)
            {
                TweenParameter _tween = new TweenParameter();
                _tween.Opacity = 1;
                _tween.ScaleX = 1;
                _tween.ScaleY = 1;
                _tween.time = 0.5;
                _tween.transition = TransitionType.easeInOutBack;
                Tweener.addTween(ol, _tween);
            }
        }
    }

效果如下：

代码下载

从Flash到Silverlight进阶教程-Tweener

从Flash到Silverlight进阶教程

Tweener