js网页动画，如何做一款高逼格不失真的动画
2018-11-04 本文已影响0人
0月
在平时的活动页面中，我们可能要做一些动画，一般来说，动画可以分为几种：
1，就是利用css3的animation、transition、transform、scale、rotate、skew、matrxi属性等做一些dom节点变化的动画，这种动画相对比较简单，开发成本不高，但是如果在不规则的轨迹上动就难了。
2，利用background-image, background-position加上js控制来做帧动画，原理就是把动画过程按帧来拆分成一张大的背景图，然后给定一个固定宽高的容器，用js快速的控制background-position的位置来达到播放动画的效果，这个稍微麻烦一点，需要js配合；其中有明显的缺点就是动画的宽高不能随着屏幕大小随便改，这样会让动画移动background-position时很难去控制；而且在不同屏幕分辨率下，图片有可能会变得模糊。
3, 用gif图，短小动画还好，长点的动画，图片文件就比较大了。
4，用svg做动画，svg的特点就是不失真，随便宽度，但是一般前端工程师都不怎么会画svg，何况是会 ‘动’ 的svg。
5、canvas做动画，这个实现成本较高了，如果动画的组成元素很多的话，画到你怀疑人生。
。。。
废话少说，今天给大家带来一个前端工程师的福利，实现成本小，且动画效果可以高逼格复杂、不失真、满足任意大小屏幕，可以在任意动画轨迹上。
当然，在实现之前，你需要一个有点能力的设计师配合一下的，毕竟好的动画你的实现成本小，自然工作量就跑到别人那去了。。。
终于到正题了，主要靠这个js库：https://github.com/airbnb/lottie-web
步骤1：设计师会用AE这个软件，并且去装一个插件 Bodymovin http://aescripts.com/bodymovin/
然后设计师按照插件用法去做一个动画，然后在AE上点击render按钮，最后得到一个data.json和一个images的文件夹，images文件夹里面装了动画要用到的图片。
步骤2：轮到前端工程师出场, 我在vue中用法：
//1、 安装
npm install lottie-web -S
// 2、引入，你可以二选一 引入 lottie 或者lottie_light，lottie_light文件小点
// 我这里只引入了lottie_light，只能用svg方式去做动画
import Vue from 'vue'
import lottie from 'lottie-web/build/player/lottie_light' // lottie_light只能用svg做动画；参数 renderer: 'svg'
// import lottie from 'lottie-web/build/player/lottie' // lottie可以用svg、canvas、 html做动画；参数 renderer: 'svg'|| 'canvas || 'html',
Vue.prototype.$lottie = lottie //挂载到vue原型上,方便全局使用
// 3、在.vue组件中
<template>
<div id="animate2"></div>
</template>
<script type="text/ecmascript-6">
mounted() {
this.$_initAnimation() // 要在mounte以后才能实例化动画，不然报错。
},
methods: {
$_initAnimation() {
this.$_animation = this.$lottie.loadAnimation({
container: document.getElementById('animate2'),
renderer: 'svg', // 由于我引入的是lottie_light，所以这里只能用svg渲染，如果你引入lottie，还可选canvas、html渲染。
loop: true, // 是否循环播放
autoplay: true, //是否自动播放
path: '/animation/data.json' // json文件的路径，记住步骤1导出的data.json和images文件夹要在同级目录里面
})
},
playAnimation() {
this.$_animation.play()
},
stopAnimation() {
this.$_animation.stop()
}
},
destroyed() {
this.$_animation.destroy()
}
</script>
