关于javascript:H5动画实战

前言

动画成果始终是人机交互的一个十分重要的局部，动画成果的引入，会让交互变得更加敌对，让用户取得更加愉悦的体验。而随着市场环境变动，手机性能越来越好，网速越来越快，以及用户视觉效果要求越来越高，作为一名网页开发者，动画也是一个必会的技能。由此本文和大家分享下动画方面的技术实践经验。

动画的造成

多张不同的图像连在一起就会变成了动静的图像。在网页端的世界里，浏览器在视觉暂留工夫内，连续不断的逐帧输入图像。每一帧输入一张图像，造成了用户视觉效果中的动画。那么怎么高效的通过一帧帧输入间断晦涩的动画，是有很多种动画技术能够都能够实现的。

动画技术

上面以当今支流的动画技术，分成四个局部给大家介绍下，别离为 纯 Css、Lottie 库、Svga 库、Creatjs 库。

一、纯 CSS

1.1 Animation动画属性次要联合 @keyframes 规定来创立动画。

上面以语音喇叭声稳定效为例：
两头的小圆点是始终存在的，第一条和第二条线都是 1/4 的圆弧，别离距离 0.2s 去循环显示暗藏。

.second {animation: fadeInOut 1s infinite 0.2s;}
.third {animation: fadeInOut 1s infinite 0.4s;}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    /* 初始状态 透明度为 0 */
  }
  100% {
    opacity: 1;
    /* 结尾状态 透明度为 1 */
  }
}

咱们个别用阶跃函数 step 来做帧动画。
上面是 linear 和step的具体案例：

https://codepen.io/huihui/pen/ExPKbdj

学生成 Sprite 图片，再挪动 X 轴地位造成帧动画。

1.2 Transform属性利用于元素的 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、歪斜、挪动、透视以及应用矩阵函数。别离为 rotate，scale，skew，translate，perspective 以及 matrix。还能够通过transform-origin 用来确定中心点的地位为 X、Y、Z，默认值：50% 50% 0。
这里有个很好的例子来演示 Transform 属性：https://c.runoob.com/codedemo/3391

上面以翻牌动效为例，次要是通过透视 perspective 属性来实现：

要达到图中 第一组翻牌 的成果。首先设置 transform-style: preserve-3d，使被转换的子元素保留其3D 转换。如果不加透视间隔 perspective，则会为 第三组翻牌 中的成果，扁平没有 Z 轴的立体感。其次增加了透视间隔后，如果 Z 轴雷同，三个卡片是会有重叠的景象，如 第二组翻牌 中的成果。最初特意给 卡片一 加大了 Z 轴间隔。这样通过透视，如果 Z 轴间隔越大，卡片就看上去越小。能够用 scale 放大了 卡片一。

.card-board{perspective: 800;}
.board-item-wrap1{transform: scale(1.1) translateZ(-100px);
}

提醒：个别用 transform: translateZ(0)，开启3D 引擎，触发 GPU 减速，让网页动画更晦涩。

1.3 Transition属性是用来设置动画过渡成果的，能够设置动画的过渡工夫和延迟时间。还能够增加动画函数animation-timing-function，其默认值为ease。可用贝塞尔曲线来做为动画速度曲线，举荐一个贝塞尔曲线的可视化网址：cubic-bezier，

以地图页的动画为例：
品牌岛屿的挪动成果用了ease，因为前面的品牌须要含糊，设置了较晚含糊的贝塞尔曲线

transition: transform 1s ease,filter 1s cubic-bezier(.06,.45,.82,1.34);

https://cubic-bezier.com/#.06,.45,.82,1.34

1.4 Js动画事件监听：
动画事件有：

animationstart – CSS 动画开始后触发

animationiteration- CSS 动画反复播放时触发

animationend – CSS 动画实现后触发

过渡事件有：

transitionend- 该事件在 CSS 实现过渡后触发。

留神：transitionend存在个问题. 如果 transition 中, 变换的属性有多个，就会触发屡次。比方如果同时设置宽高的过渡成果（transition:width:.2s,height:.2s），那么 transitionend 事件就会触发 2 次。

以 2 秒隐没提示框为例：

动画完结 2 秒后暗藏，用 animationEnd 事件来监听。

兼容性：
下面 4 个事件都存在兼容性问题，在 Android5 下或 Ios9.3 下都须要加 webkit 前缀能力兼容，例如 animationstart 事件在 Android5 下须要用webkitAnimationStart。

兼容性这块自己封装了插件 jdyfe-eventployfill，原理是用 createElement 创立一个元素然而不插入页面 Dom, 查找style 中是否有动画事件，来作为 webkit 的兼容判断
应用办法

import {janimationstart, janimationiteration, janimationend, jtransitionend} from'jdyfe-eventPloyfill'
    ...
    dom.addEventListener(janimationstart, ()=>{})
    dom.addEventListener(janimationiteration, ()=>{})
    dom.addEventListener(janimationend, ()=>{})
    dom.addEventListener(jtransitionend, ()=>{})
    ...

二、Lottie

airbnb提供的开源动画库 Lottie

反对多版本，React Native，web和 iOS，Android 版本

