ANIMATION经典小车动画

适用于多个活动场景

1.HTML

<body>
    <div class="old-driver">
        <div class="box-false">
            <div class="box">
                <img class="car" src="car.png">
                <img class="gas" src="gas.png">
            </div>
        </div>
    </div>
</body>

2.CSS

<style type="text/css" media="screen">
        .old-driver {
            width: 100%;
            height: 350px;
            position: relative;
            overflow: hidden;
        }

        @keyframes an-shake {
            0%, 100% {
                transform: translate(1px, 0px) rotate(0deg)
            }
            20% {
                transform: translate(-2px, -2px) rotate(0.2deg)
            }
            40% {
                transform: translate(-2px, 1px) rotate(-0.1deg)
            }
            60% {
                transform: translate(-1px, 2px) rotate(-0.2deg)
            }
            80% {
                transform: translate(0px, 2px) rotate(0.1deg)
            }
        }

        .box-false {
            position: absolute;
            bottom: 50px;
            right: -300px;
            width: 300px;
            height: 200px;
        }

        .an-shake {
            animation: an-shake .1s infinite ease-in-out;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .box img.car {
            position: absolute;
            width: 375px;
            left: 0;
            bottom: 0;
        }

        @keyframes an-gas {
            0% {
                transform: translate(-25px, 15px) scale(0)
            }
            100% {
                transform: translate(5px, 0px) scale(.8)
            }
        }

        .box img.gas {
            position: absolute;
            width: 80px;
            right: -65px;
            bottom: 4px;
        }

        .box img.an-gas {
            animation: an-gas .2s infinite ease-in-out;
        }

        @keyframes an-brake {
            10%, 60% {
                transform: skewX(15deg);
            }
            0%, 100% {
                transform: skewX(0deg);
            }
        }

        .an-brake {
            transform-origin: 50% 100%;
            animation: an-brake .5s ease-in-out;
        }
        
    </style>

3.Javascript

<script src="jquery.js" charset="utf-8"></script>
    <script type="text/javascript">

        var Car = function (car, direction, cls) {

            this.target = car;
            this.direction = direction || 'right';

            cls = cls || {};
            this.boxEntity = this.target.find('.' + (cls.box || 'box'));
            this.carEntity = this.boxEntity.find('.' + (cls.car || 'car'));
            this.gasEntity = this.boxEntity.find('.' + (cls.gas || 'gas'));

            this.anIgnition = cls.anIgnition || 'an-shake';
            this.anGas = cls.anGas || 'an-gas';
            this.anBrake = cls.anBrake || 'an-brake';

            var that = this;

            // 点火
            this.ignition = function (time) {
                    //生成一个deferred延时对象
                var deferred = new $.Deferred();

                this.target.addClass(this.anIgnition);
                this.gasEntity.addClass(this.anGas);

                setTimeout(function () {
                    that.target.removeClass(that.anIgnition);
                    that.gasEntity.removeClass(that.anGas);
                    //改变deferred对象的状态。resolve()将状态改为非同步操作成功
                    deferred.resolve();
                }, time);
                //promise是deferred的只读版
                return deferred.promise();
            };

            // 移动
            this.move = function (distance, time) {
                var deferred = new $.Deferred();

                time = time || 2000;

                var css = {};
                css[this.direction] = distance;
                this.target.animate(css, time, 'linear', function() {
                    deferred.resolve();
                });

                return deferred.promise();
            };

            // 加速
            this.speedUp = function (distance, begin, end, framesPx) {
                var deferred = new $.Deferred();

                var frames = 200;
                framesTime = 10000 / frames;
                var now = parseInt(this.target.css(this.direction));
                if (now >= parseInt(distance)) {
                    deferred.resolve();
                } else {

                    framesPx = framesPx || ((distance - now) / frames);
                    begin = framesPx + begin;
                    if (begin >= end) {
                        begin = end;
                    }

                    var css = {};
                    css[this.direction] = now + begin;

                    this.move(now + begin, framesTime).then(function () {
                        return that.speedUp(distance, begin, end, framesPx);
                    }).then(function () {
                        deferred.resolve();
                    });
                }

                return deferred.promise();
            };

            // 刹车
            this.brake = function (distance, time) {
                var deferred = new $.Deferred();

                this.boxEntity.addClass(this.anBrake);
                this.move(distance, time).then(function() {
                    setTimeout(function () {
                        that.boxEntity.removeClass(that.anBrake);
                        deferred.resolve();
                    }, 500);
                });

                return deferred.promise();
            };

            // 停车事宜
            this.stop = function (time) {
                var deferred = new $.Deferred();

                setTimeout(function() {
                    deferred.resolve();
                }, time);

                return deferred.promise(); 
            };

            // 睡眠
            this.sleep = function (time) {
                var start = new Date();
                while(new Date() - start < time) {}
            };
        };

        $(function() {
            var car = new Car($('.box-false'));

            car.move(-100, 200).then(function() {
                return car.brake(50, 200);
            }).then(function () {
                console.log('车将停留 3 秒...');
                console.log('请游客下车');
                return car.stop(1000);
            }).then(function() {
                console.log('点火');
                return car.ignition(500);
            }).then(function () {
                console.log('车已启动');
                return car.speedUp(1500, 0, 300);
            }).then(function() {
                console.log('车已经离开...');
            });
        });
    </script>

注：car.move里面的参数可以自行设置，如果是需要移动端请联系我，目前上传的是PC端

4.IMAGE 所用到的图片

car.png

gas.png

ANIMATION经典小车动画

1.HTML

2.CSS

3.Javascript

4.IMAGE 所用到的图片

江文艺

引用和评论

前端那些事九（VUE）

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具