从“恋恋三季”http://blog.5d.cn/user36/ytxwz82777/200809/498615.html 博客里看到的一个设计,非常喜欢,试着用程序来实现了一下,效果如下:
缓动效果利用的是 TweenLite 来实现的, TweenLite 在缓动结束时,可以指定继续执行的函数,因此,一环套一环的执行下去,就形成这个往复运动的效果。
代码如下:
import gs.TweenLite;
import gs.easing.*;
var ang = 30;
left_mc.rotation = ang;
function leftDown() {
TweenLite.to(left_mc, .25, {rotation:left_mc.rotation - ang, ease:Quint.easeIn,onComplete: rightUp});
}
function rightUp() {
TweenLite.to(right_mc, .25, {rotation:right_mc.rotation - ang, ease:Quint.easeOut,onComplete: rightDown});
}
function rightDown() {
TweenLite.to(right_mc, .25, {rotation:right_mc.rotation + ang, ease:Quint.easeIn,onComplete: leftUp});
}
function leftUp() {
TweenLite.to(left_mc, .25, {rotation:left_mc.rotation + ang, ease:Quint.easeOut,onComplete: leftDown});
}
leftDown();
场景中的关键元件只有两个:左侧的和右侧的元件,注册点设在元件的最上方,旋转由 rotation 来实现,easeIn 通常表示加速的进入,easeOut 表示减速的退出,开始时也搞不大清,反复试上几次,就能找到逼真的效果。
感谢“恋恋三季”的设计,希望这个“仿冒”不会带来她的反感。
相关文章:
TweenFilterLite 参数说明 中文翻译
http://blog.5d.cn/user12/dzxz/200809/500545.html
TweenMax 参数说明 中文翻译
http://blog.5d.cn/user12/dzxz/200809/500547.html
TweenLite 参数说明 中文翻译
http://blog.5d.cn/user12/dzxz/200808/497831.html
TweenLite 的一个应用
http://blog.5d.cn/user12/dzxz/200808/497862.html
一个Flash 网页导航效果
http://blog.5d.cn/user12/dzxz/200811/506117.html