在web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；在web开发中，要实现这样的gif图片，也有很多方法；

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

在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 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 class="bird"></div>

    </body>

</html>

DEMO地址：http://codepen.io/jonechen/pen/bprdBa

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

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

<!DOCTYPE html>

<html lang="en">

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

DEMO地址：http://codepen.io/jonechen/pen/NNvqdy

以上两种方法实现的前提是，需要有一张已绘制帧的图片，有了图片才可进行帧的动画；两种方法相对比，方法一很明显更加的简单，方法二略显复杂！利用方法二可以控制动画的播放、暂停以及帧率；有兴趣的可以尝试下！

多种方法实现H5网页图片动画效果；的更多相关文章

  1. js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  2. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  3. Python学习--两种方法爬取网页图片(requests/urllib)

    实际上,简单的图片爬虫就三个步骤: 获取网页代码 使用正则表达式,寻找图片链接 下载图片链接资源到电脑 下面以博客园为例子,不同的网站可能需要更改正则表达式形式. requests版本: import ...

  4. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

  5. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

  6. 两个gif图片动画效果

    <div className="uploading-animation-tip-wrap"> <img src={require('~/shared/assets ...

  7. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  8. jQuery学习之旅 Item9 动画效果

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...

  9. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

随机推荐

  1. SE11

        自省数据及表存储 2014年4月6日 21:37     类似JAVA反射的特性 SAP提供自省数据的机制 这样可以保证程序的灵活性和动态性     1.使用OO中的cl_abap_typed ...

  2. Ajax与Json的一些总结

    Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...

  3. 三个有用的SQL辅助工具

    三个有用的SQL辅助工具 编写人:CC阿爸 2015-1-23 工欲善其事必先利其器,今天在这里,我想与大家一起分享三个有用的SQL辅助工具.有兴趣的同学,可以一同探讨与学习一下,否则就略过吧. 相信 ...

  4. linux常用命令--ps、netstat、find

     一.ps 1.1ps命令简介 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那 ...

  5. Jquery 实现json复杂查询等操作（jsonDB）

    一.jsonDB 下载地址:https://github.com/ThinkerCodeChina/jsonDB jsonDB是js的一个类库,实现使用SQL语句对json数据增删改查.jsonDB的 ...

  6. nginx 解决400 bad request 的方法（转载）

    nginx的400错误比较难查找原因,因为此错误并不是每次都会出现的,另外,出现错误的时候,通常在浏览器和日志里看不到任何有关提示. 经长时间观察和大量试验查明,此乃request header过大所 ...

  7. 实现QQ机器人报警

    如题,废话不说,直接上代码.首先是登录QQ的小脚本 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 ...

  8. php使用base64加密解密图片

    php使用base64加密解密图片的实例代码. 例子: <?php //文件名:base64.php $data="/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAB ...

  9. 有关IE的操作（收藏夹，清理缓存等）

    1.添加网页到收藏夹的函数: procedure AddURL(Folder, Url, Title: string); var MyUrlFile: TextFile; begin if Folde ...

  10. Jquery在项目中的总结

    1.构造对象 var _getSearchArg = function () { var argModel = {}; argModel.Txt = value; argModel.Code = va ...