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
