关于javascript:前端图片动画优化手段

基本知识

ASCII

大多数计算机采纳 ASCII 码（美国规范信息替换码），它是示意所有大小写字母、数字、标点符号和控制字符的 7 位编码方案。对立码（Unicode）蕴含 ASCII 码，’\u0000’ 到 ’\u007F’ 对应全副 128 个 ACSII 字符。在 JAVA 中能够应用对立码。

在计算机中，所有的数据在存储和运算时都要应用二进制数示意（因为计算机用高电平和低电平别离示意 1 和 0），例如，像 a、b、c、d 这样的 52 个字母（包含大写）以及 0、1 等数字还有一些罕用的符号（例如 *、#、@等）在计算机中存储时也要应用二进制数来示意，而具体用哪些二进制数字示意哪个符号，当然每个人都能够约定本人的一套（这就叫编码），而大家如果要想相互通信而不造成凌乱，那么大家就必须应用雷同的编码规定，于是美国无关的标准化组织就出台了 ASCII 编码，对立规定了上述罕用符号用哪些二进制数来示意。

Unicode

对立码，也叫万国码、繁多码（Unicode）是计算机科学畛域里的一项业界规范，包含字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了对立并且惟一的二进制编码，以满足跨语言、跨平台进行文本转换、解决的要求。

如果把各种文字编码形容为各地的方言，那么 Unicode 就是世界各国合作开发的一种语言。
在这种语言环境下，不会再有语言的编码抵触，在同屏下，能够显示任何语言的内容，这就是 Unicode 的最大益处。就是将世界上所有的文字用 2 个字节对立进行编码。那样，像这样对立编码，2 个字节就曾经足够包容世界上所有的语言的大部分文字了。

最闻名的代表就是 UTF-8

矢量图

矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由点连贯的线。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具备色彩、形态、轮廓、大小和屏幕地位等属性。
矢量图是依据几何个性来绘制图形，矢量能够是一个点或一条线，矢量图只能靠软件生成，文件占用外在空间较小，因为这种类型的图像文件蕴含独立的拆散图像，能够自在无限度的重新组合。它的特点是放大后图像不会失真，和分辨率无关，实用于图形设计、文字设计和一些标记设计、版式设计等。

位图

位图图像（bitmap），亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点能够进行不同的排列和染色以形成图样。当放大位图时，能够看见赖以形成整个图像的有数单个方块。扩充位图尺寸的成果是增大单个像素，从而使线条和形态显得参差不齐。然而，如果从稍远的地位观看它，位图图像的色彩和形态又显得是间断的。用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截屏图等都属于位图。位图的特点是能够体现色调的变动和色彩的轻微过渡，产生真切的成果，毛病是在保留时须要记录每一个像素的地位和色彩值，占用较大的存储空间。

响应式图片

依据屏幕像素加载不同的图片尺寸,长处是自适应抉择图片放弃高清晰度, 缩小不必要的申请渲染工夫, 毛病是减少代码量和我的项目体积.

媒体查问

这是兼容性最好的办法, 略显繁琐

.bg {background-image: url(demo-320w.jpg); }
@media (min-device-pixel-ratio: 2){.bg { background-image: url(demo-640w.jpg); }
}

srcset

以逗号分隔的一个或多个字符串列表表明一系列用户代理应用的可能的图像。每一个字符串由以下组成：

1. 指向图像的 URL。

2. 可选地，再加一个空格之后，附加以下的其一：

   • 一个宽度描述符，这是一个正整数，前面紧跟 ‘w‘ 符号。该整数宽度除以 sizes 属性给出的资源（source）大小来计算失去无效的像素密度，即换算成和 x 描述符等价的值。
   • 一个像素密度描述符，这是一个正浮点数，前面紧跟 ‘x‘ 符号。

<img srcset="demo-320w.jpg,
             demo-480w.jpg 1.5x,
             demo-640w.jpg 2x"src="demo-default.jpg">

依据不同的像素密度加载不同的图片, 都不合乎的状况下会应用 src 作为默认图, 这是用于像素密度的适配

