html怎么给图片加动画效果,html5怎么添加图片动画效果

html5添加图片动画效果的方法：1、利用css3 animation的steps实现spirit精灵动画；2、利用html5 canvas实现gif图片。

本教程操作环境：windows7系统、html5&&css3版，DELL G3电脑。

html5添加图片动画效果的方法：

方法一：利用css3 animation的steps实现spirit精灵动画；

在应用 CSS3 渐变/动画时，有个控制时间的属性 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数(必须是正整数)，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：

.bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; }

@keyframes bird{

from {

background-position: 0 0;

}

to {

background-position: -800% 0px;

}

}

方法二：利用html5 canvas实现gif图片；

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：

canvas帧--实现动画

*{padding:0;margin:0;}

canvas{display:block;background:white}

var imgPic = new Image();

imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

imgPic.onload = function () {

drawImg()

}

var i = 0;

var lastTime = new Date().getTime();

var delatime;

var timer = 0;

function drawImg() {

window.requestAnimationFrame(drawImg);

var now = new Date().getTime();

delatime = now - lastTime;

lastTime = now;

timer += delatime;

if (timer > 200) {

i++;

if (i > 7) i = 0;

timer = 0

}

console.log(delatime)

ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);

}