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

来源：互联网发布：erp软件行业分析编辑：程序博客网时间：2024/04/27 21:09
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
0 0