用矢量图导出。

在浏览器中生成的是 svg 标签，不会失真

案例为：
https://codepen.io/airnan/pen/MPmQQB

var svgContainer = document.getElementById('svgContainer')
var animItem = bodymovin.loadAnimation({
  wrapper: svgContainer,//div 的 id
  animType: 'svg'
  loop: true,
  path: 'https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json'
})

更多 Lottie 案例：https://codepen.io/collection/nVYWZR/

Lottie还和京东的 JDReact 框架联合，推出了 JDLottieLoadingView 和JDLottieView组件。其中 JDLottieLoadingView 次要是显示加载中的动效，会默认援用 loading 动画款式。JDLottieView是 Lottie 在JDReact上的封装，用法不变。

案例代码如下：

<JDLottieLoadingView
    autoSize={false} 
    source={"loading.json"}
/>
<JDLottieView
    autoPlay={true}
    autoSize={true}
    style={{width: 100, backgroundColor: 'black'}}
    source={require('./animations/LottieWalkthrough')}
    progress={0}
    loop={true}
/>

三、Svga

SVGA 是一种跨平台的开源动画格局，集成 svga player 之后可间接应用，装置 svgaplayerweb 包即可，

反对多版本，兼容 iOS / Android / Flutter / Web 多个平台的动画格局

反对位图和矢量图

在浏览器中生成的是 canvas 标签

案例代码如下：

import * as SVGA from 'svgaplayerweb'
function AniSvga(props) {useEffect(() => {var player = new SVGA.Player('#demoCanvas1')
    var parser = new SVGA.Parser('#demoCanvas1') // Must Provide same selector eg:#demoCanvas IF support IE6+
    parser.load('./plugin/mengniu.svga', function(videoItem) {player.setVideoItem(videoItem)
        player.startAnimation()})
    return ()=>{player.clear()
    }
  }, [])
  return (
    <div className="jdyfe-svgaPage">
      <div id="demoCanvas1" ></div>
    </div>
  )
}
export default AniSvga

svga在线预览：https://svga.io/svga-preview.html

某些 Android 操作系统短少 Blob 反对，所以须要自行添加Blob Polyfill。

<script src="//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>

四、Createjs

CreateJS是基于 HTML5 开发的一套模块化的工具库。
基于这些库，能够十分快捷地开发出基于 HTML5 的游戏、动画和交互利用。

4.1 EaselJS

EaselJS提供了 JavaScript 库，可轻松操作 HTML5 Canvas 元素。

能够绘制 Stage 舞台、Container 容器和 Sprite 精灵的大小地位等，还提供很多事件能够做交互，很适宜纯互动游戏制作。
精灵能够用 TexturePacker 软件来生成雪碧图，导出 Createjs 的json文件。

4.2 TweenJs

TweenJs次要是调整动画属性，例如

target.alpha = 1
createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete)
function handleComplete() {// 突变实现执行}

这个突变将会先期待 0.5 秒，突变指标的 alpha 属性从 0 到 1，并且 visible 属性从 true 变为 false，这个过程用时 1 秒，最初调用 handleComplete 函数。

4.3 SoundJs

SoundJs次要用来加载解决音频的。

暂停，复原 声音

管制声音的音量，静音

监听声音实例中的事件，如实现，循环，或失败事件

 createjs.Sound.alternateExtensions = ["mp3"]
 createjs.Sound.on("fileload", this.loadHandler, this)
 createjs.Sound.registerSound("path/to/mySound.ogg", "sound")
 function loadHandler(event) {
     // 这会引发针对每个已注册的声音。var instance = createjs.Sound.play("sound")  // 施展应用 ID。也能够应用残缺的源门路或 event.src。instance.on("complete", this.handleComplete, this)
     instance.volume = 0.5
 }

4.4 PreloadJS

PreloadJS是一个用来治理和协调相干资源加载的类库，它能够帮忙你事后加载相干资源。比照本人写监听 load 事件来确认实现加载，PreloadJS更不便，并且反对预加载多种类型的数据，例如：图片、文件、音频、数据等等。
PreloadJS次要是用 URL. createObjectURL 创立了 Blob 对象，而后赋值给 URL，移除的时候用 URL.revokeObjectURL办法移除 Blob 对象。所以会在 network 中看到 Blob 对象。

import createjs from 'jdyfe-createjs'
const loader = new createjs.LoadQueue(true)
loader.loadManifest([bgAry[0], ...imgAry])
loader.on('complete', function () {console.log('complete')// 全副加载实现
})
loader.on('fileload', function (e) {console.log('fileload---', e.target.progress)// 进度条
})

案例

createjs官网不反对 npm 形式应用，咱们用 webpack 从新打包生成了一个 umd 模块 jdyfe-createjs，可供大家下载和应用。

上面案例蕴含了下面说的 4 个模块，也用到了jdyfe-createjs，具体可看：Belly 跑步案例

Happy coding .. :)

相干链接

https://developer.mozilla.org/en-US/docs/Web/API/Animation/play

http://www.createjs.cc/src/docs/tweenjs/classes/CSSPlugin.html

原文地址