html5怎么添加图片动画效果

百变鹏仔 6个月前 (10-17) #H5教程

文章标签效果

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：

<!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：

<!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 = &#39;http://www.cj365.cc/demo/bird/bird.png&#39;;    var canvas = document.querySelector(&#39;canvas&#39;);    canvas.width = window.innerWidth;    canvas.height = window.innerHeight;    var ctx = canvas.getContext(&#39;2d&#39;);    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>

html5怎么添加图片动画效果

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集