l

.npmignore

@@ -11,3 +11,4 @@ webpack.config.js
 /dist
 rollup.config.js
 record.txt
+test
\ No newline at end of file

build/FYGE.d.ts

@@ -3175,8 +3175,8 @@ export  class MaskManager {
     /**
      * Applies the Mask and adds it to the current filter stack.
      *
-     * @param {PIXI.RenderTarget} target - Display Object to push the sprite mask to
-     * @param {PIXI.Sprite} maskData - Sprite to be used as the mask
+     * @param {RenderTarget} target - Display Object to push the sprite mask to
+     * @param {Sprite} maskData - Sprite to be used as the mask
      */
     private pushSpriteMask;
     /**

package.json

 {
     "name": "fyge-tbmini",
-    "version": "1.3.2",
+    "version": "1.3.5",
     "description": "淘宝小程序canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "types": "./build/FYGE.d.ts",

record.txt

@@ -34,16 +34,21 @@
 1.2.9   button的changeTexture在禁用状态时贴图也要修改
         EventDispatcher添加移除指定类型的所有事件removeAllEventListenerByType
 
-1.3.0   canvasMaskManager修改pushMask,置零globalAlpha
+1.3.1   canvasMaskManager修改pushMask,置零globalAlpha
         frameAni修改，frameRate不判断必执行，否则默写修改过贴图集的会不生效
         frameAni新增resetTexturesAll方法
         frameAni去掉changeTexture方法，直接整合进currentFrame的set方法
         
-1.3.2   Stage的webgl模式创建webgl上下文时添加属性
+1.3.3   Stage的webgl模式创建webgl上下文时添加属性
         textField单行文本检测加入\r  \r\n
         container里removeChildren在不传参数时的修改
         CanvasRenderTarget构造函数里添加clear方法，为了里面的clearRect，(淘宝canvas问题，绘制前必须调用过clearRect，否则有几率画不出来)
+        filterManager里恢复判断target.filterArea
+        maskManager里pushSpriteMask设置遮罩滤镜的范围为遮罩的bounds
 
+1.3.5   加入lottie
+
+loader修改兼容h5和淘宝小程序的加载json的方法
 
 //TODO
 Texture里的removeAllHandlers是否考虑加上tex.removeEventListener = function _emptyOn() { /* empty */ };
@@ -65,3 +70,9 @@ svga的纹理考虑单独缓存在自己的数据里，不进TextureCache，movi
 
 淘宝小程序的canvas路径api没用非零环绕原则，必须逆时针绘制想绘制的，顺时针绘制镂空的
 文本在fillText没修复前，空格用\t替代
+
+Texture.WHITE得修改下，在canvas下不能用imageData去drawImage
+
+h5下webgl上下丢失情况需要处理事件，待加
+
+音频待处理，不考虑加入渲染引擎，单独搞个npm包吧，用的时候引入
\ No newline at end of file

src/2d/loader/Loader.ts

@@ -73,21 +73,52 @@ export class Loader extends EventDispatcher {
         //         // console.log(reason.message)
         //     })
     }
