HTML5 布加迪威龙跑车自动化制造过程模拟

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,right: -1900
            },{
            css: {
                right: 678,opacity: 1,delay: 1
            },TweenMax.fromTo($('#veyron_bumper'),1,right: -1100,top: -9
            },{
            css: {
                right: -97,top: -9,opacity: .7
            },TweenMax.fromTo($('#veyron_frame'),2.5,top: -5
            },{
            css: {
                right: -76,top: -5,ease: SlowMo.ease,delay: 1
        }),TweenMax.fromTo($('#veyron_siding'),right: -1200,top: -135
            },{
            css: {
                right: -335,top: -135,TweenMax.fromTo($('#veyron_fender'),1.9,top: -158
            },{
            css: {
                right: 274,top: -158,ease: Back.easeIn
        }),TweenMax.fromTo($('#veyron_window'),2.4,right: -100,top: -341
            },{
            css: {
                right: 6,top: -341,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
            },TweenMax.staggerFromTo($('#veyron_tire'),right: -2991,top: -301
            }
        },{
            css: {
                right: -191,top: -301,immediateRender: true
        }),TweenMax.staggerFromTo($('#veyron_tire_2'),3,right: -2558,{
            css: {
                right: -558,.9),TweenMax.staggerFromTo($('#veyron_head_1'),{
            css: {
                left: 44,top: -1579,top: -976,autoAlpha: .9
            },2),],-2)

    .appendMultiple([
        TweenMax.staggerFromTo($('#bugatti_veyron'),4,{
            css: {
                opacity: .9
            }
        },5),TweenMax.staggerFromTo($('#bugatti_v_tire'),.1,{
            css: {
                opacity: 0
            },{
            css: {
                opacity: 1
            }
        }),TweenMax.staggerFromTo($('#bugatti_v_tire_2'),TweenMax.staggerTo($('#bugatti_veyron'),{
            css: {
                opacity: .4,])

    .appendMultiple([
        TweenMax.staggerTo($('#veyron_hold_Box'),5,{
            css: {
                zIndex: "77777",opacity: 1
            }
        }),TweenMax.staggerTo($('#veyron_hold_Box'),{
            css: {
                opacity: 0
            }
        }),{
            css: {
                rotation: '0deg'
            }
        },{
            css: {
                rotation: '70deg'
            },{
            css: {
                rotation: '0deg'
            },{
            css: {
                rotation: '70deg'
            }
        }),{
            css: {
                left: 7
            }
        }),TweenMax.staggerTo($('#stage_2'),{
            css: {
                left: 102
            }
        }),TweenMax.staggerFromTo(rulers,{
            css: {
                autoAlpha: .3,rotation: '0deg'
            }
        },{
            css: {
                autoAlpha: 0,rotation: '4000deg'
            },.2),])
});

by iefreer