从Flash到Silverlight进阶教程-Tweener

从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中该怎么样做。
调整舞台布局和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);
        }
    }
}
效果如下：

 

代码下载


作者：nasa
出处：nasa.cnblogs.com
联系:nasa_wz@hotmail.com

QQ:12446006

转载请保留本博客链接

posted @ 2008-09-11 03:33 nasa 阅读(2132) 评论(11)  编辑 收藏 网摘 所属分类: Silverlight

  回复  引用    
#1楼2008-09-11 08:07 | KTs[未注册用户]
比较以下两者者的代码量就知道两者的差距了
  回复  引用  查看    
#2楼2008-09-11 08:20 | Q.Lee.lulu      
怎么我觉得sl的要流畅点 ？？
  回复  引用  查看    
#3楼2008-09-11 08:27 | xoyozo      
明显SL的效果好，（没仔细读代码）
  回复  引用  查看    
#4楼2008-09-11 09:02 | 真见      
Silverlight2 beta1???
  回复  引用  查看    
#5楼2008-09-11 10:00 | 有容乃大      
标题很奇怪，flash和sl没有关系吧。

-----------------------------------------------
发布.net项目开发工具(V3.0 )：
http://www.cnblogs.com/mrhgw/archive/2008/08/06/1261664.html" target="_new">http://www.cnblogs.com/mrhgw/archive/2008/08/06/1261664.html
http://www.mrhgw.cn" target="_new">http://www.mrhgw.cn
  回复  引用  查看    
#6楼[楼主]2008-09-11 10:09 | nasa      
@有容乃大
Flash中的Tweener是一个做缓动动画的类，这个类在做flash编程中是经常使用的。
  回复  引用  查看    
#7楼[楼主]2008-09-11 10:12 | nasa      
@真见
beta2 我写错了。
  回复  引用  查看    
#8楼2008-09-11 10:13 | 痴情客      
标题很奇怪，flash和sl没有关系吧。

  回复  引用  查看    
#9楼[楼主]2008-09-11 10:29 | nasa      
@Q.Lee.lulu
@xoyozo
flash中图片的输出质量是可以设置的，而在silverlight没这个选项，我在这里都用的是默认的。如果将flash中图片的输出质量调整高些就好多了。
  回复  引用    
#10楼2008-09-13 23:54 | 新点心[未注册用户]
to Q.Lee.lulu
to xoyozo

这个.....

明显作者偏袒SilverLight~

1、SilverLight默认是有位图平滑的，Flash默认是关闭的

2、Flash用的是默认12帧/秒，SilverLight那个目测有30帧/秒

  回复  引用  查看    
#11楼2008-10-02 10:28 | Doho      
楼主对AIR 深有研究呀，又Flash 又SL 的。
发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1288782




相关文章:

相关链接: