@eva/plugin-renderer-lottie 2.0.2 → 2.1.0-beta.2

package/dist/plugin-renderer-lottie.d.ts

@@ -30,6 +30,12 @@ declare interface IOptions {
     width?: number;
     height?: number;
     replaceData?: boolean;
+    autoStart?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    speed?: number;
+    onComplete?: () => void;
+    onLoopComplete?: () => void;
 }
 
 /**
@@ -99,6 +105,15 @@ export declare class Lottie extends Component {
     anim: any;
     /** Lottie 配置选项 */
     options: ExtendOptions;
+    /** 是否资源就绪后自动播放 */
+    autoplay: boolean;
+    /** 是否循环播放 */
+    loop: boolean;
+    /** 完成事件回调 */
+    onComplete?: () => void;
+    /** 循环完成事件回调 */
+    onLoopComplete?: () => void;
+    private _speed;
     /** 资源加载状态 */
     loadStatus: boolean;
     /** 首次播放回调 */
@@ -118,10 +133,18 @@ export declare class Lottie extends Component {
      * @param options.autoStart - 是否自动开始播放
      */
     constructor(options: IOptions);
+    get speed(): number;
+    set speed(value: number);
     play(params?: number[], expandOpts?: IExpandOpts): void;
+    pause(): void;
+    stop(): void;
+    goToFrame(frame: number): void;
+    load(): void;
     replaceData(data: Record<string, string>): void;
     playParamsHandle(params: any): any[];
     onTap(name: any, callback: any): void;
+    destroy(): void;
+    private applySpeed;
 }
 
 export declare class LottieSystem extends Renderer {

package/dist/plugin-renderer-lottie.esm.js

@@ -13057,52 +13057,36 @@ class AnimationManager extends Eventer {
   }
 }
 
