生肖抽奖动画示例-TimelineMax/staggerTo

 
谁能写出更短代码?
 
本次为豪爵做的一个项目中用到的,第一轮,用setinterval,写了近百行代码,代码多了搞得我逻辑混乱,循环快了的话,还有BUG。
 
接下来优化,用了TimelineMax+循环,将对象一个个压入数组,再用时间线展示,逻辑清楚了,代码还是不够精简。
 
最后,想到staggerTo这个用法,居然成功!滚动部分的核心代码,只有8句.....如果去掉2句JQ的变量定义,就只有6句了,真是巧夺天工。
 
Javascript代码
  1. $list=$(".sx li");      //定义对象序列  
  2.     var tw=TweenMax.staggerTo(  $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  3.     tl.add(tw);     //所有对象循环第1轮动画  
  4.   
  5.     var tw=TweenMax.staggerTo(  $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  6.     tl.add(tw);     //所有对象循环第2轮动画  
  7.   
  8.     // 左侧的对象动画  
  9.     $left_objs=$(".sx li:lt("+ (bingo+1) +")" );  
  10.     var tw=TweenMax.staggerTo(  $left_objs, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  11.     tl.add(tw);  
 

GSAP库对这种时间线控制很巧妙。它用TweenMax.staggerTo做为子时间线,再用TimelineMax(我代码中tl就是一个TimelineMax对象)做为“总导演”,来组合所有的时间线。
 
至于什么repeat、yoyo回环、完成后带参数发送事件(onComplete/onCompleteParams),更是应有之技巧,不再多言。
 
 

 



[本日志由 admin 于 2015-01-30 01:55 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 1 | 引用: 0 | 查看次数: 19974
扫地机器人
回复回复扫地机器人[2016-05-18 02:53 PM | | | del | 取消审核]
扫地机器人
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