本文摘自PHP中文网,作者coldplay.xixi,侵删。
html5添加图片动画效果的方法:1、利用css3 animation的steps实现spirit精灵动画;2、利用html5 canvas实现gif图片。
本教程操作环境:windows7系统、html5&&css3版,DELL G3电脑。
html5添加图片动画效果的方法:
方法一:利用css3 animation的steps实现spirit精灵动画;
在应用 CSS3 渐变/动画时,有个控制时间的属性<timing-function>
。它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps()
函数。
steps()
第一个参数 number 为指定的间隔数(必须是正整数),即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。
那么有了这个steps(),我们就可以实现web中常见的Sprite 精灵动画了,见demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
<title></title>
<link rel= "stylesheet" href= "" >
<style>
.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;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
方法二:利用html5 canvas实现gif图片;
利用canvas的drawImage把含有帧的图片加载到canvas中去,再结合js实现动画,见demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title>canvas帧--实现动画</title>
<style>
*{padding:0;margin:0;}
canvas{display:block;background:white}
</style>
</head>
<body>
<canvas></canvas>
<script>
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);
}
</script>
</body>
</html>
|
相关学习推荐:html视频教程
以上就是html5怎么添加图片动画效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5 canvas基本绘图之绘制矩形
HTML5 dialog使用详解
HTML5标准学习-简介介绍
HTML5是什么语言
HTML5编程实战之三-图片文本(txt)拖拽预览实现代码
HTML5使用dom进行自定义控制
h5段落的使用方法
浅谈HTML5的未来发展
HTML5web本地存储实例详细说明
HTML5文件异步上传功能的实现
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5怎么添加图片动画效果