建设网站的公司兴田德润实力强,企业为什么要创新,wordpress主题添加授权,网站游戏网站开发设计菲律宾uniapp中使用lottie实现JSON动画 不喜欢废话直接开干一、引入相关依赖二、在项目的目录新建目录结构三、操作步骤四、编写自定义组件代码五、组件的使用提一嘴更多lottie-web常用方法添加点击事件 不喜欢废话直接开干
一、引入相关依赖
npm install lottie-web
# 如果有问题可… uniapp中使用lottie实现JSON动画 不喜欢废话直接开干一、引入相关依赖二、在项目的目录新建目录结构三、操作步骤四、编写自定义组件代码五、组件的使用提一嘴更多lottie-web常用方法添加点击事件 不喜欢废话直接开干
一、引入相关依赖
npm install lottie-web
# 如果有问题可以和我保持一致npm install lottie-web5.12.2二、在项目的目录新建目录结构
存放资源的目录用于存放JSON动画/static/svgJson/*用于存放动画组件的目录/components/SvgAnimation/*
三、操作步骤
在一些素材网站上下载我们需要的JSON素材或者直接找UI给你
比如我们熟知的iconfon
下载后我们会得到一个.json的文件我们把它放在资源目录下比如/static/svgJson/start.json
在存放动画组件中新增一个自定义组件就比如/components/SvgAnimation/start.vue
四、编写自定义组件代码
模板代码如下
templateview classcontainer-startview idstart/view/view
/templatescript modulerenderScript langrenderjs
import lottie from lottie-web
import start from ../../static/svgJson/start.json;
export default {mounted() {this.ready()},methods: {ready() {lottie.loadAnimation({container: document.getElementById(start),renderer: svg,loop: true,autoplay: true, animationData: start }); }}
};
/scriptstyle
/* 这里可以自己定义相关的样式这里只是做个示范具体按照界面而定 */
.container-start {width: 50%;
}
#start {width: 100%;
}
/style须知代码中的start可以替换成自己保存的JSON文件 打个比方就是我下载了一个名字叫end.json文件我就在/components/SvgAnimation目录下新增一个end.vue 然后使用快捷键ctrlh然后将模板中的start单词全部替换成end即可 五、组件的使用
在页面中引入组件直接使用即可
import More from ../../components/SvgAnimation/more.vue# 在界面中使用
More/More提一嘴
由于比较懒而且项目中使用的也不是太多所以并没有进行封装。
一方面由于使用了renderjs封装起来也不是一件短时间就能完成的事情涉及到uniapp的视图层和逻辑层的数据交互更多的是没有机会去深入研究。
另一方面也就是拿着模板代码直接替换一个名称也就是一会的事情。
如果有大佬有封装的代码那更好不过了
更多
lottie-web常用方法 animation.play(); // 播放该动画从目前停止的帧开始播放 animation.stop(); // 停止播放该动画回到第0帧 animation.pause(); // 暂停该动画在当前帧停止并保持 animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒) animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放 animation.goToAndStop(30, true); // 跳转到第30帧并停止 animation.goToAndPlay(300); // 跳转到第300毫秒并播放 animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组forceFlag表示是否立即强制播放该片段 animation.playSegments([10,20], false); // 播放完之前的片段播放10-20帧 animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧 animation.setSpeed(speed); // 设置播放速度speed为1表示正常速度 animation.setDirection(direction); // 设置播放方向1表示正向播放-1表示反向播放 animation.destroy(); // 删除该动画移除相应的元素标签等。在unmount的时候需要调用该方法 添加点击事件
templateview classcontainerview idhome/view/view
/templatescript modulerenderScript langrenderjs
import lottie from lottie-web
import home from ../../static/svgJson/home.json;
export default {data(){return {animation: null}},mounted() {this.ready()this.addClickEvent()},methods: {ready() {this.animation lottie.loadAnimation({container: document.getElementById(home),renderer: svg,loop: false, //是否循环播放autoplay: true, //是否自动播放animationData: home // 加载json的文件名}); // 加载this.animation.goToAndStop(55,true)},addClickEvent(){document.getElementById(home).addEventListener(click,(){this.animation.playSegments([10,65],true)})}},beforeDestroy() {document.getElementById(home).removeEventListener(click,(){})}
};
/script界面中给组件添加点击事件
Home click.nativeclickSvg/Home结尾更多的操作由各位去发掘吧
