landn172 / lottie-miniapp Goto Github PK

View Code? Open in Web Editor NEW

250.0 5.0 29.0 2.18 MB

lottie mniapp 小程序

JavaScript 98.83% HTML 0.30% Vue 0.28% SCSS 0.59%

lottie lottie-miniapp canvas miniapp

lottie-miniapp's People

Contributors

Stargazers

Watchers

lottie-miniapp's Issues

HTMLCanvasView is not defined请问现在有解吗

bug描述
HTMLCanvasView is not defined

截图

npm构建后，引入lottie-miniapp 有报错 module "pages/index/lottie-miniapp" is not defined

bug描述
npm i 安装 lottie-miniapp 后，再使用微信小程序的构建npm 。
pages/index/index.js 中

import lottie from 'lottie-miniapp';

截图
Console 有报错：
module "pages/index/lottie-miniapp" is not defined
If applicable, add screenshots to help explain your problem.

这里项目设置：

但引用其他 npm 包是没有问题，这里应该怎么操作呢？

微信小程序测试后报错

我就按照npm构建，然后使用下面的wxml引用lottie组件。

后面就一连串报错, 想上传图片但是一直不成功。所以只好贴上报错码，先谢谢了！

VM309:1 appServiceSDKScriptError
Cannot read property 'wxWebviewId' of undefined; at wx.createIntersectionObserver
TypeError: Cannot read property 'wxWebviewId' of undefined
at new r (WAService.js:1:740368)
at xl (WAService.js:1:741534)
at Object.createIntersectionObserver (WAService.js:1:1022381)
at Object. (WAService.js:1:409592)
at Object. (WAService.js:1:1027729)
at Function. (WAService.js:1:1027859)
at Object.createIntersectionObserver (WAService.js:1:395616)
at e.value (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/index.js:4204:21)
at t.value (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/index.js:4342:74)
at ye.init (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/component/lottie.js:57:37)
console.error @ VM309:1
errorReport @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
value @ index.js:1
value @ index.js:1
init @ lottie.js:55
observer @ lottie.js:22
r.safeCallback @ WAService.js:1
(anonymous) @ WAService.js:1
i.doUpdates @ WAService.js:1
a @ WAService.js:1
e @ WAService.js:1
e @ WAService.js:1
value @ WAService.js:1
x._advancedCreate @ WAService.js:1
x.create @ WAService.js:1
(anonymous) @ WAService.js:1
Fe @ WAService.js:1
value @ WAService.js:1
Ct @ WAService.js:1
(anonymous) @ WAService.js:1
At @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
i.emit @ WAService.js:1
emit @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
n @ appservice?t=1564318487026:1555
(anonymous) @ appservice?t=1564318487026:1555
(anonymous) @ appservice?t=1564318487026:1555
_ws.onmessage @ appservice?t=1564318487026:1555
Show 3 more frames
VM309:1 thirdScriptError
Cannot read property 'relativeToViewport' of undefined; [Component] Property Observer Error @ miniprogram_npm/lottie-miniapp/component/lottie#observer
TypeError: Cannot read property 'relativeToViewport' of undefined
at e.value (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/index.js:4204:71)
at t.value (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/index.js:4342:74)
at ye.init (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/component/lottie.js:57:37)
at ye.observer (http://127.0.0.1:47614/appservice/miniprogram_npm/lottie-miniapp/component/lottie.js:24:14)
at Function.r.safeCallback (WAService.js:1:1035130)
at n. (WAService.js:1:1125929)
at i.doUpdates (WAService.js:1:1141065)
at a (WAService.js:1:1196183)
at e (WAService.js:1:1178098)
at e (WAService.js:1:1178229)

更新了最新的版本号动画在手机上显示不出来在微信开发者工具上是好的没更新之前是好的

bug描述
更新了最新的版本号动画在手机上显示不出来在微信开发者工具上是好的没更新之前是好的

复现过程
这一张是开发者工具所展示

这一张是手机上所显示

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

在uniapp编译微信小程序中使用变量进行存储这个会抛出TypeError: Converting circular structure to JSON错误但是可以使用希望能解决这个问题。谢谢

bug描述
按照说明进行使用时得到错误TypeError: Converting circular structure to JSON

复现过程
1、正常获取canvas对象
2、在data中定义变量初始化容器后并赋值给定义变量
3、得到错误

期望
希望解决这个错误

截图
If applicable, add screenshots to help explain your problem.

错误设备信息
uniapp版本2.0.0-23320190923002
微信开发者工具 1.02.1909292
node 12.7.0

I need you Help pls contact me

抱歉没有找到你的邮箱……(⊙﹏⊙)b
方便的时候请联系我，+wx：alalong
or
[email protected]
谢谢！

此贴请阅后即焚
@ALL 抱歉打扰了

调试工具上能显示，真机不显示。真机要打开调试工具才显示是什么个情况？

调试工具上能显示，真机不显示。真机上要打开调试才显示是什么个情况？

带有蒙版的json显示又问题

loading.json.zip

bug描述
A clear and concise description of what the bug is.

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

PropertyFactory.js关键帧取值错误导致脚本执行报错

bug描述
关键帧取值错误导致脚本执行报错

// src/lottie/utils/PropertyFactory.js at line 162
keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (keyData.e[i] - keyData.s[i]) * perc;

对比官方lottie-web中的PropertyFactory.js发现：

>>> endValue = nextKeyData.s || keyData.e;
keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc;

截图
报错信息如下：

错误设备信息

Device: 微信开发者工具
OS: MacOS

哥

老铁，那个.json.js文件是怎么生成的

请问支持位图么。我的这个json

bug描述
A clear and concise description of what the bug is.

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

uni-app导入报错

API getFileSystemManager is not yet implemented

小程序使用时间长会显示 base64报错

bug描述
小程序使用时间长会显示 base64报错
因为有几种不同的动画进行切换加载不同的动画会产生图片缓存

麻烦有时间帮忙看一下谢谢

复现过程
反复加载lottie动画时候会产生

期望
A clear and concise description of what you expected to happen.

截图

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

通过wepy组件引入报错

如题, 按照作者的说法通过wepy引入方式提示如下错误

Cannot read property 'length' of undefined;at pages/payBill/index page lifeCycleMethod onShow function
TypeError: Cannot read property 'length' of undefined
    at s.value (http://127.0.0.1:29877/appservice/utils/lottie-miniapp.min.js:3861:468)
    at e.value (http://127.0.0.1:29877/appservice/utils/lottie-miniapp.min.js:4102:141)
    at e.value (http://127.0.0.1:29877/appservice/utils/lottie-miniapp.min.js:4075:628)
    at t.value (http://127.0.0.1:29877/appservice/utils/lottie-miniapp.min.js:4212:74)
    at _class.onShow (http://127.0.0.1:29877/appservice/pages/payBill/index.js:123:34)
    at http://127.0.0.1:29877/appservice/npm/wepy/lib/base.js:193:48
    at Array.forEach (<anonymous>)
    at t.exports.default.$createPage.config.onShow (http://127.0.0.1:29877/appservice/npm/wepy/lib/base.js:192:43)
    at t.<anonymous> (http://127.0.0.1:29877/appservice/__dev__/WAService.js:19:31844)
    at Xt (http://127.0.0.1:29877/appservice/__dev__/WAService.js:20:17023)

用官方web的data.jason测试效果不如人意

https://img-asset.chemm.com/test/lottie-demo/happy2016/data.json
效果为
https://img-asset.chemm.com/test/lottie-demo/happy2016/index.html

https://img-asset.chemm.com/test/lottie-demo/navidad/data.json
效果为
https://img-asset.chemm.com/test/lottie-demo/navidad/index.html

但是小程序上面全部变形了

怎么运行

你这采用什么框架么？不是普通小程序么？

请问一下如何处理含有文字的lottie json？

目前会报错：Cannot read property 'getFontByName' of undefined;at index/index page lifeCycleMethod onReady function
TypeError: Cannot read property 'getFontByName' of undefined
json在：https://share.weiyun.com/51NlW1l

在很多安卓机器上滑动的时候好卡，去掉动画就没有卡顿问题

在很多安卓机器上滑动的时候好卡，去掉动画就没有卡顿问题。特别是配置不是很好的机器上，有什么可以优化的吗？

请教下真机不报错但不显示，模拟器中可以显示是什么问题

bug描述
真机（安卓、ios）不报错但不显示，模拟器中可以显示
查看canvasContext在真机和模拟器中的值，真机中没有_context属性，如下图：

加载时候会不定时的出现解析动画小bug

bug描述
进入动画所在页面之后然后进入其他页面之后再返回动画页面会产生动画变大然后有时候在网络不好的情况下会卡死的错误

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

CanvasContext 的一些 setXXX 方法已经不被支持，现在使用兼容web的写法

如上

引用本地的JSON不生效，path可否支持本地JSON文件

bug描述
A clear and concise description of what the bug is.

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
希望path支持引用本地JSON，缩短请求造成的时间延迟（微信官方说4月会放出重构的Canvas，或许渲染会比之前的好，作者大大加油鸭~）

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6s]
OS: [e.g. iOS12]

支持wepy框架，封装npm使用

能否将项目封装成能给 wepy 框架使用的npm包吗，类似vue中的vue-lottie

请问怎么在uniapp中使用

有没有例子

使用本地数据时报出 downloadFile:fail

name: downloadFile:fail
about:

bug描述
使用animationData本地数据未填写path，报出很多错误

截图

错误设备信息

Device: [华为p10]

如何得到一个透明背景而不是黑色？

引入后小程序分包增加256k，不知道有没有可去的冗余代码，不然这个库太大了

bug描述
A clear and concise description of what the bug is.

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

手机熄屏再亮屏，动画就不播放了？

bug描述
使用该库在小程序中做动画，熄屏后，再亮屏，动画是停止播放的状态。

期望
熄屏再亮屏，动画持续在播放。

错误设备信息
Android和iOS都能出现。

提交的附件为动画json文件，请把后缀改成.json
data.txt

动画在安卓和ios上都不显示了更新了最新的版本号

bug描述
A clear and concise description of what the bug is.

复现过程
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

期望
A clear and concise description of what you expected to happen.

截图
If applicable, add screenshots to help explain your problem.

错误设备信息

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

base64图片读取失败&本地资源图片打包后路径错误

bug描述
注：我使用的是uni-app混合开发
1.犸良上面打包下载的json文件中包含base64图片资源，在编译到小程序端的时候使用正常，编译到APP的时候会报错，显示读取写入base64资源失败；
2.json文件中包含本地图片路径，u参数写的是相对目录，p参数写的是文件名称，编译后会按实际生成的页面page文件的位置相对定位，而不是json文件的位置相对定位（导出的json文件是按该文件位置定位的引入图片），目前我的处理方式是：u参数为空，p参数为图片的绝对路径，可以正常运行，不确定这个是不是bug，还是说我处理的方式不对。
代码参考：@zc95 ： https://github.com/zc95/uni-app-lottie

期望
希望可以优化支持base64图片编码，或者是有方案处理下犸良导出的文件。

截图

错误设备信息

Device: iPhone7
OS: iOS12.4.1
Version lottie-miniapp： 1.8.8

npm run build:debug执行后报错

bug描述
npm run build:debug执行后报错

错误设备信息
fs.js:27
const { Math, Object } = primordials;
ReferenceError: primordials is not defined

为何我直接运行example报错要怎么运行

截图

实机显示不出来？请问是怎么解决的呢？

您好，我们刚刚试了一下发现在编译器中是能显示的，但是实机就静止了

请问支持位图么？多图片是否显示有问题。

json: https://ddpicture.oss-cn-shenzhen.aliyuncs.com/1565782313691_bubble.json
不显示呢.请问是json问题还是我使用上的问题么.也没有错误信息提示.

大佬支付宝小程序怎么使用啊

把一些周期替换后提示 Cannot read property 'length' of undefined

base64图片时不行

老铁，json文件中有base64图片时不行

container.addDynamicProperty is not a function

bug描述

VM586:1 thirdScriptError
container.addDynamicProperty is not a function;at "pages/home/home/home" page lifeCycleMethod onLoad function
TypeError: container.addDynamicProperty is not a function
    at PropertyFactory.GetProp.descriptor.value (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:7345:17)
    at new SliderEffect (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:8201:30)
    at GroupEffect.init (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:8260:15)
    at new GroupEffect (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:8233:8)
    at new EffectsManager (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:8226:18)
    at CVShapeElement.initBaseData (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:9491:29)
    at CVShapeElement.initElement (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:12431:12)
    at new CVShapeElement (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:12423:11)
    at CVCompElement.createShape (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:14829:14)
    at CVCompElement.createItem (http://127.0.0.1:26859/appservice/js/lottie/lottie-miniapp.js:868:23)

复现过程

// onload
var context = wx.createCanvasContext('home-canvas');//还记得 在wxml里面canvas的id叫first吗
    context.canvas = {
      width: app.systemInfo.windowWidth,
      height: app.systemInfo.windowHeight
    };

    lottie.loadAnimation({
      renderer: 'canvas', // 只支持canvas
      loop: true,
      autoplay: true,
      animationData: NormalAnimationData,
      rendererSettings: {
        context: context,
        clearCanvas: true
      }
    });

期望

截图

错误设备信息

Device: 模拟器调试

支持多平台

@landn172 在taro中使用各个小程序都应该适配吧？

Originally posted by @liuyunzyj in #24 (comment)

通过canvas渲染后如何修改对象的位置 postion

就是在小程序中通过canvas渲染之后获取到这个对象可以修改对象的一些属性比如position scale opacity width height rotate等
注意不是对canvas进行操作是对渲染对对象进行操作

在uni-app 中出现错误

在微信开发者工具中出现 Cannot read property 'replace' of null
在手机在上则是出现 Cannot read property 'indexOf' of undefined

而且手机上动画位置出现偏移整个动画偏移到右下角
有人遇见过这个问题吗？请问该如何解决

配置JSON在这
http://cdn.biglao.cn/images/1560142567371_data.json

使用这个JSON就没问题
https://github.com/airbnb/lottie-web/blob/master/demo/gatin/data.json

请问下对应的api有哪些呢

需要关闭动画，开始下一个动画。能否先加载动画图片资源，在需要播放的时候播放呢

是否可以支持 Taro 框架？

试了下在 Taro 中使用，可能由于usingComponents 配置错误，无法运行

downloadFile:fail

加载本地的lottie动画json文件，不填写path每次都会提示downloadFile:fail createDownloadTask:fail url not in domain list

uni-app下可以使用，但h5有报错（不影响使用）

bug描述

uni-app编译之后h5端运行报错

[system] API getFileSystemManager is not yet implemented
[system] TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

复现过程