sizes

示意资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包含：

1. 一个媒体条件。最初一项肯定是被疏忽的。
2. 一个资源尺寸的值。

<img srcset="demo-320w.jpg,
             demo-480w.jpg 1.5x,
             demo-640w.jpg 2x"sizes="(max-width: 640px) 100vw,
            (max-width: 1080px) 33vw,
     src="demo-default.jpg">

示意图片在 640px 及以下 100% 宽度, 超过 640px 但 1080px 及以下 33% 宽度, 这是用于屏幕宽度的适配

上面是这两个属性的兼容图

picture + source

如果想要更加准确管制的话能够应用这两个新标签

<picture>
  <source media="(max-width: 640px)" srcset="vertical.jpg">
  <source media="(min-width: 641px)" srcset="horizontal.jpg">
  <img src="default.jpg">
</picture>

media 就相当于下面的 sizes, 这会从上往下判断直到加载合乎的资源.

source 还有一个 type 属性用于加载不同的图片类型

<picture>
  <source type="image/svg" srcset="default.svg">
  <source type="image/webp" srcset="default.webp">
  <img src="default.jpg">
</picture>

上面是兼容性

Tinypng 压缩

个别这一步应该是由 Ui 设计负责输给到开发, 也不排除局部 UI 没有做这一步, 咱们本人也能够去做解决.

关上 https://tinypng.com/ 抉择图片上传压缩, 之后再下载压缩后的图片资源回来

压缩效率

从图片能够看到依据之前图片算法不同能够压缩的体积也不一样, 我轻易拿了两张图片测试就达到了 83% 和48%.

比照

未解决图

跟原图相比拟, 肉眼看不出画质有侵害

未解决图

解决图

imagemin-webpack-plugin (貌似不能用了)

利用 webpack 插件对我的项目图片进行压缩解决, 根本配置

import ImageminPlugin from 'imagemin-webpack-plugin'
import imageminMozjpeg from 'imagemin-mozjpeg'

module.exports = {
  plugins: [
    new ImageminPlugin({
      plugins: [
        imageminMozjpeg({
          quality: 65,
          progressive: true // 可将图片转成渐进式渲染, 用户体验较好, 然而渲染耗时更久
        })
      ]
    })
  ]
}

比照

以前做过一个试验数据

webP

WebP 最后在 2010 年公布，指标是 缩小文件大小，但达到和 JPEG 格局雷同的图片品质 ，心愿可能缩小图片档在网络上的发送工夫。2011 年 11 月 8 日，Google 开始让 WebP 反对无损压缩和通明色（alpha 通道）的性能 ，而在 2012 年 8 月 16 日的参考实做 libwebp 0.2.0 中正式反对。依据 Google 较早的测试，WebP 的无损压缩比网络上找到的 PNG 档少了45% 的文件大小，即便这些 PNG 档在应用 pngcrush 和 PNGOUT 解决过，WebP 还是能够缩小 28% 的文件大小。

美中不足的是，WebP 格局图像的编码工夫“比 JPEG 格局图像长 8 倍”

从安卓 4.2 开始也反对, 只有兼容代码写得好也足以让我的项目体积大大减少,safari 发表 14 也开始反对了

比照

原图

解决图

原图

解决图

CDN 图片解决

CDN 除了缓存资源以外, 还提供了很多额定解决工具, 例如图片转换

这是一种更欠缺的计划, 花钱解决各种解决保留转换的难度和工作量, 具体 API 大同小异.

能够轻易代替响应式图片的简单写法

雪碧图

一张图片一个申请的形式在加载速度方面受到了重大限度。特地是在小图片的状况下申请的工夫相比拟自身体积得失相当. 限度次要来自两个方面：建设连贯的工夫 ，和 浏览器的并发下载数量限度。前者来自 HTTP 协定，而后者则来自浏览器的实现

将多个小图片合并成一张大图, 能够用一个申请拿到所需的图片, 并且合并后的体积比合并前的总体积还小, 毛病是 只能应用背景并且须要定位地位,也能够通过一些插件主动生成款式.

