Greensock公司的TweenMax是很好的HTML5动画操作JS库。

本例是演示如何使用TweenMax来模拟跑车的机械自动化制造/自动化装配过程。

思路就是把一些汽车零部件图片按时序以渐入动效入场到Web页面指定位置，从而形成汽车整体自动组装的动画。

$(document).ready(function() {var miniBoxesHolder = $('#ruler_1_wrap');var boxesTl = new TimelineMax({repeat: 1,repeatDelay: 0,yoyo: true});for (n = 0; n < 12; n++) {miniBoxesHolder.append('<div class="ruler_box_1"> </div>');}var rulers = $('.ruler_box_1');anim: (new TimelineLite()).appendMultiple([TweenMax.staggerFromTo(rulers, .3, {css: {height: 0,top: 0,backgroundColor: '#000',borderColor: 'red',rotation: 720,autoAlpha: 0}}, {css: {height: 330,backgroundColor: 'transparent',transformOrigin: "bottom",borderColor: '#777',rotation: 0,autoAlpha: .3},ease: Back.easeOut,immediateRender: true}, .1),]).appendMultiple([TweenMax.fromTo($('#veyron_rear_break'), 1.2, {css: {opacity: 0,right: -1000,},immediateRender: true}, {css: {right: 166,opacity: 1},ease: SlowMo.ease}),TweenMax.fromTo($('#veyron_front_break'), 2.1, {css: {opacity: 0,right: -1900},immediateRender: true}, {css: {right: 678,opacity: 1,delay: 1},ease: SlowMo.ease}),TweenMax.fromTo($('#veyron_bumper'), 1, {css: {opacity: 0,right: -1100,top: -9},immediateRender: true}, {css: {right: -97,top: -9,opacity: .7},ease: SlowMo.ease}),TweenMax.fromTo($('#veyron_frame'), 2.5, {css: {opacity: 0,right: -1100,top: -5},immediateRender: true}, {css: {right: -76,top: -5,opacity: .7},ease: SlowMo.ease,delay: 1}),TweenMax.fromTo($('#veyron_siding'), 1.2, {css: {opacity: 0,right: -1200,top: -135},immediateRender: true}, {css: {right: -335,top: -135,opacity: .7},ease: SlowMo.ease}),TweenMax.fromTo($('#veyron_fender'), 1.9, {css: {opacity: 0,right: -1200,top: -158},immediateRender: true}, {css: {right: 274,top: -158,opacity: .7},ease: Back.easeIn}),TweenMax.fromTo($('#veyron_window'), 2.4, {css: {opacity: 0,right: -100,top: -341},immediateRender: true}, {css: {right: 6,top: -341,opacity: .7},ease: Back.easeOut}),TweenMax.staggerFromTo($('#ruler_horizontal_2'), 2, {css: {height: 0,left: 900,backgroundColor: '#fff',rotation: 400,autoAlpha: 0}}, {css: {height: 1,width: 891,bottom: 85,left: 5,transformOrigin: "top",backgroundColor: '#777',rotation: 1080,opacity: .2,autoAlpha: .4},ease: Back.easeOut,immediateRender: true}, .1),TweenMax.staggerFromTo($('#veyron_tire'), 2.5, {css: {opacity: 0,right: -2991,top: -301}}, {css: {right: -191,top: -301,opacity: .7},ease: SlowMo.ease,immediateRender: true}),TweenMax.staggerFromTo($('#veyron_tire_2'), 3, {css: {opacity: 0,right: -2558,top: -301}}, {css: {right: -558,top: -301,opacity: .7},ease: Back.easeOut,immediateRender: true}, .9),TweenMax.staggerFromTo($('#veyron_head_1'), 1, {css: {left: 44,top: -1579,autoAlpha: 0}}, {css: {left: 44,top: -976,autoAlpha: .9},ease: SlowMo.ease,immediateRender: true}, 2),], -2).appendMultiple([TweenMax.staggerFromTo($('#bugatti_veyron'), 4, {css: {opacity: 0,},immediateRender: true}, {css: {opacity: .9}}, 5),TweenMax.staggerFromTo($('#bugatti_v_tire'), .1, {css: {opacity: 0},immediateRender: true}, {css: {opacity: 1}}),TweenMax.staggerFromTo($('#bugatti_v_tire_2'), .1, {css: {opacity: 0},immediateRender: true}, {css: {opacity: 1}}),TweenMax.staggerTo($('#bugatti_veyron'), .1, {css: {opacity: .4,},immediateRender: true}),]).appendMultiple([TweenMax.staggerTo($('#veyron_hold_box'), 5, {css: {zIndex: "77777",opacity: 1}}),TweenMax.staggerTo($('#veyron_hold_box'), 1, {css: {opacity: 0}}),TweenMax.staggerFromTo($('#bugatti_v_tire'), 5, {css: {rotation: '0deg'}}, {css: {rotation: '70deg'},immediateRender: true}),TweenMax.staggerFromTo($('#bugatti_v_tire_2'), 5, {css: {rotation: '0deg'},immediateRender: true}, {css: {rotation: '70deg'}}),TweenMax.staggerTo($('#veyron_hold_box'), 5, {css: {left: 7}}),TweenMax.staggerTo($('#stage_2'), 5, {css: {left: 102}}),TweenMax.staggerFromTo(rulers, 3, {css: {autoAlpha: .3,rotation: '0deg'}}, {css: {autoAlpha: 0,rotation: '4000deg'},ease: Back.easeOut,immediateRender: true}, .2),])
});

在线演示地址： http://wow.techbrood.com/static/20150225/5650.html

by iefreer