Greensock介绍:使用代码实现动画对于初学flash的人来说有点望而生畏,但是使用Greensock平台,可以使这编程一个简单而有趣的事情。Greensock包含TweenNano、TweenLite、TweenMax三个类,其中TweenLite作为该平台的基石,TweenNano是TweenLite的超级轻量级,其去掉了很多功能,但对于那些对swf体积要求苛刻的广告设计人员,TweenNano确是一个很好的选择;TweenMax为TweenLite的增强版,拥有更强的功能(如默认激活大部分插件),因而体积比较大……
官方英文教程及类库下载:http://www.greensock.com/get-started-tweening/
TweenNano
特点:轻量级,压缩只有1.6K,可以实现TweenLite能够实现的功能,除以下几点:
1、不能激活插件和使用插件
2、不能实现复杂的序列sequencing(可以使用”delay”专有属性实现简单的序列)和TweenNano 实例不能够嵌入 TimelineLite 或 TimelineMax实例以实现团体groups管理。
3、重写模式更少,你可以覆盖或不覆盖同一对象上的其它动画效果,但是不能使用OverwriteManager来扩展动画的其他性能,也不能够AUTO, CONCURRENT, PREEXISTING, and ALL_ONSTART模式
4、相对TweenLite, TweenNano没有pause(), play(), resume(), restart(), reverse(), invalidate(), onStart, defaultEase, easeParams, currentTime, startTime, totalTime, paused, reversed, and totalDuration等方法和属性。
注意:
1. TweenNano(target:Object, duration:Number, vars:Object);第1个参数为你应用动画的对象,第2个参数为动画延续的时间,第3个参数包含你要应用动画的所有属性对象且该对象内属性顺序可以错乱;
2.如以字符串形式传入值,将使用相对值;
3.终止所有的动画,使用TweenNano.killTweensOf(mc);
4. TweenNano.from()使对象从参数设定的状况运动到当前状况。
专有属性:
delay : Number 
useFrames : false 
ease : Function 
onUpdate : Function 
onUpdateParams : Array 
onComplete : Function 
onCompleteParams : Array 
immediateRender : true 
overwrite : true 
公共属性:
duration : Number
target : Object
useFrames : Boolean
vars : Object
公共方法:
TweenNano(target:Object, duration:Number, vars:Object)
complete(skipRender:Boolean = false):void
delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array = null, useFrames:Boolean = false):TweenNano  [static] 
from(target:Object, duration:Number, vars:Object):TweenNano  [static] 
kill():void
killTweensOf(target:Object, complete:Boolean = false):void  [static] 
renderTime(time:Number):void
to(target:Object, duration:Number, vars:Object):TweenNano  [static] 
例子:
import com.greensock.*; 
import com.greensock.easing.*;   
TweenNano.to(mc,2, {x:400, overwrite:false,delay:2});//默认情况下,建立一个新的动画将覆盖该对象其它动画,将overwrite设置为false将阻止这种覆盖行为。
TweenNano.to(mc, 5, {alpha:0.5, x:120, overwrite:false, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, mc]});//透明度变为0.5,位置为x轴120,效果为Back.easeOut,不覆盖前面的动画,且在动画结束后调用onFinishTween函数
function onFinishTween(param1:Number, param2:MovieClip):void {
trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);
}