在线生成 sprite-generator

这种十分智能而且不便, 然而不实用长期保护或者改变频繁的我的项目

webpack-spritesmith

Webpack plugin that converts set of images into a spritesheet and SASS/LESS/Stylus mixins, using spritesmith and spritesheet-templates

示例配置

//webpack.config.js
var path = require('path');

var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    // ...
    module: {
        rules: [
            {test: /\.styl$/, use: [
                'style-loader',
                'css-loader',
                'stylus-loader'
            ]},
            {test: /\.png$/, use: ['file-loader?name=i/[hash].[ext]'
            ]}
        ]
    },
    resolve: {modules: ["node_modules", "spritesmith-generated"]
    },
    plugins: [
        new SpritesmithPlugin({
            src: {cwd: path.resolve(__dirname, 'src/ico'),
                glob: '*.png'
            },
            target: {image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl')
            },
            apiOptions: {cssImageRef: "~sprite.png"}
        })
    ]
    // ...
};

在我的项目开发中间接配置 webpack 会更加不便, 更多配置可查看仓库

Data URL

Data URLs，即前缀为 data: 协定的 URL，其容许内容创建者向文档中嵌入小文件。

Data URLs 由四个局部组成：前缀 (data:)、批示数据类型的 MIME 类型、如果非文本则为可选的base64 标记、数据自身：

$$
data:[<mediatype>][;base64],<data>
$$

mediatype

mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 示意 JPEG 图像文件。

如果被省略，则默认值为 text/plain;charset=US-ASCII

base64

Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一，Base64 就是一种基于 64 个可打印字符来示意二进制数据的办法。

Base64 编码是从二进制到字符的过程，可用于在 HTTP 环境下传递较长的标识信息。采纳 Base64 编码具备不可读性，须要解码后能力浏览。

Base64 因为以上长处被广泛应用于计算机的各个领域，然而因为输入内容中包含两个以上“符号类”字符（+, /, =)，不同的利用场景又别离研制了 Base64 的各种“变种”。

Base64 要求把每三个 8Bit 的字节转换为四个 6Bit 的字节（38 = 46 = 24），而后把 6Bit 再添两位高位 0，组成四个 8Bit 的字节，也就是说，转换后的字符串实践上将要比原来的长1/3。

如果数据是文本类型，你能够间接将文本嵌入 (依据文档类型，应用适合的实体字符或转义字符)。

如果是二进制数据，你能够将数据进行 base64 编码 之后再进行嵌入。

data

data:,Hello%2C%20World!
// 简略的 text/plain 类型数据

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
// 上一条示例的 base64 编码版本

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
// 一个 HTML 文档源代码 <h1>Hello, World</h1>

data:text/html,<script>alert('hi');</script>
// 一个会执行 JavaScript alert 的 HTML 文档。留神 script 标签必须关闭。

用 webpack 的根本入门库能够简略实现, url-loader 性能相似于 file-loader，然而在文件大小（单位 byte）低于指定的限度时，能够返回一个 DataURL。

module.exports = {
  module: {
    rules: [
      {test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {limit: 8192}
          }
        ]
      }
    ]
  }
}

只实用于小图片的转换, 原理就是 通过减少代码量来缩小资源申请, 所以管制转换的体积限度尤为重要, 而且自身的问题也不少

例子

长处:

• 缩小资源申请数
• 不受浏览器并发数限度没有不必要的阻塞工夫
• 浏览器兼容性好

毛病:

• 编码体积是原数据体积的 4/3 左右, 且大量应用升高代码可观性
• 浏览器不会缓存 Data URL 图片(除非是嵌入代码里连同脚本一起缓存)
• CPU 资源更多
• 内存耗费更大
• 渲染耗时更长

SVG

与其余图像格式相比，应用 SVG 的劣势在于：

