动画引擎平台 GreenSock Animation Platform

免费
JavaScript ActionScript
跨平台
2012-05-16
叛道

Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation Platform,最棒的是包括JS版本!

 

 

 //JS版本

 <script type="text/javascript" src="js/TweenMax.min.js"></script>

 var photo = document.getElementById("photo"); //or use jQuery's $("#photo")

 TweenLite.to(photo, 1.5, {width:100});

 

 //fade out all of the elements with the class "myClass" 

 TweenLite.to( $(".myClass"), 1, {css:{opacity:0}});   

 

 //tween the width of the element with id "myElement" to 500px 

 TweenLite.to( $("#myElement"), 1, {css:{width:"500px"}, ease:Elastic.easeOut});   

 

 //tween the "marginTop" of all objects of the class "myClass" in a staggered fashion so that they appear to fall into place from 100px up 

 var tl = new TimelineLite(); 

 tl.staggerFrom( $(".myClass"), 1, {css:{marginTop:"-=100px", opacity:0}}, 0.1);   

 //or use jQuery's each() method to loop through the results and stagger a fade out 

 $(".myClass").each( function(index, element) {     

     TweenLite.to( element, 1, {css:{autoAlpha:0}, delay:index * 0.2}); 

 });   

 //add a click handler that uses $(this) to refer to the menu element that was clicked and tween its height to 100px 

 $("#menu").click(function(){ 

     TweenLite.to( $(this), 0.7, { css:{height:"100px"}, ease:Power2.easeInOut } );

 });

 

 //AS3.0版本:

 //notice the target is an array 

 TweenLite.to([mc1, mc2, mc3], 1, {alpha:0});   

 var tl:TimelineLite = new TimelineLite(); //previously only appendMultiple() could handle arrays. Now append() and insert() can too. 

 tl.append( [tween1, tween2, tween3] ); 

 tl.insert( [tween1, tween2, tween3] );   //kill all tweens of mc1, mc2, and/or mc3 

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

GreenSock推出了新一代动画引擎平台GreenSock Animatio...

Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation Platform,最棒的是包括JS版本!速速围观:http://t.cn/zOncGme , 入门教程http://t.cn...

2012/05/16 09:06
1K
0
八个常用的AS3开源类库

GreenSock Tween Platform GreenSock Tween是我最常用的一个功能强大的Tween类库,详细可以见我之前的介绍。但是要注意这个类库对商业项目并不是免费使用的,可以替代的选择有很多:GTween,...

2016/03/09 12:21
17
1
[Develop Game] AS3 Click the Balloons

游戏开发之As 打气球

2014/03/24 12:33
59
0
从0到1学习Vue.js,包含例子及实战项目(三)

在之前两篇文章中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始了解相应的知识点,接下来我们会详细分析下如何完...

09/22 16:18
12
0
Vue.js的复用组件开发流程

本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是...

11/29 11:03
6
0
一些前端开发的资源

Frontend Development Guides Hack Design Designer School TheExpressiveWeb Talks To Help You Become A Better Front-End Engineer In 2013 Web Development Teaching Materials Learn HT...

2013/11/27 08:54
838
2
JavaScript资源大全中文版(Awesome最新版)

JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器...

2016/10/08 14:56
875
7

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部