在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. javaSE第二十二天

    第二十二天    312 1:登录注册IO版本案例(掌握)    312 2:数据操作流(操作基本类型数据的流)(理解)    313 (1)定义:    313 (2)流对象名称    313 (3 ...

  2. ASP.NET状态保持：ViewState

    ViewState是ASP.NET的.aspx页面特有的,是页面级的状态保持.一般用在内网系统和网站后台. namespace WebFormTest.TestCollect { public par ...

  3. Target Operator ID has No Access to Upgrade

    If you are attempting to migrate a project between environments through application designer you mig ...

  4. 如何调节datagridview中字体

    设置ColumnHeaderDefaultCellStyle的Font属性 或者 编程 datagridview.Columns[index].DefaultCellStyle.Font.Size=“ ...

  5. Silverlight DataGrid数据行背景颜色控制

    sdk:DataGrid数据绑定后,部分特殊的行需要用不同的背景颜色来显示.(注册DataGrid的LoadingRow事件) private void radGridView_LoadingRow( ...

  6. android任意view爆炸效果--第三方开源--ExplosionField

    犹如天女散花一样,爆炸散列,比较有趣.Android ExplosionField在github上的项目主页是:https://github.com/tyrantgit/ExplosionField ...

  7. 个人代码管理--svn

    通常开发中遇到自己电脑和公司电脑代码共享的问题.比如一些通用的库,图片等项目中基本通用. 一些项目库如google code, github内地访问又挺困难的,常常无法连接,或者慢死..还有就是必须开 ...

  8. C# 平时碰见的问题【1】

    1. SqlBulkCopy 可以利用这个类实现快速大批量新增数据的效果, 但在使用过程中发现了一个问题: 无法将数据源中的DateTime类型转换成数据库中的int类型 看起来就是数据列不对应导致的 ...

  9. C# 处理csv格式的Excel文件代码

    public class CSVFileHelper { /// <summary> /// 将DataTable中数据写入到CSV文件中 /// </summary> /// ...

  10. VIM编辑器常用功能整理笔记

    vim编辑器 vi : visual Inertface 可视化接口 vim : vi improved 扩展版 语法着色 模式化编辑器: 编辑模式(命令模式): 默认模式 输入模式: 末行模式: 等 ...