• SVG 可被十分多的工具读取和批改（比方记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像品质不降落的状况下被放大
• SVG 图像中的文本是可选的，同时也是可搜寻的（很适宜制作地图）
• SVG 能够与 Java 技术一起运行
• SVG 是凋谢的规范
• SVG 文件是纯正的 XML

Vue 我的项目引入

创立 SvgIcon 组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {type: String}
  },
  computed: {iconName() {return `#icon-${this.iconClass}`
    },
    svgClass() {if (this.className) {return 'svg-icon' + this.className} else {return 'svg-icon'}
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

创立 icons 文件夹

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg 组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
// eslint-disable-next-line
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

在 main.js 中引入

import './icons'

应用

<svg-icon icon-class="user" />

SVG sprite loader

Webpack loader for creating SVG sprites.

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],
    options: {symbolId: 'icon-[name]'
    }
}
-------------------------------------------
exclude: [resolve('src/icons')],

SVG 在线压缩合并工具

具体参考张鑫旭博客 SVG 精简压缩工具 svgo 简介和初体验

字体图标

随着 Retina 屏诞生, 惯例的图标展现的分辨率曾经满足不了用户需要, 毕竟设施像素比会导致即便屏幕差不多尺寸所看到的图片清晰度不同

下面说的所有形式究竟还是图片或者会有某些损耗, 而字体图标是以字体模式展现图标

长处

• 矢量绘图技术独特的长处就是反对平滑缩放
• 自身就是文字。它会受到字号、前景色、行低等参数的管制

毛病

• 字体中只有矢量数据，没有色彩数据, 字体图标必然是单色
• 自身字体内间距无奈参数管制
• 工具链简单, 不是一般团队能够开发保护的, 个别依赖开源社区提供应用

阿里矢量图标库

利用代码有几种

unicode 援用

unicode 是字体在网页端最原始的利用形式，特点是：

• 兼容性最好，反对 ie6+，及所有古代浏览器。
• 反对按字体的形式去动静调整图标大小，色彩等等。
• 然而因为是字体，所以不反对多色。只能应用平台里单色的图标，就算我的项目里有多色图标也会主动去色。

留神：新版 iconfont 反对多色图标，这些多色图标在 unicode 模式下将不能应用，如果有需要倡议应用 symbol 的援用形式

第一步：拷贝我的项目上面生成的 font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义应用 iconfont 的款式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：筛选相应图标并获取字体编码，利用于页面

<i class="iconfont">&#x33;</i>

font-class 援用

font-class 是 unicode 应用形式的一种变种，次要是解决 unicode 书写不直观，语意不明确的问题。

与 unicode 应用形式相比，具备如下特点：

• 兼容性良好，反对 ie8+，及所有古代浏览器。
• 相比于 unicode 语意明确，书写更直观。能够很容易分辨这个 icon 是什么。
• 因为应用 class 来定义图标，所以当要替换图标时，只须要批改 class 外面的 unicode 援用。
• 不过因为实质上还是应用的字体，所以多色图标还是不反对的。

第一步：拷贝我的项目上面生成的 fontclass 代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：筛选相应图标并获取类名，利用于页面：

<i class="iconfont icon-xxx"></i>

symbol 援用

这是一种全新的应用形式，应该说这才是将来的支流，也是平台目前举荐的用法。这种用法其实是做了一个 svg 的汇合，与下面两种相比具备如下特点：

• 反对多色图标了，不再受单色限度。
• 通过一些技巧，反对像字体那样，通过 font-size,color 来调整款式。
• 兼容性较差，反对 ie9+, 及古代浏览器。
• 浏览器渲染 svg 的性能个别，还不如 png。

第一步：拷贝我的项目上面生成的 symbol 代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：退出通用 css 代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：筛选相应图标并获取类名，利用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

Apng

APNG（Animated Portable Network Graphics）是一个基于 PNG（Portable Network Graphics）的位图动画格局，扩大办法相似次要用于网页的 GIF 89a，仍对传统 PNG 保留向下兼容。第 1 帧是规范的单幅 PNG 图像，因而只反对原版 PNG 的软件能失常显示第 1 帧。残余的动画帧和帧速数据贮存在合乎原版 PNG 规范的扩大数据块里。

