lottie 动画播放
lottie 动画播放
注意：
lottie官网: http://airbnb.io/lottie/#/README
lottiefiles文件:https://lottiefiles.com/featured
一.小程序开发，使用 lottiejs-miniapp 实现 Lottie 动画的播放
参考https://developers.weixin.qq.com/community/develop/article/doc/000e2c86aa0ab058465d67e9452013
1.打开 HBuilderX 工具，新建一个 lottiejs-miniapp-demo 项目：**
2.在命令行窗口执行命令，初始化 npm 项目：
npm install
//或者用yarn
yarn
3.安装 lottiejs-miniapp 组件：
npm i lottiejs-miniapp
//yarn安装--这个命令不太确定
yarn add lottiejs-miniapp
4.安装完 lottiejs-miniapp 组件后，我们可以发现在项目目录下多出了一个 node_modules 文件夹，里面将包含 lottiejs-miniapp
5.程序开发
5.1打开** pages/index/index.vue **文件
5.2.在 中 加入 组件
<template>
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>
</template>
5.3 在 中引入 lottiejs-miniapp ：
import * as lottie from 'lottiejs-miniapp'
5.4 在 export default 中引入 onReady() 并添加如下代码：
说明：
① path (json 线上地址) 执行path: ‘https://assets9.lottiefiles.com/packages/lf20_CZva9peGiW.json’,
②animationData (json本地地址)
如果用本地路径执行 animationData: json
import json from'./active.json'
wx.createSelectorQuery().select('#lottiejs-canvas').fields({node: true,size: true}).exec(res => {const canvas = res[0].node;const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr);lottie.setup(canvas);lottie.loadAnimation({loop: true,autoplay: true,//animationData: json,path: 'https://assets9.lottiefiles.com/packages/lf20_CZva9peGiW.json',//json地址例子rendererSettings: {context: ctx,},});});
二.利用lottie-web实现H5动画效果
参考https://zhuanlan.zhihu.com/p/103666502
1.安装插件
npm install lottie-web
2.在template里写标签
<view class="lottie-web" style="width: 800px height: 600px;"></view>
3.在 中引入 lottie-web ：
import lottieWeb from 'lottie-web';
4.onReady里面使用
lottieWeb.loadAnimation({container:document.querySelector('.lottie-web'),renderer: 'svg',loop: true,autoplay: true,animationData:json,//上面小程序引入过了//path:'',
});
三.H5与miniapp综合
注意如果想要综合使用得结合
// #ifdef MP-WEIXIN
//小程序代码
// #endif
// #ifdef H5
//H5代码
// #endiflottie 动画播放相关推荐
- android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用 一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
- flutter 动画json_Flutter 50: 图解动画小插曲之 Lottie 动画
和尚在一年前整理过一点 Lottie 在 Android 中的应用,现在 Flutter 也有相关的插件帮助我们快速简单的应用场景复杂的 Lottie 动画: 和尚在官网查询之后发现官网推荐了两个开源 ...
- lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
- 在VUE中使用Lottie动画
Lottie简介 官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
- Lottie 动画导出为 GIF/MP4 以及与 QML 集成演示
获取 Lottie 动画文件 lottiefiles 是一个很好的网站, 从上面可以下载到别人分享的 lottie 动画文件. 我们可以下载到多种格式, 下面分别讲解每个格式的下载和适用情景. 下载 ...
- 记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要 最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
- 前端实现lottie动画
前端实现lottie动画 ul通过AE生成的json文件 ,前端通过lottie实现动画简单快捷 <div class="box"></div> 引入 &l ...
- 【Android -- 动画】Lottie 动画的基本使用
一.简介 Lottie 是 Airbnb 开源的一个面向 iOS.Android.React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App ...
- 在vue里使用Lottie动画（实现 json 格式的动画）
一.Lottie简介与作用 Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web.ios.android和react native.在前端使用,l ...
最新文章
- 国内知名 IT 公司前端团队
- $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 区别
- python取三位小数_python保留小数位的三种实现方法
- C/C++将十进制数转为二进制并输出
- 数据库中case when condition then else end的理解
- UIView类绘图出现错误提示
- 命中率极高的 Go 面试题，赶紧收藏！
- SQL Server向表中插入数据
- 开源 Android pdf 阅读器开发总结
- 【w3cschool】C语言复习
- java递推_【Java】递归递推的应用
- Java模拟http上传文件请求（HttpURLConnection,HttpClient4.4,RestTemplate）
- java密码加密方式_我去，同事居然用明文存储密码！！！
- 台式机黑苹果Mac OS Big Sur 11.3.1安装指引
- 如何用 Python 快速开发一个网站
- 语音识别——语言模型
- [生存志] 第145节 班固著汉书
- flink 消费 kafka offset 自动提交
- python入门之python编程语言(简介)
- 电商API接口获取商品详情数据