+    /**
+     * 兼容
+     * @param callback 
+     * @param url 
+     */
     loadJson(callback, url) {
-        //@ts-ignore
-        my.request({
-            url: url,
-            dataType: "json",
-            success: (res) => {
-                callback(true, res.data)
-            },
-            fail: function (res) {
-                // my.alert({
-                //   title: JSON.stringify(res)
+        //@ts-ignore ,正式环境不能使用request，走downloadFile
+        // my.request({
+        //     url: url,
+        //     dataType: "json",
+        //     success: (res) => {
+        //         callback(true, res.data)
+        //     },
+        //     fail: function (res) {
+        //         // my.alert({
+        //         //   title: JSON.stringify(res)
+        //         // });
+        //         callback(false, res)
+        //     }
         // });
-                callback(false, res)
+        if (my) {
+            this.tbLoad(callback, url, "utf8")
+            return
+        }
+        //每次都要new
+        let _req;
+        if (window["XMLHttpRequest"]) {
+            _req = new XMLHttpRequest();
+        } else if (window["ActiveXObject"]) {
+            _req = new window["ActiveXObject"]();
+        } else {
+            alert("请升级至最新版本的浏览器")
+        }
+        if (_req != null) {
+            _req.open("GET", url, true);
+            _req.responseType = "json";
+            _req.send();
+            _req.onreadystatechange = () => {
+                if (_req.readyState == 4 && _req.status == 200) {
+                    callback(true, _req.response)
+                }
+            };
+            _req.onerror = (reason): void => {
+                callback(false, reason)
+            }
         }
-        });
     }
 
     loadImage(callback: (s: boolean, image?: HTMLImageElement) => void, url) {
@@ -118,7 +149,7 @@ export class Loader extends EventDispatcher {
         img.src = url;
     }
     /**
-     * 加载小程序的音频
+     * 加载小程序的音频，暂时不用
      * @param callback 
      * @param url 
      */
@@ -142,7 +173,76 @@ export class Loader extends EventDispatcher {
         // })
     }
 
+    /**
+     * 
+     * @param callback 
+     * @param url 
+     */
+    private tbLoad(
+        callback: (s: boolean, res?: any) => void,
+        url: string,
+        type: "utf8" | "ArrayBuffer" = "ArrayBuffer"
+    ) {
+        //类似这种地址"cloud://A8673B47AAA58993A24A6718E203B967//dice.svga"
+        if (url.indexOf("cloud://") == 0) {
+            this.getTbTempUrl((src) => {
+                this.downloadReadFile(callback, src, type)
+            }, url)
+        } else {
+            this.downloadReadFile(callback, url, type)
+        }
+    }
 
+    /**
+     * 淘宝小程序，获取云存储临时cdn地址
+     * @param callback 
+     * @param url 
+     */
+    private getTbTempUrl(callback: (src: string) => void, url) {
+        //@ts-ignore
+        const { cloud } = getApp();
+        //获取临时地址
+        cloud.file.getTempFileURL({ fileId: [url] }).then((urls) => {
+            callback(urls[0].url.replace('-internal', ''))
+        }).catch((err) => {
+            console.error(err)
+        })
+    }
+
+    /**
+     * 
+     * @param callback 
+     * @param url 
+     * @param type 指定的字符编码，不传表示以 ArrayBuffer 格式读取文件的二进制内容
+     */
+    private downloadReadFile(
+        callback: (s: boolean, res?: any) => void,
+        url: string,
+        type: "utf8" | "ArrayBuffer" = "ArrayBuffer"
+    ) {
+        //@ts-ignore
+        let tbMy = my;
+        tbMy.downloadFile({
+            url: url,
+            success(res) {
+                var i = res.apFilePath;//临时地址是否有必要缓存下，如果读不到再考虑下载。
+                tbMy.getFileSystemManager().readFile({
+                    filePath: i,
+                    encoding: type,//不加表示加载的是ArrayBuffer
+                    success: function (r) {
+                        callback(true, r.data)//注意是r.data
+                        // actions.load_viaProto(r.data, cb, failure);
+                    },
+                    fail: function (res) {
+                        callback(false, res)
+                    }
+                })
+            },
+            fail(res) {
+                callback(false, res)
+            },
+        });
+    }
 
     private cache(name: string, data: any) {
         if (this.caches[name]) {

src/2d/renderers/managers/FilterManager.ts

@@ -119,7 +119,7 @@ export default class FilterManager {
         // for now we go off the filter of the first resolution..
         const resolution = filters[0].resolution;
         const padding = filters[0].padding | 0;
-        const targetBounds = /*fullScreen ? renderer.screen : (target.filterArea ||*/ target.getBounds(true)/*)*/;
+        const targetBounds = /*fullScreen ? renderer.screen : (*/target.filterArea || target.getBounds(true)/*)*/;
         const sourceFrame:Rectangle = currentState.sourceFrame;
         const destinationFrame = currentState.destinationFrame;
 

src/2d/renderers/managers/MaskManager.ts

@@ -94,8 +94,8 @@ export default class MaskManager {
     /**
      * Applies the Mask and adds it to the current filter stack.
      *
-     * @param {PIXI.RenderTarget} target - Display Object to push the sprite mask to
-     * @param {PIXI.Sprite} maskData - Sprite to be used as the mask
+     * @param {RenderTarget} target - Display Object to push the sprite mask to
+     * @param {Sprite} maskData - Sprite to be used as the mask
      */
     private pushSpriteMask(target, maskData) {
         let alphaMaskFilter = this.alphaMaskPool[this.alphaMaskIndex];
@@ -107,10 +107,14 @@ export default class MaskManager {
         alphaMaskFilter[0].resolution = 1;
         alphaMaskFilter[0].maskSprite = maskData;
 
-        // TODO - may cause issues!
-        // target.filterArea = maskData.getBounds(true);
+        //存下之前的滤镜区域
+        const cacheFilterArea = target.filterArea;
+        //取遮罩的范围
+        target.filterArea = maskData.getBounds(true);
 
         this.renderer.filterManager.pushFilter(target, alphaMaskFilter);
+        //恢复
+        target.filterArea = cacheFilterArea;
 
         this.alphaMaskIndex++;
     }

src/2d/ui/Lottie.ts

+import { TextureCache, getCreateImage } from "../utils";
+import { Tween } from "../../tween";
+import { Texture, BaseTexture } from "../texture";
+import { Container, Sprite, DisplayObject } from "../display";
+
+interface LottieData {
+    "fr": number,//珍露  30  60等
+    "ip": number,//开始帧
+    "op": number,//结束帧
+    "w": number,//宽度
+    "h": number,//高度
+    "nm": string,//名字
+    "layers": LayerData[],
+    "assets"?: {
+        "id": string,//图片id，与layers里的refId对应
+        "w": number,
+        "h": number,
+        "p": string,//base64数据
+    }[],
+    "textures"?: { [key: string]: Texture }//缓存的贴图，为了上面的assets里的图片数据，不进全局缓存
+}
+interface LayerData {
+    "ind": number,//id唯一
+    "ty": number,//类型，暂时只有2
+    "nm": string//"owl_sleep.png",//暂时就是图片
+    "refId": string,
+    "parent"?: number,//父级id
+    "ks": KsData;
+    "ip": number,//开始帧
+    "op": number,//结束帧
+}
+interface KsData {
+    o: KeyData
+    r: KeyData
+    p: KeyData
+    a: KeyData
+    s: KeyData
+}
+interface KeyData {
+    a: number, k: { "t": number, "s": number[] }[] | number[] | number, x: string
+}
+
+/**
+ * 记录的Tween数据
+ */
+interface TweenData {
+    /**
+     * 属性对象
+     */
+    obj: any,
+    deltaTime: number,
+    deltaT: number,
+    isSet?: boolean,
+    /**
+     * 原始帧数据，算pingpong的时间差值用
+     */
+    timeOri?: number,
+}
+
+
+/**
+ * 用Tween拼，后续计算帧数据记录
+ * 临时写的，真尼玛乱得很，以后再说
+ */
+export class Lottie extends Container {
+    /**
+     * 原始数据，尽量只获取，不修改
+     */
+    private rawData: LottieData;
+    /**
+     * 总帧数
+     */
+    get totalFrames(): number {
+        return this.rawData && (this.rawData.op - this.rawData.ip);
+    };
+    /**
+     * 锁步的时间间隔，按fps定,毫秒
+     */
+    private timeInterval;
+    /**
+     * 按帧率计算，60为1，30为2，
+     */
+    private deltaFrame: number = 1;
+
+    get videoWidth(): number {
+        return this.rawData && this.rawData.w;
+    };
+    get videoHeight(): number {
+        return this.rawData && this.rawData.h;
+    };
+    /**
+     * 供循环用
+     */
+    private loops: number
+    private callback: () => void
+
+    constructor(data) {
+        super()
+        this._instanceType = "Lottie";
+        //初始化
+        if (data) {
+            this.init(data);
+        }
+        // else {
+        //     this.totalFrames = 0;
+        // }
+    }
+    /**
+     * 暂时不考虑重复init
+     * @param data 
+     */
+    init(data: LottieData) {
+        if (!data) return
+        this.rawData = data;
+        this.timeInterval = 1000 / data.fr;
+        // this.totalFrames = data.op - data.ip
+        //间隔帧数，
+        this.deltaFrame = 60 / data.fr;
+        this.name = data.nm;
+
+        //初始化图片 有assets但无textures
+        if (data.assets && !data.textures) {//带图片数据的待测试
+            data.textures = {};
+            data.assets.forEach((a) => {
+                let imgTag = getCreateImage()();
+                imgTag.src = a.p;
+                data.textures[a.id] = new Texture(new BaseTexture(imgTag));
+            })
+        }
+        this.initChildren();
+    }
+    private initChildren() {
+        //初始化内容吧，假设所有资源已经加载好额
+        var layers = this.rawData.layers.slice();
+        //先筛选出所有不带parents,说明是顶级容器
+        for (var i = layers.length - 1; i >= 0; i--) {
+            let layer = layers[i];
+            // if (!layer.refId) console.log(layer)
+            let c = this.addChild(new Sprite(
+                // RES.getRes(layer.nm) ||
+                layer.refId ?
+                    this.rawData.textures ?
+                        this.rawData.textures[layer.refId] :
+                        TextureCache[layer.refId] ||
+                        TextureCache[layer.refId + ".png"] : null
+            ));
+            //记录一下数据
+            c["layerData"] = layer;
+        }
+        this.initState()
+    }
+    private initState(con = this.children) {
+        for (var i = 0; i < con.length; i++) {
+            var c: Sprite = con[i];
+            if (c["layerData"]) {
+                //取第一个数据
+                let data: LayerData = c["layerData"];
+                //@ts-ignore 透明度
+                c.alpha = data.ks.o.k[0] ? data.ks.o.k[0].s[0] / 100 : data.ks.o.k / 100;
+                // c.alpha = c.alpha === 0.01 ? 1 : c.alpha;
+                //@ts-ignore 选转
+                c.rotation = data.ks.r.k[0] ? data.ks.r.k[0].s[0] : data.ks.r.k;
+                //锚点，用贴图锚点
+                var ad = typeof data.ks.a.k[0] == "number" ? data.ks.a.k : data.ks.a.k[0].s;
+                c.anchor.set(ad[0], ad[1])
+                //位置
+                var ad = typeof data.ks.p.k[0] == "number" ? data.ks.p.k : data.ks.p.k[0].s;
+                c.position.set(ad[0] - c.anchorX, ad[1] - c.anchorY)
+                //缩放
+                var ad = typeof data.ks.s.k[0] == "number" ? data.ks.s.k : data.ks.s.k[0].s;
+                c.scale.set(ad[0] / 100, ad[1] / 100)
+
+                //如果入场不在的
+                c.visible = data.ip <= 0
+                // if (data.ip > 0) {
+                //     c.visible = false
+                // } else {
+                //     c.visible = true
+                // }
+            }
+            if (c.children.length) this.initState(c.children)
+        }
+    }
+    /**
+     * 为了那啥 修改 loop默认0
+     */
+    play(loop: number = 0, callback?: () => void) {
+        // this.initState();
+        this.stop();
+        this.loops = loop;
+        this.callback = callback;
+        this.addTweens();
+    }
+
+    /**
+     * 移除所有的Tween
+     */
+    stop() {
+        //tween要去掉
+        this.children.forEach((c) => { Tween.removeTweens(c) })
+        this.initState();
+    }
+
+    private addTweens(con = this.children) {
+        for (var i = 0; i < con.length; i++) {
+            let c: Sprite = con[i];
+            if (c["layerData"]) {
+                //取第一个数据
+                let data: LayerData = c["layerData"];
+                //@ts-ignore 透明度，如果k是数组，肯定有帧数据
+                if (data.ks.o.k.length) this.addTween(c, "o");
+                //@ts-ignore 旋转
+                if (data.ks.r.k.length) this.addTween(c, "r");
+                //位置，得是对象
+                if (typeof data.ks.p.k[0] != "number") this.addTween(c, "p");
+                //缩放
+                if (typeof data.ks.s.k[0] != "number") this.addTween(c, "s");
+
+                //显示隐藏统一这里处理，还有个循环的，如何计算显示隐藏再说
+                var t = Tween.get(c, { loop: true })
+                if (data.ip > 0 || data.op < this.rawData.op) {
+                    var aa = data.ip < 0 ? 0 : data.ip;
+                    var bb = data.op > this.rawData.op ? this.rawData.op : data.op
+                    t.wait(aa * this.timeInterval)
+                        .call(() => { c.visible = true; })
+                        .wait((bb - aa) * this.timeInterval)
+                        .call(() => { c.visible = false; })
+                        .wait((this.rawData.op - bb) * this.timeInterval)
+                }
+
+            }
+            //其实不会有
+            if (c.children.length) this.addTweens(c.children)
+        }
+        //考虑回调
+        Tween.get(this, { loop: true })
+            .wait((this.rawData.op - this.rawData.ip) * this.timeInterval)
+            .call(() => {
+                if (--this.loops == 0) {
+                    this.stop();
+                    this.callback && this.callback();
+                }
+            })
+    }
+
+    /**
+     * 来吧重写，，。专干loopOut和loopIn
+     * @param dis 
+     * @param type 
+     */
+    private addTween(dis: DisplayObject, type: "r" | "o" | "s" | "p") {
+        const data: { "t": number, "s": number[] }[] = dis["layerData"].ks[type].k
+        let tween = Tween.get(dis, { loop: true })
+        let countTime = 0;
+
+        //有表达式的，先随便写，到时整理
+        if (dis["layerData"].ks[type].x) {
+            var xs = dis["layerData"].ks[type].x;
+            //取数字
+            var rr = +xs.replace(/[^0-9]/ig, "");
+            //loopOut后续循环，补齐从最后一个数据的t到dis["layerData"].op的间隔，不足一个的情况需要单独计算
+            if (xs.indexOf("loopOut") >= 0) {
+                //先走完一次整的，反正补后面的
+                let objArr: { obj: any, deltaTime: number, deltaT: number, isSet?: boolean }[] = [];
+                let curT = 0;
+                for (let i = 0; i < data.length; i++) {
+                    let d = data[i];
+                    //如果超过op的
+                    if (d.t > dis["layerData"].op) break;
+                    let deltaT = d.t - curT;
+                    let deltaTime = deltaT * this.timeInterval;
+                    let obj = getTweenObj(d);
+                    //如果第一帧不是0，需要等待
+                    if (i == 0 && d.t > 0) {
+                        tween.wait(deltaTime)
+                        countTime += deltaTime
+                        // console.log("asdffff",countALL,d.t)
+                        //需加set,但是时间0，暂时别加吧，tween会自行记录初始值
+                        // objArr.push({ obj, deltaT:0, deltaTime:0, isSet: true })
+                    }
+                    //从0开始，但是t为0，用set
+                    else if (i == 0 && d.t == 0) { //考虑下是否需要，deltaTime也是0
+                        tween.set(obj);
+                        objArr.push({ obj, deltaT, deltaTime, isSet: true })
+                    } else {
+                        //一帧当作set
+                        if (d.t - curT == 1) {
+                            tween.wait(deltaTime)
+                                .set(obj);
+                            objArr.push({ obj, deltaT, deltaTime, isSet: true })
+                            countTime += deltaTime
+                            // console.log("asdff",countALL)
+                        } else {
+                            tween.to(obj, deltaTime);
+                            objArr.push({ obj, deltaT, deltaTime })
+                            countTime += deltaTime
+                            // console.log("asdff",countALL)
+                        }
+                    }
+                    //赋值
+                    curT = d.t;
+                }
+                // if (dis["layerData"].ind == "1") console.log(45445456, objArr)
+                // console.log("asdf",countALL)
+                //pingpong先不考虑次数，还没遇到
+                if (xs.indexOf("pingpong") >= 0 && data[data.length - 1].t < dis["layerData"].op) {
+                    // Math.floor((dis["layerData"].op - data[0].t))
+                    var round = Math.round(
+                        (dis["layerData"].op - data[data.length - 1].t) /
+                        (data[data.length - 1].t - data[0].t) //不一定所有
+                    )
+                    curT += round * (data[data.length - 1].t - data[0].t) //不一定所有
+                    var dir = false;
+                    while (--round) {
+                        if (dir) {
+                            for (var o = 0; o < objArr.length; o++) {
+                                tween.to(objArr[o].obj, objArr[o].deltaTime);
+                                countTime += objArr[o].deltaTime;
+                            }
+                        } else {
+                            for (var o = objArr.length - 1; o >= 1; o--) {
+                                tween.to(objArr[o - 1].obj, objArr[o].deltaTime);
+                                countTime += objArr[o].deltaTime;
+                            }
+                        }
+                        dir = !dir;
+                    }
+                }
+                //循环，先floor，多余的重走一次，估计不能用dis["layerData"].op，得用this.rawData.op，loopOut到时也得单独计算
+                else if (xs.indexOf("cycle") >= 0 && data[data.length - 1].t < dis["layerData"].op) {
+                    var lastIndex = data.length - 1;
+                    var num = Math.floor(
+                        (dis["layerData"].op - data[lastIndex].t) /
+                        (data[lastIndex].t - data[lastIndex - (rr || lastIndex)].t)
+                    );
+                    // console.log("asd",num,data[lastIndex].t - data[lastIndex - (rr || lastIndex)].t)
+                    //取一部分
+                    let objArrC = objArr.slice(-rr);
+                    while (num) {
+                        num--;
+                        //补满
+                        for (var o = 0; o < objArrC.length; o++) {
+                            if (objArrC[o].isSet) {
+                                tween.wait(objArrC[o].deltaTime)
+                                    .set(objArrC[o].obj);
+                            } else {
+                                tween.to(objArrC[o].obj, objArrC[o].deltaTime);
+                            }
+                            countTime += objArrC[o].deltaTime
+                        }
+                    }
+                    // console.log("asd",countALL)
+                    //补剩下的，跑一部分
+                    var left = (dis["layerData"].op - data[lastIndex].t) % (data[lastIndex].t - data[lastIndex - (rr || lastIndex)].t);
+                    //   if(dis["layerData"].ind=="1")  console.log(45445456,left)
+                    for (var o = 0; o < objArrC.length; o++) {
+                        if (objArrC[o].deltaT <= left) {
+                            if (objArrC[o].isSet) {
+                                tween.wait(objArrC[o].deltaTime)
+                                    .set(objArrC[o].obj);
+                            } else {
+                                tween.to(objArrC[o].obj, objArrC[o].deltaTime);
+                            }
+                            left -= objArrC[o].deltaT
+                            countTime += objArrC[o].deltaTime
+                        } else {
+                            if (left > 0) {//这种情况不会是set，再调吧，这样算补间有问题
+                                // console.log(o,left, objArrC.length)
+                                // if(o == 0)console.log(left, objArrC[o].deltaT)
+                                var ooo = o == 0 ?
+                                    calculateInterpolation(
+                                        /*objArrC[0].obj,*/ copyProps(objArrC[o].obj, tween["_initQueueProps"]),//初始值用tween记录的
+                                        objArrC[o].obj,
+                                        left / objArrC[o].deltaT
+                                    ) : calculateInterpolation(
+                                        objArrC[o - 1].obj,
+                                        objArrC[o].obj,
+                                        left / objArrC[o].deltaT
+                                    )
+                                tween.to(
+                                    ooo,
+                                    left * this.timeInterval
+                                );
+                                countTime += left * this.timeInterval
+
+                                // console.log(countALL)
+                            }
+                            break;
+                        }
+                    }
+
+                }
+
+            }
+            //前面循环，先取所有的tween序列，初始状态要改
+            else if (xs.indexOf("loopIn") >= 0) {
+                let objArr: TweenData[] = [];
+                let curT = 0;
+                for (let i = 0; i < data.length; i++) {
+                    let d = data[i];
+                    //不能去掉，有可能需要用到
+                    // if (d.t > dis["layerData"].op) break;
+                    let deltaT = d.t - curT;
+                    let deltaTime = deltaT * this.timeInterval;
+                    let obj = getTweenObj(d);
+                    //一帧当作set
+                    if (d.t - curT == 1) {
+                        objArr.push({ obj, deltaT, deltaTime, isSet: true, timeOri: d.t })
+                    } else {
+                        objArr.push({ obj, deltaT, deltaTime, timeOri: d.t })
+                    }
+                    //赋值
+                    curT = d.t;
+                }
+                //pingpong再loopIn暂时没有,用到时再写,还真尼玛下个就是
+                if (xs.indexOf("pingpong") >= 0 && data[0].t > 0) {
+                    objArr = getLoopInPingpongTween(objArr, rr, dis["layerData"].op)
+                    // if (dis["layerData"].ind == 8) console.log("asdf", objArr);
+                    for (var o = 0; o < objArr.length; o++) {
+                        // if (dis["layerData"].ind == 8) console.log("asdf", objArrC[o]);
+                        if (objArr[o].isSet) {
+                            tween.wait(objArr[o].deltaTime)
+                                .set(objArr[o].obj);
+                        } else {
+                            tween.to(objArr[o].obj, objArr[o].deltaTime);
+                        }
+                        countTime += objArr[o].deltaTime
+                    }
+                }
+                //循环，其实应该用dis["layerData"].ip判断
+                else if (xs.indexOf("cycle") >= 0 && data[0].t > 0) {//不考虑不整的，直接从0开始，算出整的，然后自然过度到最后一个
+                    //可能入场的时间不能算
+                    // if (dis["layerData"].ip > 0) tween.wait(dis["layerData"].ip * this.timeInterval)
+
+                    objArr = getLoopInCycleTween(objArr, rr, dis["layerData"].op, dis["layerData"].ip);
+                    if (dis["layerData"].ip) {
+                        // console.log(5464,dis["layerData"].ip,countTime)
+                        tween.wait(dis["layerData"].ip * this.timeInterval)//以后改
+                        countTime += dis["layerData"].ip * this.timeInterval
+                    }
+                    for (var o = 0; o < objArr.length; o++) {
+                        if (objArr[o].isSet) {
+                            tween.wait(objArr[o].deltaTime)
+                                .set(objArr[o].obj);
+                        } else {
+                            tween.to(objArr[o].obj, objArr[o].deltaTime);
+                        }
+                        countTime += objArr[o].deltaTime
+                    }
+                }
+                // if (dis["layerData"].ind == 1) console.log("asd", countTime);
+                //多余的时间
+                var op = Math.min(dis["layerData"].op, this.rawData.op)
+                if (countTime < op * this.timeInterval) {
+                    var dd = op * this.timeInterval - countTime;
+                    tween.wait(dd)
+                    countTime += dd
+                }
+                // console.log(countTime)
+                // if (dis["layerData"].ind == 1) console.log("asde", countTime);
+            }
+
+            //还有一部分   dis["layerData"].op 到 this.rawData.op 
+            if (dis["layerData"].op < this.rawData.op) {
+                tween.wait((this.rawData.op - dis["layerData"].op) * this.timeInterval)
+                countTime += (this.rawData.op - dis["layerData"].op) * this.timeInterval
+            }
+            //查看所有时间
+            // console.log(countTime)
+        }
+        //没表达式的，用wait补满前面的和后面的
+        else {
+            let curT = 0;
+            for (let i = 0; i < data.length; i++) {
+                let d = data[i],
+                    obj = getTweenObj(d),
+                    deltaTime;
+                //判断是否小于0,小于0需要和下一帧算补间
+
+                if (d.t < 0) {
+                    //下一帧不存在或也小于0
+                    if (!data[i + 1] || data[i + 1].t < 0) break;
+                    obj = calculateInterpolation(
+                        obj,
+                        getTweenObj(data[i + 1]),
+                        -d.t / (data[i + 1].t - d.t)
+                    );
+                    // if (d.t == -35) console.log(123)
+                    tween.set(obj);
+                    curT = 0;
+                }
+                //如果超过op的，和上一帧算补间
+                else if (d.t > this.rawData.op) {
+                    if (!data[i - 1] || data[i - 1].t > this.rawData.op) break;
+                    let dt = this.rawData.op - data[i - 1].t;
+                    deltaTime = dt * this.timeInterval;
+                    obj = calculateInterpolation(
+                        getTweenObj(data[i - 1]),
+                        obj,
+                        dt / (d.t - data[i - 1].t)
+                    );
+                    // if (dis["layerData"].ind == 7) console.log(999, d.t, data[i - 1].t, getTweenObj(data[i - 1]), obj)
+                    tween.to(obj, deltaTime);
+                    //累计时间
+                    countTime += deltaTime;
+                    //没必要记了。最后一帧了
+                    curT = this.rawData.op;
+                }
+                else {
+                    deltaTime = (d.t - curT) * this.timeInterval
+                    //如果第一帧不是0，需要等待
+                    if (i == 0 && d.t > 0) {
+                        tween.wait(deltaTime)
+                    }
+                    //从0开始，但是t为0，用set
+                    else if (i == 0 && d.t == 0) {
+                        tween.set(obj);
+                    } else {
+                        tween.to(obj, deltaTime);
+                    }
+                    countTime += deltaTime
+                    //赋值
+                    curT = d.t;
+                }
+            }
+            //考虑还有部分时间，等待
+            if (this.rawData.op > curT) {
+                tween.wait((this.rawData.op - curT) * this.timeInterval)
+            }
+        }
+        // console.log(countTime)
+        //结束的操作
+        // tween.call(() => {
+        //     if (--this.loops == 0) {
+        //         this.stop();
+        //         this.callback && this.callback();
+        //     }
+        // })
+
+        /**
+         * type和dis主参数里取
+         * @param d 循环里取
+         */
+        function getTweenObj(d: { "t": number; "s": number[] }) {
+            let obj;
+            switch (type) {
+                case "r":
+                    obj = { rotation: d.s[0] }
+                    break;
+                case "o":
+                    obj = { alpha: d.s[0] / 100 }
+                    break;
+                case "s":
+                    obj = { scaleX: d.s[0] / 100, scaleY: d.s[1] / 100 }
+                    break;
+                case "p":
+                    obj = { x: d.s[0] - dis.anchorX, y: d.s[1] - dis.anchorY }
+                    break;
+            }
+            return obj;
+        }
+    }
+
+    /**
+     * 对所有的进行刷新，，根据cParent进行迭代刷新
+     * 层级有问题，只能平铺，手动计算矩阵
+     * 因为要平铺，所以记录cParent和ind  从1开始，也许只需要+1就行，还是用ind记录查找吧
+     * 遍历找
+     */
+    updateTransform() {
+        //super不行，到时查
+        this.displayObjectUpdateTransform();
+        this.children.forEach((c) => {
+            this._recursivePostUpdateTransformAA(c);
+        })
+        this.children.forEach((c) => {
+            c.mark = false;
+        })
+    }
+
+    private findChildByInd(ind: number) {
+        for (var i = 0; i < this.children.length; i++) {
+            if (this.children[i].layerData &&
+                this.children[i].layerData.ind === ind
+            ) return this.children[i]
+        }
+        return null
+    }
+
+    private _recursivePostUpdateTransformAA(c) {
+        if (c.layerData && c.layerData.parent) {
+            //ind从1开始，所以不用考虑0，且不应该存在 p没有的情况
+            var p = this.findChildByInd(c.layerData.parent)
+            this._recursivePostUpdateTransformAA(p);
+            if (!c.mark) {
+                c.mark = true;
+                c.transform.updateWorldMatrix(p.transform);
+                //透明度单独计算，不跟cParent保持
+                c._worldAlpha = c.alpha * c.parent._worldAlpha;
+            }
+        }
+        //直接进行tans
+        else if (!c.mark) {
+            c.updateTransform();//alpha跟父级有关
+            c.mark = true
+        }
+    }
+
+    /**
+     * 加个方法，前两个参数都没用，为了一头牛
+     * @param beginFrame 
+     * @param endFrame 
+     * @param loops 
+     * @param callback 
+     */
+    public startAniRange(
+        beginFrame: number = 1,
+        endFrame: number = this.totalFrames,
+        loops: number = 1,
+        callback?: () => void
+    ) {
+        this.play(loops, callback)
+    }
+
+    destroy() {
+        //tween要去掉
+        this.children.forEach((c) => { Tween.removeTweens(c) })
+        super.destroy();
+    }
+}
+
+
+function calculateInterpolation(
+    d1: any,
+    d2: any,
+    scale: number //时间比例 t/(t2-t1)
+) {
+    let obj = {};
+    // for (let key in d1) obj[key] = Math.abs(d1[key] - d2[key]) * scale + d1[key]
+    //之前为何要加绝对值
+    for (let key in d1) obj[key] = (d2[key] - d1[key]) * scale + d1[key]
+    return obj
+}
+
+/**
+ * 返回一个带obj里所有的key的对象，但是key值为sObj里的
+ * @param obj 取里面的key
+ * @param sObj 取里面的key值
+ */
+function copyProps(obj, sObj) {
+    var o = {};
+    if (!obj) return o;
+    for (let key in obj) o[key] = sObj[key];
+    return o;
+}
+
+/**
+ * 以后可能还会改，以后整理吧，以后可能要计算补间，现在先不管
+ * @param objArr 
+ * @param time 第一帧的时间间隔
+ * @param round 循环索引 
+ */
+function getLoopInCycleTween(objArr: TweenData[], round: number, op: number, ip: number = 0) {
+    var time = objArr[0].deltaT - ip;//以后算插值时再说
+    //这样是否合理，也可能是objArrC的length下标，超出一个
+    if (round >= objArr.length) round = 0;
+    var objArrC = objArr.slice(0, round ? round + 1 : objArr.length)
+
+    // var lastDeltaT = objArrC[objArrC.length - 1].deltaT;
+    // if (objArrC.length > 2) {//如果长度大于2，首帧和尾帧是一致的，默认，所以不取最后一帧
+    //     //去掉最后一帧
+    //     objArrC.pop();
+    // }
+    // console.log(objArrC.length, objArr.length)
+    var tweenArr: TweenData[] = [];
+    var curIndex = 0;
+
+    while (time > 0) {
+        curIndex--;
+        //超出就是最后一帧
+        if (curIndex < 0) curIndex = objArrC.length - 1;
+
+        //第0帧是set
+        if (!curIndex) {
+            tweenArr.unshift({
+                obj: objArrC[0].obj,
+                deltaT: 0,
+                deltaTime: 0,
+                timeOri: objArrC[0].timeOri,
+                isSet: true
+            })
+        }
+        //其他的都是终点
+        else {
+            tweenArr.unshift(objArrC[curIndex])
+            time -= objArrC[curIndex].deltaT
+        }
+
+    }
+    //第一帧加上
+    tweenArr.unshift({
+        obj: objArrC[0].obj,
+        deltaT: 0,
+        deltaTime: 0,
+        timeOri: objArrC[0].timeOri,
+        isSet: true
+    })
+    //把剩下的，第一项要变成set，再加后面的所有
+    tweenArr.push({
+        obj: objArrC[0].obj,
+        deltaT: 0,
+        deltaTime: 0,
+        isSet: true
+    })
+    for (var i = 1; i < objArr.length; i++) {
+        if (objArr[i].timeOri > op) break;
+        tweenArr.push(objArr[i]);
+    }
+    // console.log(tweenArr)
+    return tweenArr
+}
+
+
+function getLoopInCycleTween11(objArr: TweenData[], time: number, round: number) {
+    //这样是否合理，也可能是objArrC的length下标，超出一个
+    if (round >= objArr.length) round = 0;
+    var lastDeltaT = objArr[round || objArr.length - 1].deltaT;
+    var lastDeltaTime = objArr[round || objArr.length - 1].deltaTime;
+    objArr[0].deltaT = lastDeltaT;
+    objArr[0].deltaTime = lastDeltaTime;
+    var objArrC = objArr.slice(0, round || objArr.length)
+    var tweenArr: TweenData[] = [];
+    var curT = 0;
+    //从0开始，一般就是初始未知，不做任何处理，不考虑插值
+    for (var i = 1; i < objArrC.length; i++) {
+        tweenArr.push(objArrC[i]);//不做拷贝应该也没事
+        curT += objArrC[i].deltaT;
+    }
+    time -= curT;
+    while (time > lastDeltaT) {
+        for (var i = 0; i < objArrC.length; i++) {
+            tweenArr.push(objArrC[i]);//不做拷贝应该也没事
+            time -= objArrC[i].deltaT
+        }
+    }
+    //接上最后一组
+    tweenArr = tweenArr.concat(objArr)
+    return tweenArr
+}
+
+/**
+ * pingpong的，取首尾相接的循环
+ * @param objArr 
+ * @param time 
+ * @param round 
+ */
+function getLoopInPingpongTween(objArr: TweenData[], round: number, op: number) {
+    var time = objArr[0].deltaT;
+
+    if (round >= objArr.length) round = 0;
+    var objArrC = objArr.slice(0, round ? round + 1 : objArr.length)
+
+    var timeInterval = objArr[0].deltaTime / objArr[0].deltaT;
+    // var allTime = 0;
+    // objArrC.forEach((o, i) => { if (i != 0) allTime += o.deltaT })
+
+    var tweenArr: TweenData[] = [];
+    var dir: boolean = true// = (time / allTime) % 2 == 0;
+    var curIndex = 0;
+    var lastIndex = 0;
+    while (time > 0) {
+        dir ? curIndex++ : curIndex--;
+        //如果超了，就反向
+        if (curIndex > objArrC.length - 1) {
+            dir = false;
+            curIndex -= 2
+        }
+        else if (curIndex < 0) {
+            dir = true;
+            curIndex += 2
+        }
+        var deltaT = Math.abs(objArrC[lastIndex].timeOri - objArrC[curIndex].timeOri);
+        tweenArr.unshift({
+            obj: objArrC[lastIndex].obj,
+            deltaT,
+            deltaTime: deltaT * timeInterval,
+            timeOri: objArrC[lastIndex].timeOri,
+            isSet: objArrC[lastIndex].isSet
+        })
+        lastIndex = curIndex;
+        time -= deltaT
+    }
+    //塞入
+    tweenArr.unshift({
+        obj: objArrC[lastIndex].obj,
+        deltaT: 0,
+        deltaTime: 0,
+        timeOri: objArrC[lastIndex].timeOri,
+        isSet: true
+    })
+    //把剩下的，除了第一项不要
+    //得考虑超出的op
+    for (var i = 1; i < objArr.length; i++) {
+        if (objArr[i].timeOri > op) break;
+        tweenArr.push(objArr[i]);
+    }
+    // objArr.forEach((o, i) => {
+    //     if (i) tweenArr.push(o)
+    // })
+
+
+
+    return tweenArr
+}
\ No newline at end of file

src/2d/ui/index.ts

@@ -5,3 +5,5 @@ export * from "./ScrollList";
 export * from "./ShowWord";
 
 export * from "./MovieClip";
+
+export * from "./Lottie";
\ No newline at end of file

test/js/cloud_back.js

+const cloud_back = {
+	"v": "5.6.10",
+	"fr": 30,
+	"ip": 0,
+	"op": 120,
+	"w": 750,
+	"h": 1624,
+	"nm": "cloud_back",
+	"layers": [
+		{
+			"ind": 1,
+			"ty": 2,
+			"nm": "control",
+			"refId": "cloud_7",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 1
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								997,
+								652,
+								0
+							]
+						},
+						{
+							"t": 59,
+							"s": [
+								997,
+								675,
+								0
+							]
+						},
+						{
+							"t": 120,
+							"s": [
+								997,
+								652,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						249,
+						110,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 0,
+			"op": 450
+		},
+		{
+			"ind": 2,
+			"ty": 2,
+			"nm": "cloud_3.png",
+			"parent": 1,
+			"refId": "cloud_3",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -12,
+							"s": [
+								434,
+								-20,
+								0
+							]
+						},
+						{
+							"t": 33,
+							"s": [
+								-1190,
+								454,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						446.5,
+						151.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -12,
+			"op": 438
+		},
+		{
+			"ind": 3,
+			"ty": 2,
+			"nm": "cloud_2.png",
+			"parent": 1,
+			"refId": "cloud_2",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -17,
+							"s": [
+								308,
+								140,
+								0
+							]
+						},
+						{
+							"t": 48,
+							"s": [
+								-1060,
+								550,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						317,
+						102,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -17,
+			"op": 423
+		},
+		{
+			"ind": 4,
+			"ty": 2,
+			"nm": "cloud_1.png",
+			"parent": 1,
+			"refId": "cloud_1",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 1,
+					"k": [
+						{
+							"t": -35,
+							"s": [
+								-5
+							]
+						},
+						{
+							"t": 60,
+							"s": [
+								2
+							]
+						}
+					]
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -35,
+							"s": [
+								537.999,
+								164.3,
+								0
+							]
+						},
+						{
+							"t": 13,
+							"s": [
+								-385.998,
+								477.299,
+								0
+							]
+						},
+						{
+							"t": 61,
+							"s": [
+								-1318.001,
+								786.3,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						535,
+						153,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -35,
+			"op": 407
+		},
+		{
+			"ind": 5,
+			"ty": 2,
+			"nm": "cloud_3.png",
+			"parent": 1,
+			"refId": "cloud_3",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 108,
+							"s": [
+								434,
+								-20,
+								0
+							]
+						},
+						{
+							"t": 153,
+							"s": [
+								-1190,
+								454,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						446.5,
+						151.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 108,
+			"op": 558
+		},
+		{
+			"ind": 6,
+			"ty": 2,
+			"nm": "cloud_2.png",
+			"parent": 1,
+			"refId": "cloud_2",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 103,
+							"s": [
+								308,
+								140,
+								0
+							]
+						},
+						{
+							"t": 168,
+							"s": [
+								-1060,
+								550,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						317,
+						102,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 103,
+			"op": 543
+		},
+		{
+			"ind": 7,
+			"ty": 2,
+			"nm": "cloud_1.png",
+			"parent": 1,
+			"refId": "cloud_1",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 1,
+					"k": [
+						{
+							"t": 84,
+							"s": [
+								-5
+							]
+						},
+						{
+							"t": 179,
+							"s": [
+								2
+							]
+						}
+					]
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 84,
+							"s": [
+								537.999,
+								164.3,
+								0
+							]
+						},
+						{
+							"t": 132,
+							"s": [
+								-385.998,
+								477.299,
+								0
+							]
+						},
+						{
+							"t": 180,
+							"s": [
+								-1318.001,
+								786.3,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						535,
+						153,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 84,
+			"op": 526
+		},
+		{
+			"ind": 8,
+			"ty": 2,
+			"nm": "cloud_3.png",
+			"parent": 1,
+			"refId": "cloud_3",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 48,
+							"s": [
+								434,
+								-20,
+								0
+							]
+						},
+						{
+							"t": 93,
+							"s": [
+								-1190,
+								454,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						446.5,
+						151.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 48,
+			"op": 498
+		},
+		{
+			"ind": 9,
+			"ty": 2,
+			"nm": "cloud_2.png",
+			"parent": 1,
+			"refId": "cloud_2",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 43,
+							"s": [
+								308,
+								140,
+								0
+							]
+						},
+						{
+							"t": 108,
+							"s": [
+								-1060,
+								550,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						317,
+						102,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 43,
+			"op": 483
+		},
+		{
+			"ind": 10,
+			"ty": 2,
+			"nm": "cloud_1.png",
+			"parent": 1,
+			"refId": "cloud_1",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 1,
+					"k": [
+						{
+							"t": 24,
+							"s": [
+								-5
+							]
+						},
+						{
+							"t": 119,
+							"s": [
+								2
+							]
+						}
+					]
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 24,
+							"s": [
+								537.999,
+								164.3,
+								0
+							]
+						},
+						{
+							"t": 72,
+							"s": [
+								-385.998,
+								477.299,
+								0
+							]
+						},
+						{
+							"t": 120,
+							"s": [
+								-1318.001,
+								786.3,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						535,
+						153,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 24,
+			"op": 466
+		}
+	],
+	"markers": []
+}
\ No newline at end of file

test/js/cloud_front.js

+const cloud_front = {
+	"v": "5.6.10",
+	"fr": 30,
+	"ip": 0,
+	"op": 120,
+	"w": 750,
+	"h": 1624,
+	"nm": "cloud_front",
+	"layers": [
+		{
+			"ind": 1,
+			"ty": 2,
+			"nm": "control",
+			"refId": "cloud_7",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 1
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								997,
+								652,
+								0
+							]
+						},
+						{
+							"t": 59,
+							"s": [
+								997,
+								675,
+								0
+							]
+						},
+						{
+							"t": 120,
+							"s": [
+								997,
+								652,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						249,
+						110,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 0,
+			"op": 450
+		},
+		{
+			"ind": 2,
+			"ty": 2,
+			"nm": "cloud_7.png",
+			"parent": 1,
+			"refId": "a5bbb59e-f2cb-4599-a952-76f361200a24",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -35,
+							"s": [
+								249,
+								110,
+								0
+							]
+						},
+						{
+							"t": 40,
+							"s": [
+								-1009,
+								442,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						249,
+						110,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -35,
+			"op": 415
+		},
+		{
+			"ind": 3,
+			"ty": 2,
+			"nm": "cloud_6.png",
+			"parent": 1,
+			"refId": "cloud_6",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -60,
+							"s": [
+								306,
+								-264,
+								0
+							]
+						},
+						{
+							"t": 20,
+							"s": [
+								-1040,
+								146,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						298.5,
+						130,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -60,
+			"op": 390
+		},
+		{
+			"ind": 4,
+			"ty": 2,
+			"nm": "cloud_5.png",
+			"parent": 1,
+			"refId": "cloud_5",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -29,
+							"s": [
+								558,
+								-288,
+								0
+							]
+						},
+						{
+							"t": 46,
+							"s": [
+								-1300,
+								382,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						537.5,
+						191.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -29,
+			"op": 421
+		},
+		{
+			"ind": 5,
+			"ty": 2,
+			"nm": "cloud_4.png",
+			"parent": 1,
+			"refId": "cloud_4",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": -51,
+							"s": [
+								154,
+								-64,
+								0
+							]
+						},
+						{
+							"t": 9,
+							"s": [
+								-894,
+								270,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						144.5,
+						74,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": -51,
+			"op": 399
+		},
+		{
+			"ind": 6,
+			"ty": 2,
+			"nm": "cloud_7.png",
+			"parent": 1,
+			"refId": "a5bbb59e-f2cb-4599-a952-76f361200a24",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 85,
+							"s": [
+								249,
+								110,
+								0
+							]
+						},
+						{
+							"t": 160,
+							"s": [
+								-1009,
+								442,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						249,
+						110,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 85,
+			"op": 535
+		},
+		{
+			"ind": 7,
+			"ty": 2,
+			"nm": "cloud_6.png",
+			"parent": 1,
+			"refId": "cloud_6",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 60,
+							"s": [
+								306,
+								-264,
+								0
+							]
+						},
+						{
+							"t": 140,
+							"s": [
+								-1040,
+								146,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						298.5,
+						130,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 60,
+			"op": 510
+		},
+		{
+			"ind": 8,
+			"ty": 2,
+			"nm": "cloud_5.png",
+			"parent": 1,
+			"refId": "cloud_5",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 91,
+							"s": [
+								558,
+								-288,
+								0
+							]
+						},
+						{
+							"t": 166,
+							"s": [
+								-1300,
+								382,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						537.5,
+						191.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 91,
+			"op": 541
+		},
+		{
+			"ind": 9,
+			"ty": 2,
+			"nm": "cloud_4.png",
+			"parent": 1,
+			"refId": "cloud_4",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 69,
+							"s": [
+								154,
+								-64,
+								0
+							]
+						},
+						{
+							"t": 129,
+							"s": [
+								-894,
+								270,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						144.5,
+						74,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 69,
+			"op": 519
+		},
+		{
+			"ind": 10,
+			"ty": 2,
+			"nm": "cloud_7.png",
+			"parent": 1,
+			"refId": "a5bbb59e-f2cb-4599-a952-76f361200a24",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 25,
+							"s": [
+								249,
+								110,
+								0
+							]
+						},
+						{
+							"t": 100,
+							"s": [
+								-1009,
+								442,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						249,
+						110,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 25,
+			"op": 475
+		},
+		{
+			"ind": 11,
+			"ty": 2,
+			"nm": "cloud_6.png",
+			"parent": 1,
+			"refId": "cloud_6",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								306,
+								-264,
+								0
+							]
+						},
+						{
+							"t": 80,
+							"s": [
+								-1040,
+								146,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						298.5,
+						130,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 0,
+			"op": 450
+		},
+		{
+			"ind": 12,
+			"ty": 2,
+			"nm": "cloud_5.png",
+			"parent": 1,
+			"refId": "cloud_5",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 31,
+							"s": [
+								558,
+								-288,
+								0
+							]
+						},
+						{
+							"t": 106,
+							"s": [
+								-1300,
+								382,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						537.5,
+						191.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 31,
+			"op": 481
+		},
+		{
+			"ind": 13,
+			"ty": 2,
+			"nm": "cloud_4.png",
+			"parent": 1,
+			"refId": "cloud_4",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 9,
+							"s": [
+								154,
+								-64,
+								0
+							]
+						},
+						{
+							"t": 69,
+							"s": [
+								-894,
+								270,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						144.5,
+						74,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 9,
+			"op": 459
+		}
+	],
+	"markers": []
+}
\ No newline at end of file

test/js/egg_break.js

+const egg_break = {
+	"v": "5.6.10",
+	"fr": 30,
+	"ip": 0,
+	"op": 45,
+	"w": 750,
+	"h": 1624,
+	"nm": "egg_break",
+	"layers": [
+		{
+			"ind": 1,
+			"ty": 2,
+			"nm": "egg_1.png",
+			"refId": "egg_1",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						375,
+						822,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						300.5,
+						238.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 20,
+			"op": 469
+		},
+		{
+			"ind": 2,
+			"ty": 2,
+			"nm": "light_1.png",
+			"refId": "light_1",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 27,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 42,
+							"s": [
+								80
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						374,
+						816,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						557.5,
+						493,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 27,
+							"s": [
+								64,
+								64,
+								100
+							]
+						},
+						{
+							"t": 42,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 27,
+			"op": 457
+		},
+		{
+			"ind": 3,
+			"ty": 2,
+			"nm": "light.png",
+			"refId": "light",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 14,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 20,
+							"s": [
+								90
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": -7
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						342,
+						717,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						89.5,
+						517,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						120,
+						100
+					]
+				}
+			},
+			"ip": 14,
+			"op": 464
+		},
+		{
+			"ind": 4,
+			"ty": 2,
+			"nm": "light.png",
+			"refId": "light",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 10,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 16,
+							"s": [
+								90
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": 15
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						420,
+						698,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						89.5,
+						517,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 10,
+							"s": [
+								100,
+								40,
+								100
+							]
+						},
+						{
+							"t": 16,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 10,
+			"op": 460
+		},
+		{
+			"ind": 5,
+			"ty": 2,
+			"nm": "light.png",
+			"refId": "light",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 6,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 12,
+							"s": [
+								70
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": 28
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						493,
+						690,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						89.5,
+						517,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 6,
+							"s": [
+								100,
+								30,
+								100
+							]
+						},
+						{
+							"t": 12,
+							"s": [
+								100,
+								90,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 6,
+			"op": 456
+		},
+		{
+			"ind": 6,
+			"ty": 2,
+			"nm": "light_s.png",
+			"refId": "light_s",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 2,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 8,
+							"s": [
+								70
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": 52
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						578,
+						640,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						89.5,
+						429.17,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 2,
+							"s": [
+								100,
+								40,
+								100
+							]
+						},
+						{
+							"t": 8,
+							"s": [
+								100,
+								80,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 2,
+			"op": 452
+		},
+		{
+			"ind": 7,
+			"ty": 2,
+			"nm": "light_s.png",
+			"refId": "light_s",
+			"ks": {
+				"o": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 6,
+							"s": [
+								70
+							]
+						}
+					]
+				},
+				"r": {
+					"a": 0,
+					"k": -47
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						143,
+						727,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						89.5,
+						429.17,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								100,
+								40,
+								100
+							]
+						},
+						{
+							"t": 6,
+							"s": [
+								100,
+								90,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 0,
+			"op": 450
+		},
+		{
+			"ind": 8,
+			"ty": 2,
+			"nm": "egg_2.png",
+			"refId": "egg_2",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 1,
+					"k": [
+						{
+							"t": 42,
+							"s": [
+								0
+							]
+						},
+						{
+							"t": 45,
+							"s": [
+								-7
+							]
+						}
+					]
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 42,
+							"s": [
+								128,
+								717,
+								0
+							]
+						},
+						{
+							"t": 45,
+							"s": [
+								124,
+								692,
+								0
+							]
+						}
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						50,
+						264,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 20,
+			"op": 446
+		},
+		{
+			"ind": 9,
+			"ty": 2,
+			"nm": "crevice_5.png",
+			"refId": "crevice_5",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": -20
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						121.5,
+						738,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						1.578,
+						5.132,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								0,
+								100,
+								100
+							]
+						},
+						{
+							"t": 3,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 0,
+			"op": 444
+		},
+		{
+			"ind": 10,
+			"ty": 2,
+			"nm": "crevice_4.png",
+			"refId": "crevice_4",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						340,
+						718,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						32,
+						35,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 14,
+			"op": 453
+		},
+		{
+			"ind": 11,
+			"ty": 2,
+			"nm": "crevice_3.png",
+			"refId": "crevice_3",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 15
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						469.5,
+						709.75,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						101.811,
+						4.103,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 10,
+							"s": [
+								0,
+								100,
+								100
+							]
+						},
+						{
+							"t": 12,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 10,
+			"op": 450
+		},
+		{
+			"ind": 12,
+			"ty": 2,
+			"nm": "crevice_2.png",
+			"refId": "crevice_2",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": -40
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						550.25,
+						643,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						107.324,
+						6.513,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 6,
+							"s": [
+								0,
+								100,
+								100
+							]
+						},
+						{
+							"t": 8,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 6,
+			"op": 448
+		},
+		{
+			"ind": 13,
+			"ty": 2,
+			"nm": "crevice_1.png",
+			"refId": "crevice_1",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": -24
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						589,
+						628.25,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						46,
+						8.5,
+						0
+					]
+				},
+				"s": {
+					"a": 1,
+					"k": [
+						{
+							"t": 2,
+							"s": [
+								0,
+								100,
+								100
+							]
+						},
+						{
+							"t": 4,
+							"s": [
+								100,
+								100,
+								100
+							]
+						}
+					]
+				}
+			},
+			"ip": 2,
+			"op": 446
+		},
+		{
+			"ind": 14,
+			"ty": 2,
+			"nm": "egg_0.png",
+			"refId": "egg_0",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 0,
+					"k": [
+						375,
+						760,
+						0
+					]
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						300.5,
+						300.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 0,
+			"op": 20
+		}
+	],
+	"markers": [
+		{
+			"tm": 30,
+			"cm": "1",
+			"dr": 0
+		}
+	]
+}
\ No newline at end of file

test/js/egg_loop.js

+const egg_loop = {
+	"v": "5.6.10",
+	"fr": 30,
+	"ip": 0,
+	"op": 90,
+	"w": 750,
+	"h": 1624,
+	"nm": "egg_loop",
+	"layers": [
+		{
+			"ind": 2,
+			"ty": 2,
+			"nm": "egg_0.png",
+			"refId": "egg_0",
+			"ks": {
+				"o": {
+					"a": 0,
+					"k": 100
+				},
+				"r": {
+					"a": 0,
+					"k": 0
+				},
+				"p": {
+					"a": 1,
+					"k": [
+						{
+							"t": 0,
+							"s": [
+								375,
+								760,
+								0
+							]
+						},
+						{
+							"t": 45,
+							"s": [
+								375,
+								782,
+								0
+							]
+						},
+						{
+							"t": 90,
+							"s": [
+								375,
+								760,
+								0
+							]
+						}
+					],
+					"x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+				},
+				"a": {
+					"a": 0,
+					"k": [
+						300.5,
+						300.5,
+						0
+					]
+				},
+				"s": {
+					"a": 0,
+					"k": [
+						100,
+						100,
+						100
+					]
+				}
+			},
+			"ip": 0,
+			"op": 450
+		}
+	],
+	"markers": []
+}
\ No newline at end of file

test/js/res.js

+const res = {
+    "cloud_5.png": {
+        "x": 2,
+        "y": 2,
+        "w": 1075,
+        "h": 383,
+        "ox": 0,
+        "oy": 0,
+        "sw": 1075,
+        "sh": 383,
+        "ro": false
+    },
+    "cloud_1.png": {
+        "x": 2,
+        "y": 387,
+        "w": 1070,
+        "h": 306,
+        "ox": 0,
+        "oy": 0,
+        "sw": 1070,
+        "sh": 306,
+        "ro": false
+    },
+    "light_1.png": {
+        "x": 2,
+        "y": 695,
+        "w": 1015,
+        "h": 481,
+        "ox": 0,
+        "oy": 29,
+        "sw": 1119,
+        "sh": 510,
+        "ro": false
+    },
+    "cloud_3.png": {
+        "x": 1079,
+        "y": 2,
+        "w": 893,
+        "h": 303,
+        "ox": 0,
+        "oy": 0,
+        "sw": 893,
+        "sh": 303,
+        "ro": true
+    },
+    "cloud_2.png": {
+        "x": 2,
+        "y": 1178,
+        "w": 634,
+        "h": 204,
+        "ox": 0,
+        "oy": 0,
+        "sw": 634,
+        "sh": 204,
+        "ro": false
+    },
+    "egg_0.png": {
+        "x": 1384,
+        "y": 2,
+        "w": 601,
+        "h": 601,
+        "ox": 0,
+        "oy": 0,
+        "sw": 601,
+        "sh": 601,
+        "ro": false
+    },
+    "egg_1.png": {
+        "x": 1384,
+        "y": 605,
+        "w": 601,
+        "h": 477,
+        "ox": 0,
+        "oy": 0,
+        "sw": 601,
+        "sh": 477,
+        "ro": false
+    },
+    "cloud_6.png": {
+        "x": 1019,
+        "y": 1084,
+        "w": 597,
+        "h": 260,
+        "ox": 0,
+        "oy": 0,
+        "sw": 597,
+        "sh": 260,
+        "ro": false
+    },
+    "egg_2.png": {
+        "x": 638,
+        "y": 1178,
+        "w": 550,
+        "h": 344,
+        "ox": 0,
+        "oy": 0,
+        "sw": 550,
+        "sh": 344,
+        "ro": true
+    },
+    "light.png": {
+        "x": 2,
+        "y": 1384,
+        "w": 143,
+        "h": 518,
+        "ox": 0,
+        "oy": 0,
+        "sw": 143,
+        "sh": 518,
+        "ro": true
+    },
+    "cloud_7.png": {
+        "x": 1618,
+        "y": 1084,
+        "w": 498,
+        "h": 220,
+        "ox": 0,
+        "oy": 0,
+        "sw": 498,
+        "sh": 220,
+        "ro": true
+    },
+    "light_s.png": {
+        "x": 984,
+        "y": 1584,
+        "w": 143,
+        "h": 430,
+        "ox": 0,
+        "oy": 0,
+        "sw": 143,
+        "sh": 430,
+        "ro": true
+    },
+    "cloud_4.png": {
+        "x": 1019,
+        "y": 897,
+        "w": 289,
+        "h": 148,
+        "ox": 0,
+        "oy": 0,
+        "sw": 289,
+        "sh": 148,
+        "ro": false
+    },
+    "crevice_2.png": {
+        "x": 522,
+        "y": 1384,
+        "w": 108,
+        "h": 11,
+        "ox": 0,
+        "oy": 0,
+        "sw": 108,
+        "sh": 11,
+        "ro": false
+    },
+    "crevice_3.png": {
+        "x": 522,
+        "y": 1397,
+        "w": 106,
+        "h": 9,
+        "ox": 0,
+        "oy": 0,
+        "sw": 106,
+        "sh": 9,
+        "ro": false
+    },
+    "crevice_4.png": {
+        "x": 1310,
+        "y": 897,
+        "w": 64,
+        "h": 70,
+        "ox": 0,
+        "oy": 0,
+        "sw": 64,
+        "sh": 70,
+        "ro": true
+    },
+    "crevice_5.png": {
+        "x": 1019,
+        "y": 695,
+        "w": 55,
+        "h": 10,
+        "ox": 0,
+        "oy": 0,
+        "sw": 55,
+        "sh": 10,
+        "ro": false
+    },
+    "crevice_1.png": {
+        "x": 1019,
+        "y": 707,
+        "w": 48,
+        "h": 16,
+        "ox": 0,
+        "oy": 0,
+        "sw": 48,
+        "sh": 16,
+        "ro": false
+    }
+}
\ No newline at end of file

test/test.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="full-screen" content="true" />
+    <meta name="screen-orientation" content="portrait" />
+    <meta name="x5-fullscreen" content="true" />
+    <meta name="360-fullscreen" content="true" />
+    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
+    <!-- 小程序分享得用这个 -->
+    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
+    <!-- 易盾js -->
+    <!-- <script type="text/javascript" src="//cstaticdun.126.net/load.min.js"></script> -->
+    <!-- <script src="libs/zepto.min.js"></script> -->
+    <!-- <script src="libs/p2.js"></script> -->
+    <script src="../build/fyge.min.js"></script>
+    <script src="./js/res.js"></script>
+    <script src="./js/egg_break.js"></script>
+    <script src="./js/egg_loop.js"></script>
+    <script src="./js/cloud_back.js"></script>
+    <script src="./js/cloud_front.js"></script>
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+            border: 0;
+
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            position: absolute;
+            background-color: #eeeeee;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="cusEngine" style="line-height:0;font-size:0">
+        <canvas id="canvas" style="width: 100%;height: 100%"></canvas>
+    </div>
+</body>
+<script>
+    window.addEventListener("load", async function () {
+        //获取canvas
+        var canvas = document.getElementById("canvas");
+        canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
+        canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
+        //小程序上canvas用自己的方式建
+        // var canvas = await new Promise((r) => {
+        //     my.createCanvas({
+        //         id: 'canvas',
+        //         success: (ccc) => {
+        //             const dpr = my.getSystemInfoSync().pixelRatio
+        //             const windowWidth = my.getSystemInfoSync().windowWidth;
+        //             const windowHeight = my.getSystemInfoSync().windowHeight;
+        //             ccc.width = windowWidth * dpr + dpr;//重新修改会有误差
+        //             ccc.height = windowHeight * dpr + dpr;
+        //             r(ccc);
+        //         }
+        //     })
+        // })
+
+
+
+        var sysInfo;
+        //@ts-ignore 存在my就初始化
+        if (my) {
+            FYGE.initedByCanvas(canvas)
+            //@ts-ignore 存在my就初始化
+            sysInfo = my.getSystemInfoSync()
+        }
+        //建舞台
+        var stage = new FYGE.Stage(
+            canvas,
+            750,//设计宽度，按设计搞给的就行
+            1624,//设计高度
+            sysInfo && sysInfo.windowWidth || document.body.clientWidth,
+            sysInfo && sysInfo.windowHeight || document.body.clientHeight,
+            FYGE.RENDERER_TYPE.CANVAS
+        );
+        //stage初始化
+        stage.addEventListener(FYGE.Event.INIT_STAGE, () => {
+            //添加个背景
+            // var a = stage.addChild(new FYGE.Graphics())
+            //     .beginFill(0x000000, 0.7)
+            //     .drawRect(0, 0, 750, 1624)
+            //     .endFill()
+            //资源
+            FYGE.GlobalLoader.loadImage((s, image) => {
+                if (s) {
+                    //会进TextureCache
+                    FYGE.createTextureSheet(new FYGE.BaseTexture(image), res)
+
+                    var a = stage.addChild(new FYGE.Lottie(cloud_back))
+                    a.play();
+                    //加个lottie
+                    var b = stage.addChild(new FYGE.Lottie(egg_break))
+                    b.play();
+                    // var b = stage.addChild(new FYGE.Lottie(egg_loop))
+                    // b.play();
+
+
+                    var b = stage.addChild(new FYGE.Lottie(cloud_front))
+                    b.play()
+
+                } else {
+
+                }
+            }, "./res/res.png")
+
+        }, this);
+
+        //循环
+        loop();
+        function loop() {
+            FYGE.Tween.flush()
+            stage.flush();
+            FYGE.getRequestAnimationFrame()(loop);
+        }
+    })
+
+
+</script>
+
+</html>
\ No newline at end of file

webpack.config.js

@@ -4,7 +4,7 @@ var path = require('path');
 var webpack = require('webpack')
 
 module.exports = {
-    mode: "production",//'development',
+    mode: "production",//'development',production
     entry: {
         "fyge.min": "./src/index.ts",
     },
@@ -27,7 +27,8 @@ module.exports = {
     plugins: [
         new UglifyJSPlugin(
             { sourceMap: true }
-        ), new webpack.DefinePlugin({
+        ), 
+        new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify('production')
         })
     ],