使用范例:
TweenNano、TweenLite、TweenMax使用相同的语法格式,而且as3版本和as2版本形式也一致,只是在as2中将x,y,alpha(0-1),rotation修改为_x,_y,_alpha(0-100),_rotation。
1、导入类
import com.greensock.*;//也可以单个导入,flash会自动嵌入用到的类
import com.greensock.easing.*;
2、使用TweenLite完成制作的简单的缓动
TweenLite.to(mc, 1.5, {x:100});//经过1.5秒mc从当前移动到x轴100位置
3、可以对物体任意多个属性同时运用缓动效果,如对mc的多个属性运用动画
TweenLite.to(mc, 1.5, {x:100, y:200, alpha:0.5});//经过1.5秒mc从当前移动到x轴100,y轴200位置,透明度变为0.5
4、As2与as3的语法很相识,大部分只需要使用as2中属性的书写方式
TweenLite.to(mc, 1.5, {_x:100, _y:200, _alpha:50});//as2语法,当然as2中需导入as2的greensock类库
5、可以使用from()方法使mc从参数设定的状况转变到当前的状况:
TweenLite.from(mc, 1.5, {y:0, alpha:0});//1.5秒内将mc从y轴为0,透明度为0转变到当前的状态
      如果你习惯使用面向对象编程模式,可以使用存储引用的方式建立对象,然后方便地控制,灵活运用pause(), resume(), reverse(), restart()方法。
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:200, alpha:0.5});//和使用TweenLite.to()等效
专有属性:即为TweenNano、TweenLite或TweenLite认可的保留关键字,有着特定的用途,如onComplete, ease, overwrite, paused, useFrames, immediateRender, onStart, onUpdate, onCompleteParams,
ease: 缓动方程式,可以使用com.greensock.easing包、flash自身的或Robert Penner的缓动类
overwrite :设定缓动是否覆盖
useFrames :设定是基于帧还是基于seconds,默认为false
onComplete :设定缓动结束后调用的函数
immediateRender:使用form()方法时是否在delay之前就设置到初始位置
TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction}); 
function myFunction():void { 
    trace("tween finished"); 
}
使用插件:可以将插件看作为TweenLite能够动态添加具有额外功能的特别属性,TweenLite默认情况下没有激活插件(TweenMax默认为激活),当激活插件后,对TweenLite、TweenMax都产生作用。
使用插件首先需要导入插件,另外需要激活,将需要激活的插件传递给activate方法的参数数据就行了。
import com.greensock.plugins.*;
import com.greensock.*;
import com.greensock.easing.*;
TweenPlugin.activate([GlowFilterPlugin,AutoAlphaPlugin]);
TweenLite.to(mc, 0.5, {x:277, y:311,autoAlpha:0.9, glowFilter:{color:0x91e600, alpha:1, blurX:30, blurY:30}, ease:Cubic.easeInOut});
覆盖其它缓动:默认情况下,TweenLite将覆盖之前所有的缓动,要使TweenLite使用AUTO模式,只要加上下面的一行代码:
OverwriteManager.init(2)
    注:上面的代码具有全局影响,如果只需要对单独的缓动使用AUTO模式,可使用下面的代码
TweenLite.to(mc, 1, {x:100, overwrite:2}); 
//TweenLite.to(mc, 1, {x:100, overwrite:true});
控制缓动:当你建立缓动后,可以使用pause() resume(), reverse(), play(), restart(), invalidate(), or kill()开对它进行操作。
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100}); 
myTween.pause(); //暂停
myTween.resume(); //恢复
myTween.reverse(); //反转
myTween.play(); //开始
myTween.restart(); //重新开始
myTween.invalidate(); //清除初始值
myTween.kill(); //取消
TweenLite.killTweensOf(mc);//取消所有

代码解析:
import com.greensock.*;
import com.greensock.easing.*;
TweenMax.to(mc, 3, {alpha:0.5});//mc经过3秒透明度变为0.5
TweenMax.to(myButton, 2, {scaleX:1.5, scaleY:1.5, ease:Elastic.easeOut});
//mybutton经过两秒扩张为原来的1.5倍,使用Elastic.easeOut动画效果
TweenMax.from(mc3, 1, {y:"-100", alpha:0}); //mc3从相对该位置-100经过1秒运动到该位置,且透明度变为0
TweenMax.fromTo(mc4, 1, {x:100}, {x:300, tint:0xFF0000}); //mc4从x为100移动到x为300的地方,且颜色变换为0xFF0000
TweenMax.to(mc, 5, {delay:3, x:300, ease:Back.easeOut, onComplete:onFinishTween, onCompleteParams:[5, mc]}); 
//延迟3秒后mc在5秒内移动到x为300的位置,动画效果为Back.easeOut,并在完成后调用onFinishTween函数
function onFinishTween(param1:Number, param2:MovieClip):void {
 trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);
}
TweenMax.delayedCall(2, myFunction, ["myParam"]); //延迟2秒后调用myFunction函数
//tween every MovieClip in the "letters" Array up 100 pixels (changing their "y" property to a relative value of "-100") over 2 seconds while fading out, and stagger the start time of each tween by 0.1 seconds. There could literally be hundreds of MovieClips in the "letters" Array and this one line of code would tween them all! 
TweenMax.allTo(letters, 2, {y:"-100", alpha:0}, 0.1);
//use the object-oriented syntax to create a TweenMax instance and store it so we can reverse, restart, or pause it later. Make it repeat twice with a 1-second delay between each repeat cycle. 
var myTween:TweenMax = new TweenMax(mc2, 3, {y:200, repeat:2, repeatDelay:1, onComplete:myFunction});
//some time later (maybe in by a ROLL_OUT event handler for a button), reverse the tween, causing it to go backwards to its beginning from wherever it is now. 
myTween.reverse();
//pause the tween 
myTween.pause();
//restart the tween 
myTween.restart();
//make the tween jump to its halfway point 
myTween.currentProgress = 0.5;

转载于:https://www.cnblogs.com/1000pen/archive/2012/10/27/2742288.html

