51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
JS代码
当前位置:首页>实用代码>JS代码>

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

时间:2017-08-17 17:16点击:
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

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开