先唠唠家常，先检讨一下很久没更新了。因为事情也多了，还因为累了，也因为懒了；只能说是成年人的世界哪里有轻松二字呀；想安静的躺一会儿，想出去转转，想上天也想下地。想要的太多就是我的问题了。
Lottie
Lottie是一个适用于 Android、iOS、Web 和 Windows 的库，它可以解析使用Bodymovin导出为 JSON 的Adobe After Effects动画，并在移动设备和网络上本地呈现它们；具体的你们去他们官网看了
原生使用Lottie
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="lottie" style="width:100px;height:100px"></div>
</body>
</html>
// 引入lottie库
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 这里省略很多东西， 这个就是动画生成的json
var animationJson = {···}
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
animationData: animationJson,
// path: './data.json', // Required
renderer: 'svg', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
VUE2使用
npm install lottie-web
// src/components/pk-lottie/index.vue
<template>
<div ref="lavContainer"
:style="style" />
</template>
<script>
import lottie from 'lottie-web';
export default {
props: {
options: {
type: Object,
required: true
},
height: {
type: Number,
default: null
},
width: {
type: Number,
default: null
}
},
data() {
return {
style: {
width: this.width ? `${this.width}px` : '100%',
height: this.height ? `${this.height}px` : '100%',
overflow: 'hidden'
}
};
},
mounted() {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
animationData: this.options.animationData,
rendererSettings: this.options.rendererSettings
});
this.$emit('animCreated', this.anim);
}
};
</script>
使用方法
<pk-Lottie :width="18" :height="18" :options="lottieOptions" />
\\
lottieOptions: {
animationData: {...json} // 动画导出来的json
}
结束
好了，虽然很这次很水，不过，我真的很想好好睡一觉，过着简简单单的生活。一日三餐
