landn172 / Lottie Miniapp
lottie mniapp 小程序
Stars: ✭ 191
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Lottie Miniapp
React Native Signature Canvas
✒️ React Native Signature Component based WebView Canvas for Android && IOS && expo
Stars: ✭ 169 (-11.52%)
Mutual labels: canvas
Konfetti
Celebrate more with this lightweight confetti particle system 🎊
Stars: ✭ 2,278 (+1092.67%)
Mutual labels: canvas
React Countdown Clock
HTML5 canvas countdown clock React component
Stars: ✭ 182 (-4.71%)
Mutual labels: canvas
Drawingboard.js
A canvas based drawing app that you can integrate easily on your website.
Stars: ✭ 2,072 (+984.82%)
Mutual labels: canvas
Vue Grid Canvas
A vue component, it can generate a similar excel form for you
Stars: ✭ 179 (-6.28%)
Mutual labels: canvas
Online Privacy Test Resource List
Privacy Online Test and Resource Compendium (POTARC) 🕵🏻
Stars: ✭ 185 (-3.14%)
Mutual labels: canvas
Web Study
本仓库是自己总结的前端开发一些基础知识,包括html5,css3, canvas, jQuery, less ,ES6, webpack,Vue等,也包含了一些算法和数据结构方面的练习,同时也记录了自己工作中的踩坑总结,适合想要学习前端开发的伙伴,你可以clone项目到本地,然后一步一步跟着我的demo敲,希望大家都能全栈。
Stars: ✭ 176 (-7.85%)
Mutual labels: canvas
Html5 Canvas Game Boilerplate
Provides a set of default code that makes getting up and running with an HTML5 canvas game very easy.
Stars: ✭ 182 (-4.71%)
Mutual labels: canvas
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (-8.38%)
Mutual labels: canvas
Ribbon.js
🎀 Only 1kb javascript gist to generate a ribbon in your website with HTML5 canvas.
Stars: ✭ 189 (-1.05%)
Mutual labels: canvas
Ae Element
🎨 use bodymovin to render some interesting After Effects vector element
Stars: ✭ 180 (-5.76%)
Mutual labels: lottie
Obelisk.js
Build pixel isometric graphics with HTML5 canvas
Stars: ✭ 2,213 (+1058.64%)
Mutual labels: canvas
Apple Pencil Safari Api Test
Canvas sketch board, force touch, real-time Bezier curve.
Stars: ✭ 189 (-1.05%)
Mutual labels: canvas
Lottie for Miniapp
Lottie 小程序版 LottieWeb
说明
小程序版主要依据 LottieWeb 改写,意在解决需要在小程序上播放 lottie 动画,因为工作需要所以写了这库考虑可能大家有这个需求所以开源出来。
目前支持工作上碰到一些简单的 lottie 动画,对于一些复杂动画可能会出现问题,故欢迎提交 issue 并提供对应的动画 json 以供复现,并在有时间精力的情况下会一一修复(由于小程序和 web 的 canvas 实现会有一定的差异导致某些功能无法实现),也欢迎大家提交 pr。
使用
安装
npm i -S lottie-miniapp
使用
// 指定canvas-id 及 id 需一样
<canvas id="test-canvas" canvas-id="test-canvas"></canvas>
import lottie from "lottie-miniapp";
const canvasContext = wx.createCanvasContext("test-canvas");
// 请求到的lottie json数据
const animationData = {};
// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
const animationPath = "https://xxxxx";
// 指定canvas大小
canvasContext.canvas = {
width: 100,
height: 100,
};
// 如果同时指定 animationData 和 path, 优先取 animationData
lottie.loadAnimation({
renderer: "canvas", // 只支持canvas
loop: true,
autoplay: true,
animationData: animationData,
path: animationPath,
rendererSettings: {
context: canvasContext,
clearCanvas: true,
},
});
Component
(v1.4.0)增加小程序自定义组件
使用
使用小程序自带 npm 安装组件包
{
"usingComponents": {
"lottie": "lottie-miniapp/component/lottie"
}
}
<lottie id="lottie" path="https://xxxxx" width="300" height="300"/>
参数
参数名 | 描述 | 默认值 |
---|---|---|
width | 指定显示宽度 | 100 |
height | 指定显示高度 | 100 |
path | 请求 lottie 的路径。注意开启 downloadFile 域名并且返回格式是 json | null |
animationData | 请求到的 lottie 的 json 数据 | null |
loop | 循环播放 | true |
autoplay | 自动播放 | true |
注意
- canvas 默认样式宽高 100%,需要一个 container 指定宽高
- 如果想要获取
lottie
的实例
Page({
getLottie() {
const lottieComponent = this.selectComponent("#lottie");
// here!
console.log(lottieComponent.lottie);
},
});
[email protected]
[email protected]
起支持 <canvas type=2d />
。初始化和原来有区别。
** 但是目前不推荐使用,可能会碰到许多问题。 **
使用方式
参考官方示例 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
<!-- canvas.wxml -->
<canvas type="2d" id="myCanvas"></canvas>
// canvas.js
import lottie from "lottie-miniapp";
Page({
onReady() {
const query = wx.createSelectorQuery();
query
.select("#myCanvas")
.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.loadAnimation({
renderer: "canvas", // 只支持canvas
loop: true,
autoplay: true,
animationData: animationData,
path: animationPath,
rendererSettings: {
// 这里需要填 canvas
canvas: canvas,
context: canvasContext,
clearCanvas: true,
},
});
});
},
});
调试
yarn run build:debug --watch // 编译文件到example
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].