-const { major } = iOSVersion(globalThis.navigator.userAgent) || {};
-
-/**
- * dataURL 转成 blob
- * @param dataURL
- * @return blob
- */
-function dataURL2blob(dataURL) {
-  let binaryString = atob(dataURL.split(',')[1]);
-  let arrayBuffer = new ArrayBuffer(binaryString.length);
-  let intArray = new Uint8Array(arrayBuffer);
-  let mime = dataURL.split(',')[0].match(/:(.*?);/)[1];
-  for (let i = 0, j = binaryString.length; i < j; i++) {
-    intArray[i] = binaryString.charCodeAt(i);
-  }
-  let data = [intArray];
-  let result;
-  try {
-    result = new Blob(data, { type: mime });
-  } catch (error) {
-    console.log(error);
-  }
-  return result;
-}
-
-/**
- * 创建新的URL 对象表示指定的 File 对象或 Blob 对象。
- * @param {string} dataURL  base64
- */
-function dataURL2ObjUrl(dataURL) {
-  window.URL = window.URL || window.webkitURL;
-  if (window.URL && URL.createObjectURL) {
-    // dataURL2blob 此方法需额外定义
-    const blob = dataURL2blob(dataURL);
-    return URL.createObjectURL(blob);
-  }
-  return dataURL;
-}
-
-function imageHandle(source) {
-  const isBase64Reg = /^data:image\/png;base64/;
-  if (major <= 8 && isBase64Reg.test(source)) {
-    return dataURL2ObjUrl(source);
-  }
-
-  return source;
+const getIOSMajor = () => {
+    var _a, _b;
+    const userAgent = ((_a = globalThis.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) || '';
+    return (_b = iOSVersion(userAgent)) === null || _b === void 0 ? void 0 : _b.major;
+};
+const dataURL2blob = (dataURL) => {
+    var _a;
+    const binaryString = atob(dataURL.split(',')[1]);
+    const arrayBuffer = new ArrayBuffer(binaryString.length);
+    const intArray = new Uint8Array(arrayBuffer);
+    const mime = ((_a = dataURL.split(',')[0].match(/:(.*?);/)) === null || _a === void 0 ? void 0 : _a[1]) || 'image/png';
+    for (let i = 0, j = binaryString.length; i < j; i++) {
+        intArray[i] = binaryString.charCodeAt(i);
+    }
+    return new Blob([intArray], { type: mime });
+};
+const dataURL2ObjUrl = (dataURL) => {
+    const urlFactory = globalThis.URL || window.webkitURL;
+    if (urlFactory === null || urlFactory === void 0 ? void 0 : urlFactory.createObjectURL) {
+        return urlFactory.createObjectURL(dataURL2blob(dataURL));
+    }
+    return dataURL;
+};
+function imageHandle(source) {
+    const isBase64Reg = /^data:image\/png;base64/;
+    const major = getIOSMajor();
+    if (major && major <= 8 && isBase64Reg.test(source)) {
+        return dataURL2ObjUrl(source);
+    }
+    return source;
 }
 
 let LottieSystem = class LottieSystem extends Renderer {
@@ -13257,9 +13241,15 @@ class Lottie extends Component {
      * @param options.autoStart - 是否自动开始播放
      */
     constructor(options) {
+        var _a, _b, _c, _d;
         super();
         /** 待替换的数据 */
         this._replaceData = null;
+        /** 是否资源就绪后自动播放 */
+        this.autoplay = false;
+        /** 是否循环播放 */
+        this.loop = false;
+        this._speed = 1;
         /** 资源加载状态 */
         this.loadStatus = false;
         /** 首次播放回调 */
@@ -13268,27 +13258,50 @@ class Lottie extends Component {
         this.prevSlot = {};
         /** 当前的插槽内容 */
         this.currentSlot = {};
-        this.options = Object.assign({ autoStart: false }, options);
+        const autoStart = (_b = (_a = options.autoStart) !== null && _a !== void 0 ? _a : options.autoplay) !== null && _b !== void 0 ? _b : false;
+        this.options = Object.assign(Object.assign({}, options), { autoStart });
+        this.autoplay = autoStart;
+        this.loop = (_c = options.loop) !== null && _c !== void 0 ? _c : false;
+        this._speed = (_d = options.speed) !== null && _d !== void 0 ? _d : 1;
+        this.onComplete = options.onComplete;
+        this.onLoopComplete = options.onLoopComplete;
+        if (this.onComplete)
+            this.on('complete', this.onComplete);
+        if (this.onLoopComplete)
+            this.on('loopComplete', this.onLoopComplete);
         this.on('success', () => {
             this.loadStatus = true;
+            this.applySpeed();
             const { ip, op } = this.anim.keyframes;
             for (let i = ip; i <= op; i++) {
                 const event = `@${i}`;
                 this.anim.on(event, e => this.emit(event, e));
             }
+            if (this.options.autoStart)
+                this.play();
             this.firstPlay && this.firstPlay();
         });
     }
+    get speed() {
+        return this._speed;
+    }
+    set speed(value) {
+        this._speed = value;
+        this.options.speed = value;
+        this.applySpeed();
+    }
     play(params = [], expandOpts = {
         repeats: 0,
     }) {
+        var _a;
         if (!this.loadStatus) {
             this.firstPlay = () => {
                 this.play(params, expandOpts);
             };
             return;
         }
-        const { slot = [] } = expandOpts;
+        const playOptions = Object.assign(Object.assign({}, expandOpts), { repeats: (_a = expandOpts.repeats) !== null && _a !== void 0 ? _a : (this.loop ? -1 : 0) });
+        const { slot = [] } = playOptions;
         slot.forEach(({ name, type, value, style = {} }) => {
             const { x, y, anchor = { x: 0, y: 0 }, pivot = { x: 0, y: 0 }, width, height } = style;
             if (type === 'IMAGE') {
@@ -13315,7 +13328,30 @@ class Lottie extends Component {
             this.anim.bindSlot(name, this.currentSlot[name]);
             this.prevSlot[name] = this.currentSlot[name];
         });
-        this.anim.playSegment(this.playParamsHandle(params), expandOpts);
+        this.anim.playSegment(this.playParamsHandle(params), playOptions);
+    }
+    pause() {
+        var _a;
+        if ((_a = this.anim) === null || _a === void 0 ? void 0 : _a.pause)
+            this.anim.pause();
+    }
+    stop() {
+        var _a, _b;
+        if ((_a = this.anim) === null || _a === void 0 ? void 0 : _a.stop)
+            this.anim.stop();
+        else if ((_b = this.anim) === null || _b === void 0 ? void 0 : _b.goToAndStop)
+            this.anim.goToAndStop(0, true);
+    }
+    goToFrame(frame) {
+        var _a;
+        if ((_a = this.anim) === null || _a === void 0 ? void 0 : _a.goToAndStop)
+            this.anim.goToAndStop(frame, true);
+    }
+    load() {
+        var _a;
+        if (this.loadStatus || this.anim)
+            return;
+        this.firstPlay = (_a = this.firstPlay) !== null && _a !== void 0 ? _a : (() => { });
     }
     replaceData(data) {
         if (data) {
@@ -13350,6 +13386,30 @@ class Lottie extends Component {
             });
         });
     }
+    destroy() {
+        var _a;
+        Object.keys(this.prevSlot).forEach(name => {
+            var _a;
+            const slot = this.prevSlot[name];
+            if (((_a = this.anim) === null || _a === void 0 ? void 0 : _a.unbindSlot) && slot)
+                this.anim.unbindSlot(name, slot);
+            if (slot === null || slot === void 0 ? void 0 : slot.destroy)
+                slot.destroy();
+        });
+        this.prevSlot = {};
+        this.currentSlot = {};
+        if ((_a = this.anim) === null || _a === void 0 ? void 0 : _a.destroy)
+            this.anim.destroy();
+        this.anim = null;
+        this.loadStatus = false;
+    }
+    applySpeed() {
+        var _a;
+        if ((_a = this.anim) === null || _a === void 0 ? void 0 : _a.setSpeed)
+            this.anim.setSpeed(this._speed);
+        else if (this.anim)
+            this.anim.timeScale = this._speed;
+    }
 }
 /** 组件名称 */
 Lottie.componentName = 'Lottie';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-lottie",
-  "version": "2.0.2",
+  "version": "2.1.0-beta.2",
   "description": "@eva/plugin-renderer-lottie",
   "main": "index.js",
   "module": "dist/plugin-renderer-lottie.esm.js",
@@ -18,8 +18,8 @@
   "license": "MIT",
   "homepage": "https://eva.js.org",
   "dependencies": {
-    "@eva/eva.js": "2.0.2",
-    "@eva/plugin-renderer": "2.0.2",
+    "@eva/eva.js": "2.1.0-beta.2",
+    "@eva/plugin-renderer": "2.1.0-beta.2",
     "ios-version": "^1.0.1",
     "pixi.js": "^8.17.0"
   }