在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. SQL笔记-第二章，数据表的创建和管理

    数据类型 分5类:整数.数值.字符相关.日期时间以及二进制 1.整数 数据库系统 类型 说明 MYSQL tinyint [unsigned] 一个很小的整数.有符号的范围是-128 到127,无符号 ...

  2. repeater标签双重循环的使用

    在网站开发中,.NET中的repeater标签几乎是笔者首选,也是唯一一个不会生成多余元素的标签,所有样式都是自定义的,这点类似 struts中的<s:iterator/>标签. 在日常编 ...

  3. CentOS-6.4无线上网命令行配置

      参考:http://www.vfeelit.com/504.html 待连接的WIFI的ssid为“thm”,密码为12345678,认证方式为WPA2-PSK   1. 检查无线网卡驱动是否安装 ...

  4. 掌握iOS自动布局

    1,自动布局是一种基于约束的布局(constraint-based layout)引擎,它可以根据开发者在对象上的约束自动调整大小与位置. 2.在iOS 6之前使用的布局模型是“spring& ...

  5. 破解金盘gdlisxp系统

    1.现在要破解的金盘gdlisxp系统版本 2.首先在你电脑上要有脱壳工具AspackDie,和OllyDBG动态调试工具,电脑上装好金盘软件. 3.用AspackDie进行对金盘应用程序脱壳处理,生 ...

  6. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  7. jquery click & get value of attributes of a href

    http://stackoverflow.com/questions/6625667/jquery-click-get-value-of-attributes-of-a-href /* Add a l ...

  8. List集合实战总结

    //构造被分隔的集合 List<object> list = new List<object>(); for (int i = 0; i <= 100; i++) { l ...

  9. MySQL自用脚本（不定期更新）

    查询指定SQL的trace信息 mysql -uUSER -pPWD -hHOST -e "\ use ins_tc_prd; \ set session optimizer_trace=' ...

  10. 不复杂的Autofac注入

    private static void SetAutofacWebAPI() { var builder = new ContainerBuilder(); #region 配置注册方法 string ...