咱们回顾一下另一个罕用的动静图片 GIF 特点

1. 采纳改良的 LZW 压缩算法解决图像数据无损压缩, 最多存储 8bit 的索引色(256 色), 实用于对色调要求不高同时须要文件体积较小的场景
2. 反对背景全透明, 不反对半透明, 图片边缘会有显著的毛糙锯齿
3. 反对简略动画
4. 反对图像渐进

而相比拟起来,Apng 劣势也很显著

1. 反对 24bit 索引色
2. 反对 8 位 Alpha 透明度
3. 兼容 png
4. 体积更小

然而兼容性也显著较差

因为兼容性问题, 个别会搭配 apng-js 或者 apng-canvas 应用, 具体原理大略为:

1. 加载资源, 解析数据格式
2. 校验通过之后进行数据整顿
3. 利用 raf 在 canvas 上绘制每一帧重现动画

检测办法

从 apng-canvas 里能够看到也是利用 Image 标签加载

var checkNativeFeatures = oncePromise(function (resolve) {var canvas = document.createElement("canvas");
    var result = {TypedArrays: ("ArrayBuffer" in global),
        BlobURLs: ("URL" in global),
        requestAnimationFrame: ("requestAnimationFrame" in global),
        pageProtocol: (location.protocol == "http:" || location.protocol == "https:"),
        canvas: ("getContext" in document.createElement("canvas")),
        APNG: false
    };

    if (result.canvas) {
        // see http://eligrey.com/blog/post/apng-feature-detection
        var img = new Image();
        img.onload = function () {var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            result.APNG = (ctx.getImageData(0, 0, 1, 1).data[3] === 0);
            resolve(result);
        };
        // frame 1 (skipped on apng-supporting browsers): [0, 0, 0, 255]
        // frame 2: [0, 0, 0, 0]
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjV" +
        "EwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAA" +
        "AAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
    } else {resolve(result);
    }
});

已知 BUG

1. Safari for iOS（Safari for macOS 失常）预览 APNG 的时候，动图的循环次数为对应原图的 loop + 1。比方 APNG 有 10 帧，loop 为 2，那么会循环总计展现 30 帧。
2. 局部手机端会出现异常动效
3. 因为后缀依然应用 png, 如果对图片进行解决可能导致变成动态 png, 倡议与动态 png 离开治理
4. 局部机型应用 apng-canvas 会呈现绘制地位大小偏离理论的问题

1 和 2 如果与需要抵触的话倡议应用下面兼容库解决

4 能够通过重设 canvas 款式解决，所以解决方案如下

<canvas ref="gameAnimationCanvas" ></canvas>
------------------- 省略 ------------------------
APNG.parseURL(props.src)
  .then((animation) => {
    instance = animation;
    const {width, height} = instance!;
    gameAnimationCanvas.value!.width = width;
    gameAnimationCanvas.value!.height = height;

    const ctx = gameAnimationCanvas.value!.getContext('2d');
    instance!.addContext(ctx);
    props.autoplay && instance?.play();})
  .catch((err) => {console.log('不反对 apng 该格局动画', err);
  });

Svga

前端开发有时候也不免须要用到动画成果, 实现办法多种多样

• canvas 绘图：难以调试
• GIF：输入成果差，并且资源占用高，只能一直循环
• Apng：比 GIF 好点
• css3 动画：须要手动调试，代码复用率低
• 序列帧：增大体积，批改麻烦
• js 动画：容易被阻塞
• MP4：难以对立多端机型播放体验
• lottie：没用过，不评估

SVGA 是由 YY 团队开发进去的一种跨平台的开源动画格局，同时兼容 iOS / Android / Web。

SVGA 做的事件，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧体现（位移、缩放、旋转、透明度）导出。Player 会负责将这些信息还原至画布上。

