在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. Android IOS WebRTC 音视频开发总结（六五）-- 给韩国电信巨头做咨询

    本文主要总结咨询过程中的一些问题,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam 韩国电信巨头sk想了解国内移动互联网rtc现状,所以上周请我过去给他们的相关人员 ...

  2. javaSE第六天

    第六天    28 1. 二维数组(理解)    28 (1)就是元素为一维数组的一个数组.    28 (2)格式:    28 (3)案例(掌握):    28 A:二维数组的遍历    28 B ...

  3. Large-Scale Named Entity Disambiguation Based on Wikipedia Data

    Large-Scale Named Entity Disambiguation Based on Wikipedia Data 基于维基百科数据的大规模命名实体消岐 1．引言 1.1. 概念 实体(e ...

  4. ASP.NET验证控件一

    为了更好地创建交互式Web应用程序.加强应用程序安全性,程序开发人员应该对用户输入的内容进行验证. ASP.NET提供了一系列输入验证控件,使用这些控件用户可以很方便地实现输入验证. ASP.NET还 ...

  5. eclipse 中maven项目右键没有maven菜单问题

    修改项目.project文件,确保有maven2Builder和maven2Nature2个标签: <?xml version="1.0" encoding="UT ...

  6. 利用脚本设置本机IP地址

    各位同学,在日常工作中.常出现需要指定IP的地址的清况.为了解决这一个问题,我特意为自己编写了一段脚本.方便设定自己笔记本的IP地址.供大家参考. 其中包括无线wifi和有线网络设定两个IP的操作. ...

  7. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

  8. 【转】8种Nosql数据库系统对比

    导读:Kristóf Kovács 是一位软件架构师和咨询顾问,他最近发布了一片对比各种类型nosql数据库的文章.文章由敏捷翻译 – 唐尤华编译.如需转载,请参见文后声明. 虽然SQL数据库是非常有 ...

  9. 百度 迷你版 UMeditor富文本编辑器 使用方法

    第一步:下载编辑器 到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子.[下载页面] 第二步:部署编辑器到页面 解压下载的包,放到 ...

  10. C# 笛卡尔积

    void Main() { string[] str1 = { "a", "b" }; " }; string[] str3 = { "一& ...