@eva/plugin-renderer-lottie 2.0.1-beta.3 → 2.0.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EVA.plugin.renderer.lottie.js +29 -59
- package/dist/EVA.plugin.renderer.lottie.min.js +1 -1
- package/dist/plugin-renderer-lottie.cjs.js +27 -55
- package/dist/plugin-renderer-lottie.cjs.prod.js +1 -1
- package/dist/plugin-renderer-lottie.d.ts +1 -0
- package/dist/plugin-renderer-lottie.esm.js +32 -60
- package/package.json +3 -3
|
@@ -62,6 +62,7 @@ export declare class LottieSystem extends Renderer {
|
|
|
62
62
|
init(): void;
|
|
63
63
|
componentChanged(changed: ComponentChanged): Promise<void>;
|
|
64
64
|
add(changed: ComponentChanged): Promise<void>;
|
|
65
|
+
getDir(url: string): string;
|
|
65
66
|
remove(changed: ComponentChanged): void;
|
|
66
67
|
}
|
|
67
68
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { decorators, OBSERVER_TYPE, resource, Component } from '@eva/eva.js';
|
|
2
2
|
import { Renderer } from '@eva/plugin-renderer';
|
|
3
|
-
import { UPDATE_PRIORITY, Ticker, Container, Texture
|
|
3
|
+
import { UPDATE_PRIORITY, Ticker, Container, Texture, Graphics, Matrix as Matrix$1, Sprite, Assets, Text, TextStyle } from 'pixi.js';
|
|
4
4
|
import iOSVersion from 'ios-version';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
@@ -10557,8 +10557,6 @@ function createSizedArray(len) {
|
|
|
10557
10557
|
return Array.apply(null, { length: len });
|
|
10558
10558
|
}
|
|
10559
10559
|
|
|
10560
|
-
window.$commands = [];
|
|
10561
|
-
|
|
10562
10560
|
class MatrixHelper extends Matrix$1 {
|
|
10563
10561
|
reset() {
|
|
10564
10562
|
// 重置为单位矩阵
|
|
@@ -11089,18 +11087,17 @@ class SpriteElement extends Sprite {
|
|
|
11089
11087
|
* @param {object} config layer data information
|
|
11090
11088
|
*/
|
|
11091
11089
|
constructor(lottieLayer, imageInfo) {
|
|
11092
|
-
const {
|
|
11093
|
-
super(
|
|
11090
|
+
const { texture: texturePromise } = imageInfo;
|
|
11091
|
+
super();
|
|
11094
11092
|
this.label = lottieLayer.fullname;
|
|
11095
11093
|
|
|
11096
|
-
|
|
11097
|
-
|
|
11098
|
-
|
|
11099
|
-
|
|
11100
|
-
|
|
11101
|
-
|
|
11094
|
+
texturePromise
|
|
11095
|
+
.then(texture => {
|
|
11096
|
+
this.texture = texture;
|
|
11097
|
+
})
|
|
11098
|
+
.catch(e => {
|
|
11099
|
+
console.error(e);
|
|
11102
11100
|
});
|
|
11103
|
-
}
|
|
11104
11101
|
|
|
11105
11102
|
this.lottieLayer = lottieLayer;
|
|
11106
11103
|
|
|
@@ -11173,32 +11170,6 @@ class SpriteElement extends Sprite {
|
|
|
11173
11170
|
}
|
|
11174
11171
|
}
|
|
11175
11172
|
|
|
11176
|
-
class BaseTexture extends EventEmitter {
|
|
11177
|
-
constructor(url) {
|
|
11178
|
-
super();
|
|
11179
|
-
this.texture = Texture$1.EMPTY;
|
|
11180
|
-
this.img = new Image();
|
|
11181
|
-
this.img.src = url;
|
|
11182
|
-
this.img.onload = () => {
|
|
11183
|
-
this.texture = Texture$1.from(this.img);
|
|
11184
|
-
this.emit('loaded');
|
|
11185
|
-
};
|
|
11186
|
-
this.img.onerror = () => {
|
|
11187
|
-
this.emit('error');
|
|
11188
|
-
};
|
|
11189
|
-
}
|
|
11190
|
-
}
|
|
11191
|
-
|
|
11192
|
-
class Texture {
|
|
11193
|
-
constructor(url) {
|
|
11194
|
-
this.baseTexture = new BaseTexture(url);
|
|
11195
|
-
}
|
|
11196
|
-
|
|
11197
|
-
static from(url) {
|
|
11198
|
-
return new Texture(url);
|
|
11199
|
-
}
|
|
11200
|
-
}
|
|
11201
|
-
|
|
11202
11173
|
const regHttp = /^(https?:)?\/\//;
|
|
11203
11174
|
|
|
11204
11175
|
/**
|
|
@@ -11254,25 +11225,20 @@ class LoadTexture extends Eventer {
|
|
|
11254
11225
|
this.assets.forEach(asset => {
|
|
11255
11226
|
const id = asset.id;
|
|
11256
11227
|
const url = createUrl(asset, this.prefix);
|
|
11257
|
-
const
|
|
11258
|
-
this.textures[id] =
|
|
11228
|
+
const texturePromise = Assets.load(url);
|
|
11229
|
+
this.textures[id] = texturePromise;
|
|
11259
11230
|
this._total++;
|
|
11260
|
-
|
|
11261
|
-
|
|
11262
|
-
this.emit('update');
|
|
11263
|
-
if (this._received + this._failed >= this._total) this._onComplete();
|
|
11264
|
-
} else {
|
|
11265
|
-
texture.baseTexture.once('loaded', () => {
|
|
11231
|
+
texturePromise
|
|
11232
|
+
.then(() => {
|
|
11266
11233
|
this._received++;
|
|
11267
11234
|
this.emit('update');
|
|
11268
11235
|
if (this._received + this._failed >= this._total) this._onComplete();
|
|
11269
|
-
})
|
|
11270
|
-
|
|
11236
|
+
})
|
|
11237
|
+
.catch(e => {
|
|
11271
11238
|
this._failed++;
|
|
11272
11239
|
this.emit('update');
|
|
11273
11240
|
if (this._received + this._failed >= this._total) this._onComplete();
|
|
11274
11241
|
});
|
|
11275
|
-
}
|
|
11276
11242
|
});
|
|
11277
11243
|
}
|
|
11278
11244
|
|
|
@@ -12284,11 +12250,11 @@ class AnimationGroup extends Eventer {
|
|
|
12284
12250
|
* @param {*} image url | texture
|
|
12285
12251
|
* @return {this}
|
|
12286
12252
|
*/
|
|
12287
|
-
replaceImageByQuerySelector(selector, image = Texture
|
|
12253
|
+
replaceImageByQuerySelector(selector, image = Texture.EMPTY) {
|
|
12288
12254
|
const layerDisplay = this.getDisplayByQuerySelector(selector);
|
|
12289
12255
|
if (layerDisplay && layerDisplay.isSprite) {
|
|
12290
12256
|
const texture =
|
|
12291
|
-
typeof image === 'string' ? Texture
|
|
12257
|
+
typeof image === 'string' ? Texture.from(image, { resourceOptions: { crossorigin: '*' } }) : image;
|
|
12292
12258
|
layerDisplay.texture = texture;
|
|
12293
12259
|
}
|
|
12294
12260
|
return this;
|
|
@@ -12301,7 +12267,7 @@ class AnimationGroup extends Eventer {
|
|
|
12301
12267
|
* @param {*} image url | texture or array[url | texture]
|
|
12302
12268
|
* @return {this}
|
|
12303
12269
|
*/
|
|
12304
|
-
replaceImageByQuerySelectorAll(selector, image = [Texture
|
|
12270
|
+
replaceImageByQuerySelectorAll(selector, image = [Texture.EMPTY]) {
|
|
12305
12271
|
const layers = this.querySelectorAll(selector);
|
|
12306
12272
|
const isArrImage = Tools.isArray(image);
|
|
12307
12273
|
layers.forEach((layer, idx) => {
|
|
@@ -12310,7 +12276,7 @@ class AnimationGroup extends Eventer {
|
|
|
12310
12276
|
const imageItem = isArrImage ? image[idx] : image;
|
|
12311
12277
|
const texture =
|
|
12312
12278
|
typeof imageItem === 'string'
|
|
12313
|
-
? Texture
|
|
12279
|
+
? Texture.from(imageItem, { resourceOptions: { crossorigin: '*' } })
|
|
12314
12280
|
: imageItem;
|
|
12315
12281
|
layerDisplay.texture = texture;
|
|
12316
12282
|
}
|
|
@@ -12876,7 +12842,7 @@ class AnimationManager extends Eventer {
|
|
|
12876
12842
|
}
|
|
12877
12843
|
}
|
|
12878
12844
|
|
|
12879
|
-
const { major } = iOSVersion(
|
|
12845
|
+
const { major } = iOSVersion(globalThis.navigator.userAgent) || {};
|
|
12880
12846
|
|
|
12881
12847
|
/**
|
|
12882
12848
|
* dataURL 转成 blob
|
|
@@ -12962,14 +12928,16 @@ let LottieSystem = class LottieSystem extends Renderer {
|
|
|
12962
12928
|
if (!container)
|
|
12963
12929
|
return;
|
|
12964
12930
|
const _a = component.options, { resource: rn } = _a, otherOpts = __rest(_a, ["resource"]);
|
|
12965
|
-
const
|
|
12931
|
+
const res = yield resource.getResource(rn);
|
|
12932
|
+
const data = res.data;
|
|
12933
|
+
const url = res.src.json.url;
|
|
12966
12934
|
const json = Object.assign({}, (data.json || {}));
|
|
12967
12935
|
const assets = json.assets || [];
|
|
12968
12936
|
assets.forEach(item => {
|
|
12969
12937
|
if (item.p)
|
|
12970
12938
|
item.p = imageHandle(item.p);
|
|
12971
12939
|
});
|
|
12972
|
-
const anim = this.manager.parseAnimation(Object.assign({ keyframes: json }, otherOpts));
|
|
12940
|
+
const anim = this.manager.parseAnimation(Object.assign({ keyframes: json, prefix: this.getDir(url) }, otherOpts));
|
|
12973
12941
|
component.anim = anim;
|
|
12974
12942
|
container.addChildAt(anim.group, 0);
|
|
12975
12943
|
this.managerLife.forEach(eventName => {
|
|
@@ -12979,6 +12947,9 @@ let LottieSystem = class LottieSystem extends Renderer {
|
|
|
12979
12947
|
component.emit('success', {});
|
|
12980
12948
|
});
|
|
12981
12949
|
}
|
|
12950
|
+
getDir(url) {
|
|
12951
|
+
return new URL('./', url).href;
|
|
12952
|
+
}
|
|
12982
12953
|
remove(changed) {
|
|
12983
12954
|
const component = changed.component;
|
|
12984
12955
|
const container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
|
|
@@ -13031,7 +13002,10 @@ class Lottie extends Component {
|
|
|
13031
13002
|
this.currentSlot[name] = Sprite.from(value);
|
|
13032
13003
|
}
|
|
13033
13004
|
else if (type === 'TEXT') {
|
|
13034
|
-
this.currentSlot[name] = new Text(
|
|
13005
|
+
this.currentSlot[name] = new Text({
|
|
13006
|
+
text: value,
|
|
13007
|
+
style: new TextStyle(style),
|
|
13008
|
+
});
|
|
13035
13009
|
}
|
|
13036
13010
|
if (x)
|
|
13037
13011
|
this.currentSlot[name].x = x;
|
|
@@ -13066,9 +13040,7 @@ class Lottie extends Component {
|
|
|
13066
13040
|
this.on('success', () => {
|
|
13067
13041
|
const ele = this.anim.querySelector(name);
|
|
13068
13042
|
const display = ele.display;
|
|
13069
|
-
g.
|
|
13070
|
-
g.drawRect(0, 0, 100, 100);
|
|
13071
|
-
g.endFill();
|
|
13043
|
+
g.rect(0, 0, 100, 100).fill(0xffffff);
|
|
13072
13044
|
g.alpha = 0;
|
|
13073
13045
|
display.addChild(g);
|
|
13074
13046
|
ele.display.interactive = true;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-lottie",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.4",
|
|
4
4
|
"description": "@eva/plugin-renderer-lottie",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-lottie.esm.js",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@eva/eva.js": "2.0.1-beta.
|
|
22
|
-
"@eva/plugin-renderer": "2.0.1-beta.
|
|
21
|
+
"@eva/eva.js": "2.0.1-beta.4",
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1-beta.4",
|
|
23
23
|
"ios-version": "^1.0.1",
|
|
24
24
|
"pixi.js": "^8.8.1"
|
|
25
25
|
}
|