SVGA 本质上做了一件十分重要的事件。她会在动画播放前，一次性地上传所有纹理到 GPU，接着，在播放的过程中，这些纹理会被重复使用。CPU 与 GPU 替换的次数大大减少，同时，纹理的数目也在可控范畴。内存、CPU、GPU 占用能达到最优状态。

长处

• 分工明确，动画设计师通过工具输入 svga 动画文件，开发工程师间接应用
• 动画文件体积更小
• 更加节俭空间内存
• 跨平台，视觉一致性还原成果好
• 反对转场动画
• 反对动静替换元素

毛病

• 不反对局部 AE 属性
• 动画是压缩产物，不反对二次编辑、
• 不反对简单矢量图、不反对 AE 自带的突变、生成、描边、擦除等

SVGAPlayer-Web

2.3.0 – 新增音频播放反对

SVGAPlayer 2.0.0 只反对以下浏览器应用

• Edge / IE 6+
• Safari / Chrome

• iOS 6.0+ / Android 4.0+

  SVGAPlayer 2.0.0 同时反对以下游戏引擎应用

• CreateJS 使用指南
• LayaBox 使用指南

手动加载

你能够自行创立 Player 和 Parser 并加载动画

1. 增加 Div 容器

<div id="demoCanvas" style="styles..."></div>

2. 加载动画

var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // 如果你须要反对 IE6+，那么必须把同样的选择器传给 Parser。parser.load('rose_2.0.0.svga', function(videoItem) {player.setVideoItem(videoItem);
    player.startAnimation();})

主动加载

为 canvas 元素增加以下属性

<div src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>

动画会在页面加载实现后播放

动静图像

你能够动静替换动画中的指定元素，询问你的动画设计师以获取 ImageKey。

• 用于替换的图片，宽、高必须与原图统一。
• setImage 操作必须在 startAnimation 之前执行。

player.setImage('http://yourserver.com/xxx.png', 'ImageKey');

动静文本

你能够在指定元素上增加文本，询问你的动画设计师以获取 ImageKey。

• setText 操作必须在 startAnimation 之前执行。

player.setText('Hello, World!', 'ImageKey');
player.setText({ 
    text: 'Hello, World!, 
    family: 'Arial',
    size: "24px", 
    color: "#ffe0a4",
    offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // 可自定义文本款式

SVGAPlayer-Web-Lite

这是一个 SVGA 在 Web 上的播放器，它的指标是更轻量级、更高效，但同时它也放弃了对一些旧版本浏览器的兼容性反对, 不反对声音播放

指标将来

• 体积 = 80k (gzip = 27kb)
• 兼容 Android 4+ / iOS 9+
• 更好的异步操作
• 多线程 (WebWorker) 解析文件数据

懒加载

这个是比拟陈词滥调的伎俩了, 从 JQ 时代开始就曾经有比拟丰盛的教训, 到了框架时代, 如果用 Vue 的话我晓得的就有

vue-lazyload

性能比拟弱小

• 轻量级、弱小且易于应用
• 可作用在任何类型的图像
• 在加载图像时增加加载类
• 同时反对 Vue 1.0 和 Vue 2.0

引入模块

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {App}
})

应用办法

可自定义加载和谬误图

<div v-lazy-container="{selector:'img', error:'xxx.jpg', loading:'xxx.jpg'}">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
// 或者
<div v-lazy-container="{selector:'img'}">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

预加载

一次性加载完图片再开始渲染界面

简略实现

<script>
export default {data () {
    return {count: 0,}
  },
  mounted: function() {this.preload()
  },
  methods: {preload: function() {const imgs = ['xxx.png', ...]

      for (let img of imgs) {const image = new Image()
        image.src = img
        image.onload = () => {this.count++}
      }

    },
  },
}
</script>

总结

下面介绍了大抵的几种实用伎俩

• 手机适配清晰度: 响应式加载图片
• 根本的图片压缩能够用: tinypng, webpack 工具
• 零散小图: 雪碧图, Data URL, 字体图标
• 图片类型: webp, svg
• 播放动画: apng, svga
• 加载形式: 懒加载, 预加载