galacean / engine-lottie Goto Github PK

include shapes and edges, maybe create another shader.

lottie 动画结束，首次调用是生效的。
比如，首次首次调用：
console.log(Date.now());
await lottie.play();
console.log(Date.now());

两次打印的时间，间隔动画的播放时长。

但是第二次调用：
console.log(Date.now());
await lottie.play();
console.log(Date.now());

两次打印的时间无间隔。

create BufferMesh and custom shader for sprite element.

see: https://skottie.skia.org/2bfad571a471470d1827800d7c6206b2?h=800&w=750

0.8 版本引擎优化了渲染顺序，Lottie 需要适配，同时可以把之前的临时方案优化掉。

Play animation clip from specified start frame to end frame.

cc: @yangfengzzz

类似 galacean/engine#1831 这条 PR，开发者需要如何销毁 Lottie 的资源？

A WebGL runtime of lottie based on Oasis Engine -> A WebGL runtime of lottie based on Galacean Engine

Transform assets in Lottie JSON to atlas file

based on shape element

load lottie json and parse original assets to engine assets.

LottieAnimation will destroy all texture but the LottieResource resource will leave in the cache of resource manager. when load the same url again, the cache will work without texture

Now I have to call it by hand:

this._currentEntity.getComponent(LottieAnimation).resource.destroy();
this._currentEntity.destroy();

Lottie File:
data.json.zip

Render in Lottie Web:

Render in Oasis:

淘宝小程序中使用 json格式 ，TypeError: Cannot read property 'load' of undefined

engine.resourceManager.load({ urls: [ "https://gw.alipayobjects.com/os/bmw-prod/b46be138-e48b-4957-8071-7229661aba53.json", "https://gw.alipayobjects.com/os/bmw-prod/6447fc36-db32-4834-9579-24fe33534f55.atlas" ], type: 'lottie' }).then((lottieEntity) => { rootEntity.addChild(lottieEntity); const lottie = lottieEntity.getComponent(LottieAnimation); lottie.isLooping = true; lottie.play(); });

在 Lottie 中，无法在保证 Lottie 内部渲染效果正确的同时保证全局渲染效果正确，下方表示精灵和 Lottie 互相遮挡时的渲染情况，左侧为侧视图视角，右侧为正视图视角

当前表现（Lottie 内部正确，全局错误）

期望表现（Lottie 内部正确，全局正确）

link: galacean/engine#1824

For example, set frame to control the progress of animation

example: layers-in-assets.json.zip

parse layers to lottie-core elements.