Vue轮子-Lottie-动画实现

不要问为什么没有为什么。浮躁的7月首周。Keep Going And Stay Strong。

Lottie是一个IOS，Android和React Native库，可以实时渲染动画，动画被转化成JSON文件，节省了很多资源，允许应用程序像使用静态图像一样轻松使用动画，主要是展示型的动画，交互的不太好实现。网上也有丰富的动画资源，点此进入LottieFiles，里面可以直接下载JSON格式的动画文件，很炫酷。还有可以自己编辑Lottie动画的工具LottieEditor。

这里主要讲Vue项目里使用Lottie，简单封装一个展示动画的通用组件，原生的不太会搞，然后还搜了一下原理，没看懂。

上图。

1.vue-lottie安装

npm install --save vue-lottie

2. 简单封装

<template><div ref="lavContainer"></div>
</template><script lang="ts">
import { Component, Ref, Vue, Prop, Emit } from "vue-property-decorator";
import lottie from "lottie-web";@Component
export default class Lottie extends Vue {@Prop() options!: any;@Ref() readonly lavContainer!: HTMLElement;anim!: Object;mounted() {this.anim = lottie.loadAnimation({container: this.lavContainer,renderer: "svg",loop: true,autoplay: true,animationData: this.options.animationData,rendererSettings: this.options.rendererSettings});this.$emit("animCreated", this.anim);}
}
</script>

3.使用

里面加了停止stop() 播放play() 暂停pause() 方法，并且可以设置动画速度。
animationData 是动画的Json格式。

<template><div><Lottiev-if="show":options="defaultOptions"style="width:200px;"v-on:animCreated="handleAnimation"/><div @click="switchLottie">点击开始</div><div v-if="show"><p>Speed: x{{ animationSpeed }}</p><inputtype="range"value="1"min="0"max="3"step="0.5"@change="onSpeedChange"v-model="animationSpeed"/><br /><button @click="stop">stop</button><button @click="pause">pause</button><button @click="play">play</button></div></div>
</template><script lang="ts">
import { Component, Ref, Vue, Provide } from "vue-property-decorator";
import Lottie from "./Lottie.vue";
import animationData from "@/assets/gif/loader.json";@Component({components: { Lottie }
})
export default class Test extends Vue {defaultOptions = { animationData: animationData };animationSpeed: number = 1;anim?: any;show = false;switchLottie() {this.show = !this.show;}handleAnimation(a: object) {this.anim = a;}stop() {this.anim.stop();}play() {this.anim.play();}pause() {this.anim.pause();}onSpeedChange() {this.anim.setSpeed(this.animationSpeed);}
}
</script>

Vue轮子-Lottie-动画实现相关推荐

在vue添加lottie动画
在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 2.全局引入vue-lottie 在main.js引入并注册全局组件 ...
在VUE中使用Lottie动画
Lottie简介官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
在vue里使用Lottie动画（实现 json 格式的动画）
一.Lottie简介与作用 Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web.ios.android和react native.在前端使用,l ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
lottie 动画播放
lottie 动画播放注意: lottie官网: http://airbnb.io/lottie/#/README lottiefiles文件:https://lottiefiles.com/fea ...
vue3 vite lottie动画使用以及注意事项
1.安装 npm i -S lottie-web 2.组件内引入 import lottie from 'lottie-web'; import animateData from './1.json' ...
lottie动画使用
1. 安装 npm i --save vue-lottie 2. main.js 中引入 import Lottie from 'vue-lottie'; Vue.component('lottie' ...
程序员也想改 Lottie 动画？是的！
一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...

Vue轮子-Lottie-动画实现

1.vue-lottie安装

2. 简单封装

3.使用

相关网站：

Vue轮子-Lottie-动画实现相关推荐

最新文章

热门文章