生肖抽奖动画示例-TimelineMax/staggerTo
作者:admin 日期:2015-01-30谁能写出更短代码?
本次为豪爵做的一个项目中用到的,第一轮,用setinterval,写了近百行代码,代码多了搞得我逻辑混乱,循环快了的话,还有BUG。
接下来优化,用了TimelineMax+循环,将对象一个个压入数组,再用时间线展示,逻辑清楚了,代码还是不够精简。
最后,想到staggerTo这个用法,居然成功!滚动部分的核心代码,只有8句.....如果去掉2句JQ的变量定义,就只有6句了,真是巧夺天工。
Javascript代码
- $list=$(".sx li"); //定义对象序列
- var tw=TweenMax.staggerTo( $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);
- tl.add(tw); //所有对象循环第1轮动画
- var tw=TweenMax.staggerTo( $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);
- tl.add(tw); //所有对象循环第2轮动画
- // 左侧的对象动画
- $left_objs=$(".sx li:lt("+ (bingo+1) +")" );
- var tw=TweenMax.staggerTo( $left_objs, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);
- tl.add(tw);
GSAP库对这种时间线控制很巧妙。它用TweenMax.staggerTo做为子时间线,再用TimelineMax(我代码中tl就是一个TimelineMax对象)做为“总导演”,来组合所有的时间线。
至于什么repeat、yoyo回环、完成后带参数发送事件(onComplete/onCompleteParams),更是应有之技巧,不再多言。
评论: 1 | 引用: 0 | 查看次数: 20020
回复扫地机器人[2016-05-18 02:53 PM | | | | 取消审核]
扫地机器人
发表评论