在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. Shiro使用总结

    Shiro已经添加到项目中,现阶段管理两个功能: 1.身份验证:(已经能够满足现阶段需求) 2.权限管理: 权限管理,需要在界面中加一些标签,后台角色.资源的管理也需要整理好,然后在前端添加管理. 1 ...

  2. CAPI3 HTTP文件服务器搭建（共享目录版）

    IIS中运行的程序和WebDAV访问的虚拟目录是共享目录的情况下,非常容易报错,设置如下: 一.程序访问共享目录: 1.配置本地用户IIS权限 2.添加应用池 3.配置连接标示 4.站点关联此应用池即 ...

  3. c#音乐播放器（欣赏）

    设置界面 Mini模式 播放器使用C#编写,用到了大量的自定义控件,播放是调用windows API. 现在只是完成了本地音乐功能,下一步我将要做歌词同步及网络音乐 当然,完成以后我将一步一步教大家做 ...

  4. POJ C程序设计进阶 编程题＃2： 配对碱基链

    编程题#2: 配对碱基链 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 脱 ...

  5. Win 2003下IIS6+Mysql+php5.2  isapi搭建 升级php5.2到5.3测试 借助fastcgi实现

    Win 2003下IIS6+Mysql+php5.2  原环境isapi搭建 升级php5.2到5.3测试 借助fastcgi实现 操作如下 实验前准备:php-5.3.5-Win32-VC6-x86 ...

  6. C#路径 （转载）

    一.获取当前文件的路径1.   System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName     获取模块的完整路径,包括文 ...

  7. ASP.NET MVC5学习笔记之Filter基本介绍

    Filter是ASP.NET MVC框架提供的基于AOP(面向方面)设计,提供在Action执行前后做一些非业务逻辑通用处理,如用户验证,缓存等.现在来看看Filter相关的一些类型信息. 一.基本类 ...

  8. delphi 基础之三 文件流操作

    文件流操作 Delphi操作流文件:什么是流?流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具.在流中,定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员是对流进行所有操作的, ...

  9. 金山词霸每日一句开放平台 .NET demo

    先附上地址:http://open.iciba.com/?c=api 小金山提供了2种获取数据的方式 1. 通过填入自己的网站名称.网址.邮箱地址 来生成一段javascript脚本,直接将生成的代码 ...

  10. 十天学会单片机Day3 D/A与A/D转换器

    D/A转换器 1.二进制权电阻网络型D/A转换器 基准电压Vref 数据D(d3d2d1d0) 输出模拟电压V0 i0 = Vref/8R    i1 = Vref/4R     i2 = Vref/ ...