从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中该怎么样做。

新建项目,参考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);
        }
    }
}

效果如下:

 

代码下载


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

QQ:12446006

转载请保留本博客链接

时间: 2024-09-11 16:34:50

从Flash到Silverlight进阶教程-Tweener的相关文章

从Flash到Silverlight进阶教程-用代码来创建动画

从Flash到Silverlight进阶教程 用代码来创建动画 这节里将要讲述一个自定义用户控件最基本的操作,就好象Flash中的MovieClips一样,动态的将其添加到舞台上. 首先你将要看到如何用ActionScript来添加一个MC到舞台中. 让我们来看看在Flash中都做了什么. 新建flash文件 在第一帧添加两个按钮起好实例名称 导入一张图片,以中心注册为MovieClips,将链接标识符设置为"man" 新建立一层命名为"as",添加如下代码 as2

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在"认识工作区"中提到的时间抽了.这里将和学习flash的过程一样做一个最简单的动画. silverlight中的动画是以"storyboard"的形式表现出来."storyboard"你可以认为是flash中的时间轴.  flash中只有一个时间轴,而在silverlight中却可以有多个"storyboard". 在flash中是有一个帧频的概念的,例每秒12帧.每秒

Silverlight初级教程-库

Silverlight初级教程 库 flash中有库这个概念.库里可以放很多的影片剪辑"MC",一个MC可以在很多的地方使用,修改了库中的MC所有用到这个MC的地方都跟着改变.这个 在silverlight中又是以什么形式表现出来呢,怎么做一个元件在多个地方使用?在这里来简单的介绍一下silverlight中的"自定义用户控 件". 在silverlight中"自定义用户控件"就相当于flash中的影片剪辑. 好现在这里回想一下flash中怎么做

Silverlight初级教程-绘图布局

Silverlight初级教程 绘图布局 正如之前所说Blend是和flash很像的东西.在这里将介绍一下如何在Blend中绘图. 这里的Blend中"舞台"的默认布局和flash中有些不同,大家都知道在flash中物体的都是有坐标"x,y"来定位的.在blend中舞台默认是 使用了Grid来对物体进行布局,这个Grid其实很像Html中的Table.这里暂时先跳过Grid.现在要尽量的flash相似.第一步就是要先把 舞台的布局改为和flash一样的方式. 打开B

Silverlight初级教程-建立silverlight项目

Silverlight初级教程 建立silverlight项目 首先在这里说明下,我是一个flasher同时我也做Asp.net编程,在这里我会以开发flash的思路来介绍如何开发silverlight. 建立silverlight项目一般可以用两个工具建立.blend和VS 2008.这两个工具建立的项目是可以通用的.不管用那一个建立的都能用另一个完美的打开.用blend建立项目 用blend建立项目时有4个选项.第一是建立WPF程序的,第二个是建立WPF控件库的,第三个是建立silverli

ASP进阶教程Ⅸ:留言查询功能(一)

 当有一天,你的心情突然变得很坏,但是巧合的是,在你的留言簿中你的网友留了一句很让你振奋的话,于是你很快就重拾了快乐的心情.但是在不久后你又一次心情变坏,但是这次却没有上次那么幸运,因为没有人给予你鼓励,于是你自然就想再看一看上次那句令你很受振奋的话.这时你就会想:假如我的留言簿有留言查询功能就好了! 为了能达成你的心愿,于是我决定在本章教程为你解说具有留言查询功能的留言簿程序.在讲解之前,让我们还是先来学习将在源程序中用到的COMMAND对象. 首先让我们先来了解一下Command对象所提供的

Silverlight实例教程

Silverlight实例教程 - Out of Browser在线更新和Silent安装 Silverlight实例教程 - Out of Browser与Office的互操作 Silverlight实例教程 - Out of Browser与COM互操作实例 Silverlight实例教程 - Out of Browser与COM的交互基础 Silverlight实例教程 - Out of Browser音乐播放器 Silverlight实例教程 - Out of Browser配置,安装和

Flash与Silverlight多领域实测对比

COMSHARP CMS写道:自 Silverlight 1.0 发布以来,Web 开发与设计者们关于该选择 Flash 和 Silverlight 的争论便开始了,在成熟的 Flash 面前,Silverlight 面临着如何赢得市场的难题.然而 Silverlight 中包含了一些开发设计者们一直希望 Flash 能拥有的功能,诸如SEO,本文对Flash 和 Silverlight 的技术细节进行了详尽的对比. 动画功能 Flash 使用基于帧的动画模式,在逐帧动画模式中,我们为每个帧创建

使用Dojo的Ajax应用开发进阶教程,第2部分: 富含语义的HTML

相关文章:使用Dojo的Ajax应用开发进阶教程,第1部分 HTML 是开发 Web 应用的基础.目前已经有数以千亿的使用 HTML 语言编写的网页.HTML 语言的规范也不断在演进和更新.HTML 语言虽然上手比较简单,但是如何开发出组织良好.结构清晰和可维护性高的 HTML 文档,对很多Web开发人员来说,也是一个值得探讨的话题.随着 Ajax 应用的流行,一种称为"富含语义的 HTML(Semantic HTML)"的最佳实践,逐渐被广大 Web开发人员所推崇.这种实践的主要思想