Greensock平台相关推荐

  1. ios浏览器滚动交互太差_使用ScrollMagic.js构建交互式滚动网站

    ios浏览器滚动交互太差 ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub c ...

  2. 译~GreenSock动画平台(GSAP)的JavaScript版本入门

    快速连结: 引言 载入文件 基本的补间动画 特殊屬性 缓动 插件 补间动画的CSS属性 控制补间动画 用T​​imelineLite排序和分组补间 学习TweenMax和TimelineMax 覆盖其 ...

  3. TweenMax的GSAP(GreenSock动画平台)GSAP,专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

  4. greensock下载_使用GreenSock绘制Alligator.io SVG徽标

    greensock下载 To get the most out of this article it is important that you have a solid understanding ...

  5. GreenSock面向初学者:Web动画教程(第1部分)

    我在本文中的目的是向您全面介绍GreenSock ,也称为GSAP(GreenSock动画平台),这是一种用于现代Web的高性能,专业级HTML5动画引擎. 这是" 超越CSS:动态DOM动 ...

  6. greensock下载_使用GreenSock的DrawSVG创建动画SVG加载器

    greensock下载 今天的教程是一个使您印象深刻的东西,您编写了很少的代码即可实现如此令人愉快的动画. GreenSock的一个非常聪明的小组的DrawSVG允许您逐步显示(或隐藏)SVG的笔触. ...

  7. GreenSock引人注目的动画

    引人注目的网站动画可以真正吸引眼球,并有助于增加转化次数. 不幸的是,动画绝不容易创建. 网站开发人员花了很多时间来设计,审阅和修改其动画,然后才能将其投放世界. 尽管许多开发人员使用Adobe Fl ...

  8. greensock下载_GreenSock引人注目的动画

    greensock下载 引人注目的网站动画可以真正吸引眼球,并有助于增加转化次数. 不幸的是,动画绝不容易创建. 网站开发人员花了很多时间来设计,审查和修改其动画,然后才能将其投放世界. 尽管许多开发 ...

  9. 面向初学者的GreenSock(第2部分):GSAP的时间表

    GreenSock初学者第二部分的目的是向您介绍GreenSock的TimelineMax . 您将学习: 为什么需要时间表 如何在时间轴中包括多个补间 如何将多个时间轴打包为函数并将其嵌套在主时间轴 ...

  10. 【C/S语言】.net平台

    .net的学习 好像又复习了一遍VB和C#,没有具体看着视频写代码,只是通过看<VB.NET入门经典>粗学了一遍关于.net的知识! 基础 .net平台的出现: 当时的操作系统有多种如:w ...

最新文章

  1. Java学习总结:50(扫描流:Scanner)
  2. Java - 网络编程(NetWork)
  3. java输出流flush操作
  4. 在html中引入jQuery包的方法
  5. 微软2013暑期实习笔试题目第5题分析
  6. 最详细的使用 soapui 消费 SAP Cloud for Customer Web service 的教程
  7. 美国自称最安全密码:100万年才能破解,却被一位中国宝妈拿下
  8. 数据平台-第一章-数据质量提升
  9. idea 设置代码的颜色
  10. [FPGA基础应用]基于CPLD+ARM架构模拟PC104总线时序
  11. 2019保定中考计算机时间安排,2019年保定中考考试时间安排,保定中考考试科目时间安排表...
  12. 锚具ovm是什么意思_OVM锚具(柳州欧维姆)
  13. 哈夫曼树详解及其应用(哈夫曼编码)
  14. 解决linux“嘟嘟”的报警声
  15. Win11玩不了红警怎么办?Win11玩不了红警解决方法分享
  16. DBeaver添加SQLserver数据库提示需要下载驱动
  17. 道翰天琼认知智能为您解密:Rust语言杀疯了!前有谷歌高薪争夺 Rust 人才,Facebook再官宣加入Rust基金会
  18. Oracle问题:如何远程连接Oracle数据库
  19. 炒股软件周期分析怎么调,股票周期设置怎么设置
  20. LeetCode·每日一题·757.设置交集大小至少为2·贪心

热门文章

  1. 中国互联网变天,小米上市后将彻底冲破 BAT 格局
  2. 计算机显示器出现黑屏分析
  3. 51单片机循迹小车工作原理与程序设计思路
  4. 从神话诗歌到奇幻科学的人类探索史·《月亮》·总篇(有配图)
  5. python车辆型号识别_基于Tensorflow的车辆检测和车型识别
  6. [转载][路由器] k2p支持ipv6相关设置
  7. log4j-XML文件配置
  8. python程序设计与实验_用于创建实验的Python应用程序和库
  9. STC-ISP烧录软件
  10. 汉字计算机编码是谁发明的,神奇的汉字编码,了解一下