@eva/plugin-renderer-lottie 2.0.0-beta.1 → 2.0.0-beta.10
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.
|
@@ -17,31 +17,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
17
17
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
18
18
|
and limitations under the License.
|
|
19
19
|
***************************************************************************** */
|
|
20
|
-
/* global Reflect, Promise */
|
|
21
|
-
|
|
22
|
-
var extendStatics = function(d, b) {
|
|
23
|
-
extendStatics = Object.setPrototypeOf ||
|
|
24
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
25
|
-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
26
|
-
return extendStatics(d, b);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
function __extends(d, b) {
|
|
30
|
-
extendStatics(d, b);
|
|
31
|
-
function __() { this.constructor = d; }
|
|
32
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
var __assign = function() {
|
|
36
|
-
__assign = Object.assign || function __assign(t) {
|
|
37
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
38
|
-
s = arguments[i];
|
|
39
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
40
|
-
}
|
|
41
|
-
return t;
|
|
42
|
-
};
|
|
43
|
-
return __assign.apply(this, arguments);
|
|
44
|
-
};
|
|
45
20
|
|
|
46
21
|
function __rest(s, e) {
|
|
47
22
|
var t = {};
|
|
@@ -69,34 +44,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
69
44
|
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
|
|
70
45
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
71
46
|
});
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function __generator(thisArg, body) {
|
|
75
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
76
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
77
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
78
|
-
function step(op) {
|
|
79
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
80
|
-
while (_) try {
|
|
81
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
82
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
83
|
-
switch (op[0]) {
|
|
84
|
-
case 0: case 1: t = op; break;
|
|
85
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
86
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
87
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
88
|
-
default:
|
|
89
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
90
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
91
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
92
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
93
|
-
if (t[2]) _.ops.pop();
|
|
94
|
-
_.trys.pop(); continue;
|
|
95
|
-
}
|
|
96
|
-
op = body.call(thisArg, _);
|
|
97
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
98
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
99
|
-
}
|
|
100
47
|
}
|
|
101
48
|
|
|
102
49
|
function t(t) {
|
|
@@ -5052,11 +4999,10 @@ wt.registerDisplayByType(wt.Type.Solid, G);
|
|
|
5052
4999
|
wt.registerDisplayByType(wt.Type.Sprite, R);
|
|
5053
5000
|
wt.registerDisplayByType(wt.Type.Component, k);
|
|
5054
5001
|
wt.registerDisplayByType(wt.Type.Container, Container);
|
|
5055
|
-
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
_this.managerLife = [
|
|
5002
|
+
let LottieSystem = class LottieSystem extends Renderer {
|
|
5003
|
+
constructor() {
|
|
5004
|
+
super(...arguments);
|
|
5005
|
+
this.managerLife = [
|
|
5060
5006
|
'DisplayReady',
|
|
5061
5007
|
'ImageReady',
|
|
5062
5008
|
'success',
|
|
@@ -5066,145 +5012,122 @@ var LottieSystem = (function (_super) {
|
|
|
5066
5012
|
'enterFrame',
|
|
5067
5013
|
'update',
|
|
5068
5014
|
];
|
|
5069
|
-
return _this;
|
|
5070
5015
|
}
|
|
5071
|
-
|
|
5016
|
+
init() {
|
|
5072
5017
|
this.renderSystem = this.game.getSystem('Renderer');
|
|
5073
5018
|
this.app = this.renderSystem.application;
|
|
5074
|
-
}
|
|
5075
|
-
|
|
5076
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
5077
|
-
|
|
5078
|
-
if (changed.
|
|
5079
|
-
|
|
5080
|
-
this.add(changed);
|
|
5081
|
-
}
|
|
5082
|
-
else if (changed.type === OBSERVER_TYPE.REMOVE) {
|
|
5083
|
-
this.remove(changed);
|
|
5084
|
-
}
|
|
5019
|
+
}
|
|
5020
|
+
componentChanged(changed) {
|
|
5021
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5022
|
+
if (changed.componentName === 'Lottie') {
|
|
5023
|
+
if (changed.type === OBSERVER_TYPE.ADD) {
|
|
5024
|
+
this.add(changed);
|
|
5085
5025
|
}
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
});
|
|
5089
|
-
};
|
|
5090
|
-
LottieSystem.prototype.add = function (changed) {
|
|
5091
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
5092
|
-
var component, container, _a, rn, otherOpts, data, json, assets, anim;
|
|
5093
|
-
return __generator(this, function (_b) {
|
|
5094
|
-
switch (_b.label) {
|
|
5095
|
-
case 0:
|
|
5096
|
-
this.manager = new Gt(this.app);
|
|
5097
|
-
component = changed.component;
|
|
5098
|
-
container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
|
|
5099
|
-
if (!container)
|
|
5100
|
-
return [2];
|
|
5101
|
-
_a = component.options, rn = _a.resource, otherOpts = __rest(_a, ["resource"]);
|
|
5102
|
-
return [4, resource.getResource(rn)];
|
|
5103
|
-
case 1:
|
|
5104
|
-
data = (_b.sent()).data;
|
|
5105
|
-
json = __assign({}, (data.json || {}));
|
|
5106
|
-
assets = json.assets || [];
|
|
5107
|
-
assets.forEach(function (item) {
|
|
5108
|
-
if (item.p)
|
|
5109
|
-
item.p = imageHandle(item.p);
|
|
5110
|
-
});
|
|
5111
|
-
anim = this.manager.parseAnimation(__assign({ keyframes: json }, otherOpts));
|
|
5112
|
-
component.anim = anim;
|
|
5113
|
-
container.addChildAt(anim.group, 0);
|
|
5114
|
-
this.managerLife.forEach(function (eventName) {
|
|
5115
|
-
anim.on(eventName, function (e) { return component.emit(eventName, e); });
|
|
5116
|
-
});
|
|
5117
|
-
if (anim.isImagesLoaded)
|
|
5118
|
-
component.emit('success', {});
|
|
5119
|
-
return [2];
|
|
5026
|
+
else if (changed.type === OBSERVER_TYPE.REMOVE) {
|
|
5027
|
+
this.remove(changed);
|
|
5120
5028
|
}
|
|
5029
|
+
}
|
|
5030
|
+
});
|
|
5031
|
+
}
|
|
5032
|
+
add(changed) {
|
|
5033
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5034
|
+
this.manager = new Gt(this.app);
|
|
5035
|
+
const component = changed.component;
|
|
5036
|
+
const container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
|
|
5037
|
+
if (!container)
|
|
5038
|
+
return;
|
|
5039
|
+
const _a = component.options, { resource: rn } = _a, otherOpts = __rest(_a, ["resource"]);
|
|
5040
|
+
const { data } = yield resource.getResource(rn);
|
|
5041
|
+
const json = Object.assign({}, (data.json || {}));
|
|
5042
|
+
const assets = json.assets || [];
|
|
5043
|
+
assets.forEach(item => {
|
|
5044
|
+
if (item.p)
|
|
5045
|
+
item.p = imageHandle(item.p);
|
|
5121
5046
|
});
|
|
5047
|
+
const anim = this.manager.parseAnimation(Object.assign({ keyframes: json }, otherOpts));
|
|
5048
|
+
component.anim = anim;
|
|
5049
|
+
container.addChildAt(anim.group, 0);
|
|
5050
|
+
this.managerLife.forEach(eventName => {
|
|
5051
|
+
anim.on(eventName, e => component.emit(eventName, e));
|
|
5052
|
+
});
|
|
5053
|
+
if (anim.isImagesLoaded)
|
|
5054
|
+
component.emit('success', {});
|
|
5122
5055
|
});
|
|
5123
|
-
}
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5056
|
+
}
|
|
5057
|
+
remove(changed) {
|
|
5058
|
+
const component = changed.component;
|
|
5059
|
+
const container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
|
|
5127
5060
|
if (container) {
|
|
5128
5061
|
container.removeChild(component.anim.group);
|
|
5129
5062
|
component.anim.destroy();
|
|
5130
5063
|
}
|
|
5131
5064
|
component.anim = null;
|
|
5132
|
-
}
|
|
5133
|
-
|
|
5134
|
-
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5138
|
-
|
|
5139
|
-
|
|
5140
|
-
}(Renderer));
|
|
5065
|
+
}
|
|
5066
|
+
};
|
|
5067
|
+
LottieSystem.systemName = 'LottieSystem';
|
|
5068
|
+
LottieSystem = __decorate([
|
|
5069
|
+
decorators.componentObserver({
|
|
5070
|
+
Lottie: [],
|
|
5071
|
+
})
|
|
5072
|
+
], LottieSystem);
|
|
5141
5073
|
var LottieSystem$1 = LottieSystem;
|
|
5142
5074
|
|
|
5143
|
-
|
|
5144
|
-
|
|
5145
|
-
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5152
|
-
|
|
5153
|
-
|
|
5154
|
-
|
|
5155
|
-
|
|
5156
|
-
|
|
5157
|
-
_this.anim.on(event_1, function (e) { return _this.emit(event_1, e); });
|
|
5158
|
-
};
|
|
5159
|
-
for (var i = ip; i <= op; i++) {
|
|
5160
|
-
_loop_1(i);
|
|
5075
|
+
class Lottie extends Component {
|
|
5076
|
+
constructor(options) {
|
|
5077
|
+
super();
|
|
5078
|
+
this.loadStatus = false;
|
|
5079
|
+
this.firstPlay = null;
|
|
5080
|
+
this.prevSlot = {};
|
|
5081
|
+
this.currentSlot = {};
|
|
5082
|
+
this.options = Object.assign({ autoStart: false }, options);
|
|
5083
|
+
this.on('success', () => {
|
|
5084
|
+
this.loadStatus = true;
|
|
5085
|
+
const { ip, op } = this.anim.keyframes;
|
|
5086
|
+
for (let i = ip; i <= op; i++) {
|
|
5087
|
+
const event = `@${i}`;
|
|
5088
|
+
this.anim.on(event, e => this.emit(event, e));
|
|
5161
5089
|
}
|
|
5162
|
-
|
|
5090
|
+
this.firstPlay && this.firstPlay();
|
|
5163
5091
|
});
|
|
5164
|
-
return _this;
|
|
5165
5092
|
}
|
|
5166
|
-
|
|
5167
|
-
|
|
5168
|
-
|
|
5169
|
-
if (expandOpts === void 0) { expandOpts = {
|
|
5170
|
-
repeats: 0,
|
|
5171
|
-
}; }
|
|
5093
|
+
play(params = [], expandOpts = {
|
|
5094
|
+
repeats: 0,
|
|
5095
|
+
}) {
|
|
5172
5096
|
if (!this.loadStatus) {
|
|
5173
|
-
this.firstPlay =
|
|
5174
|
-
|
|
5097
|
+
this.firstPlay = () => {
|
|
5098
|
+
this.play(params, expandOpts);
|
|
5175
5099
|
};
|
|
5176
5100
|
return;
|
|
5177
5101
|
}
|
|
5178
|
-
|
|
5179
|
-
slot.forEach(
|
|
5180
|
-
|
|
5181
|
-
var x = style.x, y = style.y, _c = style.anchor, anchor = _c === void 0 ? { x: 0, y: 0 } : _c, _d = style.pivot, pivot = _d === void 0 ? { x: 0, y: 0 } : _d, width = style.width, height = style.height;
|
|
5102
|
+
const { slot = [] } = expandOpts;
|
|
5103
|
+
slot.forEach(({ name, type, value, style = {} }) => {
|
|
5104
|
+
const { x, y, anchor = { x: 0, y: 0 }, pivot = { x: 0, y: 0 }, width, height } = style;
|
|
5182
5105
|
if (type === 'IMAGE') {
|
|
5183
|
-
|
|
5106
|
+
this.currentSlot[name] = Sprite.from(value);
|
|
5184
5107
|
}
|
|
5185
5108
|
else if (type === 'TEXT') {
|
|
5186
|
-
|
|
5109
|
+
this.currentSlot[name] = new Text(value, new TextStyle(style));
|
|
5187
5110
|
}
|
|
5188
5111
|
if (x)
|
|
5189
|
-
|
|
5112
|
+
this.currentSlot[name].x = x;
|
|
5190
5113
|
if (y)
|
|
5191
|
-
|
|
5114
|
+
this.currentSlot[name].y = y;
|
|
5192
5115
|
if (width)
|
|
5193
|
-
|
|
5116
|
+
this.currentSlot[name].width = width;
|
|
5194
5117
|
if (height)
|
|
5195
|
-
|
|
5196
|
-
|
|
5197
|
-
|
|
5198
|
-
if (
|
|
5199
|
-
|
|
5200
|
-
|
|
5201
|
-
|
|
5118
|
+
this.currentSlot[name].height = height;
|
|
5119
|
+
this.currentSlot[name].anchor.set(anchor.x || 0, anchor.y || 0);
|
|
5120
|
+
this.currentSlot[name].pivot.set(this.currentSlot[name].width * (pivot.x || 0), this.currentSlot[name].height * (pivot.y || 0));
|
|
5121
|
+
if (this.prevSlot[name])
|
|
5122
|
+
this.anim.unbindSlot(name, this.prevSlot[name]);
|
|
5123
|
+
this.anim.bindSlot(name, this.currentSlot[name]);
|
|
5124
|
+
this.prevSlot[name] = this.currentSlot[name];
|
|
5202
5125
|
});
|
|
5203
5126
|
this.anim.playSegment(this.playParamsHandle(params), expandOpts);
|
|
5204
|
-
}
|
|
5205
|
-
|
|
5206
|
-
|
|
5207
|
-
|
|
5127
|
+
}
|
|
5128
|
+
playParamsHandle(params) {
|
|
5129
|
+
let p = [].concat(params);
|
|
5130
|
+
const { keyframes } = this.anim;
|
|
5208
5131
|
if (!p.length || p.length > 2) {
|
|
5209
5132
|
p = [keyframes.ip, keyframes.op];
|
|
5210
5133
|
}
|
|
@@ -5212,29 +5135,26 @@ var Lottie = (function (_super) {
|
|
|
5212
5135
|
p = [p[0] % keyframes.op, keyframes.op];
|
|
5213
5136
|
}
|
|
5214
5137
|
return p;
|
|
5215
|
-
}
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5221
|
-
var display = ele.display;
|
|
5138
|
+
}
|
|
5139
|
+
onTap(name, callback) {
|
|
5140
|
+
const g = new Graphics();
|
|
5141
|
+
this.on('success', () => {
|
|
5142
|
+
const ele = this.anim.querySelector(name);
|
|
5143
|
+
const display = ele.display;
|
|
5222
5144
|
g.beginFill(0xffffff);
|
|
5223
5145
|
g.drawRect(0, 0, 100, 100);
|
|
5224
5146
|
g.endFill();
|
|
5225
5147
|
g.alpha = 0;
|
|
5226
5148
|
display.addChild(g);
|
|
5227
5149
|
ele.display.interactive = true;
|
|
5228
|
-
ele.display.on('pointertap',
|
|
5150
|
+
ele.display.on('pointertap', () => {
|
|
5229
5151
|
callback();
|
|
5230
5152
|
});
|
|
5231
5153
|
});
|
|
5232
|
-
}
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
}(Component));
|
|
5236
|
-
var Lottie$1 = Lottie;
|
|
5154
|
+
}
|
|
5155
|
+
}
|
|
5156
|
+
Lottie.componentName = 'Lottie';
|
|
5237
5157
|
|
|
5238
5158
|
resource.registerResourceType('LOTTIE');
|
|
5239
5159
|
|
|
5240
|
-
export { Lottie
|
|
5160
|
+
export { Lottie, LottieSystem$1 as LottieSystem };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-lottie",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.10",
|
|
4
4
|
"description": "@eva/plugin-renderer-lottie",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-lottie.esm.js",
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@eva/eva.js": "2.0.0-beta.
|
|
22
|
-
"@eva/plugin-renderer": "2.0.0-beta.
|
|
21
|
+
"@eva/eva.js": "2.0.0-beta.10",
|
|
22
|
+
"@eva/plugin-renderer": "2.0.0-beta.10",
|
|
23
23
|
"ios-version": "^1.0.1",
|
|
24
|
-
"pixi.js": "^8.6.
|
|
24
|
+
"pixi.js": "^8.6.5"
|
|
25
25
|
}
|
|
26
26
|
}
|