@drecom/scene-graph-cocos-animation-rt - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib-ts/CocosAnimationRuntimeExtension.d.ts

@@ -37,2 +37,3 @@ /// <reference types="pixi.js" />
     elapsedTime: number;
+    colorMatrix?: PIXI.filters.ColorMatrixFilter;
     /**
@@ -60,6 +61,8 @@ * Seconds per frame by application fps
     /**
-     * Returns index of current key frame
-     * current key frame is calcurated by elapsed time and animation fps
+     * Returns index of current key frame.
+     * Current key frame is calcurated by elapsed time and animation fps.
+     * It returns -1 when the elapsedTime has not been reached to the earliest key frame yet.
+     * Also it returns the length of key frame to indicate all key frames are passed.
      */
-    private getCurrentFrameIndex;
+    private getCurrentKeyFrameIndex;
     /**
@@ -66,0 +69,0 @@ * Update animation if possible

lib/scene-graph-cocos-animation-rt.js

@@ -138,7 +138,18 @@ (function webpackUniversalModuleDefinition(root, factory) {
             if (option.autoCoordinateFix) {
-                // calibrate anchor system difference
-                if (!container.anchor) {
-                    container.pivot.set(container.width * 0.5, container.height * 0.5);
-                    container.position.x += container.width * container.scale.x * 0.5;
-                    container.position.y += container.height * container.scale.y * 0.5;
+                for (var i = 0; i < container.sgmed.cocosAnimations.length; i++) {
+                    var cocosAnimation = container.sgmed.cocosAnimations[i];
+                    var properties = Object.keys(cocosAnimation.curves);
+                    for (var j = 0; j < properties.length; j++) {
+                        var property = properties[j];
+                        if (property !== 'position') {
+                            continue;
+                        }
+                        var curve = cocosAnimation.curves[property];
+                        for (var k = 0; k < curve.keyFrames.length; k++) {
+                            var keyFrame = curve.keyFrames[k];
+                            var value = keyFrame.value;
+                            // cocos coordinate system
+                            value.y = -value.y;
+                        }
+                    }
                 }
@@ -202,2 +213,3 @@ }
         this.elapsedTime = 0;
+        this.colorMatrix = undefined;
         this.animation = animation;
@@ -265,6 +277,8 @@ this.target = target;
     /**
-     * Returns index of current key frame
-     * current key frame is calcurated by elapsed time and animation fps
+     * Returns index of current key frame.
+     * Current key frame is calcurated by elapsed time and animation fps.
+     * It returns -1 when the elapsedTime has not been reached to the earliest key frame yet.
+     * Also it returns the length of key frame to indicate all key frames are passed.
      */
-    CocosAnimationRuntimeExtension.prototype.getCurrentFrameIndex = function (keyFrames, elapsedTime, fps) {
+    CocosAnimationRuntimeExtension.prototype.getCurrentKeyFrameIndex = function (keyFrames, elapsedTime, fps) {
         var spf = 1.0 / fps;
@@ -280,3 +294,8 @@ for (var i = keyFrames.length - 1; i >= 0; i--) {
         }
-        return -1;
+        if ((spf * (fps * keyFrames[0].frame)) > elapsedTime) {
+            return -1;
+        }
+        else {
+            return keyFrames.length;
+        }
     };
@@ -287,2 +306,3 @@ /**
     CocosAnimationRuntimeExtension.prototype.update = function (dt) {
+        var _this = this;
         if (this.paused) {
@@ -297,6 +317,11 @@ return;
             var curve = this.animation.curves[property];
-            var currentFrameIndex = this.getCurrentFrameIndex(curve.keyFrames, this.elapsedTime, this.animation.sample);
+            var currentFrameIndex = this.getCurrentKeyFrameIndex(curve.keyFrames, this.elapsedTime, this.animation.sample);
             if (currentFrameIndex === -1) {
+                activeCurveExists = true;
                 continue;
             }
+            else if (currentFrameIndex === curve.keyFrames.length) {
+                // finished
+                continue;
+            }
             var curveFuncs = this.curveFuncsMap.get(property);
@@ -312,4 +337,13 @@ if (!curveFuncs || curveFuncs.length == 0) {
                 nextFrame = currentFrame;
-                currentFrame = curve.keyFrames[currentFrameIndex - 1];
-                timeRatio = 1.0;
+                if (currentFrameIndex > 0) {
+                    currentFrame = curve.keyFrames[currentFrameIndex - 1];
+                }
+                // TODO: next version feature
+                timeRatio = this.elapsedTime / this.animation.duration;
+                if (timeRatio < 1.0) {
+                    activeCurveExists = true;
+                }
+                else {
+                    timeRatio = 1.0;
+                }
             }
@@ -343,3 +377,20 @@ else {
             convertInfo.forEach(function (item) {
-                item.target[item.key] = item.value;
+                if (item.key === 'alpha') {
+                    if (item.target.alpha === undefined) {
+                        if (!_this.colorMatrix) {
+                            _this.colorMatrix = new PIXI.filters.ColorMatrixFilter();
+                            if (!item.target.filters) {
+                                item.target.filters = [];
+                            }
+                            item.target.filters.push(_this.colorMatrix);
+                        }
+                        _this.colorMatrix.alpha = item.value;
+                    }
+                    else {
+                        item.target[item.key] = item.value;
+                    }
+                }
+                else {
+                    item.target[item.key] = item.value;
+                }
             });
@@ -371,3 +422,3 @@ }
             case 'opacity': return {
-                target: params.target.position,
+                target: params.target,
                 key: 'alpha',
@@ -374,0 +425,0 @@ value: value / 255

lib/scene-graph-cocos-animation-rt.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["scene-graph-cocos-animation-rt"]=e():t["scene-graph-cocos-animation-rt"]=e()}(window,function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){"use strict";r.r(e);var n={linear:function(t){return t},quadOut:function(t){return t*(2-t)}},i=2*Math.PI;function a(t){return t<0?-Math.pow(-t,1/3):Math.pow(t,1/3)}function o(t,e){var r=function(t,e){var r=e,n=e-t[0],o=3*r,u=3*n,s=3*(e-t[2]),c=1/(-r+u-s+(e-1)),f=(o-6*n+s)*c,m=f*(1/3),p=(-o+u)*c,l=1/3*(3*p-f*f),g=l*(1/3),h=(2*f*f*f-9*f*p+r*c*27)/27,v=h/2,y=v*v+g*g*g;if(y<0){var d=1/3*-l,b=d*d*d,P=Math.sqrt(b),M=-h/(2*P),F=M<-1?-1:M>1?1:M,x=Math.acos(F),j=2*a(P),k=j*Math.cos(x*(1/3))-m,O=j*Math.cos((x+i)*(1/3))-m,w=j*Math.cos((x+2*i)*(1/3))-m;return 0<=k&&k<=1?0<=O&&O<=1?0<=w&&w<=1?Math.max(k,O,w):Math.max(k,O):0<=w&&w<=1?Math.max(k,w):k:0<=O&&O<=1?0<=w&&w<=1?Math.max(O,w):O:w}if(0===y){var A=v<0?a(-v):-a(v);return O=-A-m,0<=(k=2*A-m)&&k<=1?0<=O&&O<=1?Math.max(k,O):k:O}var C=Math.sqrt(y);return a(-v+C)-a(v+C)-m}(t,e),n=1-r;return 3*t[1]*r*n*n+3*t[3]*r*r*n+r*r*r}var u=Math.PI/180;var s=function(){function t(e,r){this.fps=60,this.paused=!1,this.elapsedTime=0,this.animation=e,this.target=r,this.animationFrameTime=1/this.animation.sample,this.curveFuncsMap=new Map;for(var n=Object.keys(this.animation.curves),i=0;i<n.length;i++){for(var a=n[i],o=[],u=this.animation.curves[a],s=0;s<u.keyFrames.length;s++){var c=u.keyFrames[s],f=t.getCurveFunction(c.curve);o.push(f)}this.curveFuncsMap.set(a,o)}}return Object.defineProperty(t.prototype,"spf",{get:function(){return 1/this.fps},enumerable:!0,configurable:!0}),t.getCurveFunction=function(t){return t?"string"==typeof t?n.hasOwnProperty(t)?n[t]:n.linear:function(t){return function(e){return o(t,e)}}(t):n.linear},t.prototype.pause=function(){this.paused=!0},t.prototype.resume=function(){this.paused=!1},t.prototype.reset=function(){this.elapsedTime=0},t.prototype.getCurrentFrameIndex=function(t,e,r){for(var n=1/r,i=t.length-1;i>=0;i--){if(n*(r*t[i].frame)<e)return i}return-1},t.prototype.update=function(e){if(!this.paused){this.elapsedTime+=e*this.spf;for(var r=!1,n=Object.keys(this.animation.curves),i=0;i<n.length;i++){var a=n[i],o=this.animation.curves[a],u=this.getCurrentFrameIndex(o.keyFrames,this.elapsedTime,this.animation.sample);if(-1!==u){var s=this.curveFuncsMap.get(a);if(s&&0!=s.length){var c=void 0,f=o.keyFrames[u],m=0;if(u>=o.keyFrames.length-1)c=f,f=o.keyFrames[u-1],m=1;else{var p=this.animationFrameTime*(this.animation.sample*f.frame);c=o.keyFrames[u+1],m=(this.elapsedTime-p)/(this.animationFrameTime*(this.animation.sample*c.frame)-p),r=!0}var l=c.value,g=f.value,h=s[u],v={target:this.target,animationProperty:a,currentValue:g,targetValue:l,timeRatio:m,curveFunc:h};t.getAnimationPropertyConversionInfoSet(v).forEach(function(t){t.target[t.key]=t.value})}}}r||(this.paused=!0)}},t.getPrimitiveAnimationPropertyConversionInfo=function(t){var e=t.targetValue-t.currentValue,r=t.currentValue+e*t.curveFunc(t.timeRatio);switch(t.animationProperty){case"x":return{target:t.target.position,key:t.animationProperty,value:r};case"y":return{target:t.target.position,key:t.animationProperty,value:-1*r};case"rotation":return{target:t.target,key:t.animationProperty,value:r*u};case"opacity":return{target:t.target.position,key:"alpha",value:r/255};default:return{target:t.target,key:t.animationProperty,value:r}}},t.getObjectAnimationPropertyConversionInfoSet=function(t){var e=new Set,r=t.targetValue,n=t.currentValue;if("color"===t.animationProperty){var i=t.curveFunc(t.timeRatio);if("tint"in t.target){var a={r:n.r/255,g:n.g/255,b:n.b/255},o={r:r.r/255,g:r.g/255,b:r.b/255},u={r:(o.r-a.r)*i*16711680,g:(o.g-a.g)*i*65280,b:(o.b-a.b)*i*255};e.add({target:t.target,key:"tint",value:a.r/16711680+(u.r-u.r%65536)+a.g/65280+(u.g-u.g%256)+a.b/255+u.b})}}else for(var s=Object.getOwnPropertyNames(n),c=0;c<s.length;c++){var f=s[c],m=r[f]-n[f],p=n[f]+m*t.curveFunc(t.timeRatio);e.add({target:t.target[t.animationProperty],key:f,value:p})}return e},t.getAnimationPropertyConversionInfoSet=function(e){if("number"==typeof e.currentValue){var r=new Set,n=t.getPrimitiveAnimationPropertyConversionInfo(e);return r.add(n),r}return t.getObjectAnimationPropertyConversionInfoSet(e)},t}(),c=function(){function t(){}return t.prototype.extendRuntimeObjects=function(t,e,r,n){e.forEach(function(t,e){if(t.animations){var i=r.get(e);if(i.sgmed||(i.sgmed={}),i.sgmed.cocosAnimations=t.animations,i.sgmed.cocosAnimations){for(var a=0;a<i.sgmed.cocosAnimations.length;a++){var o=i.sgmed.cocosAnimations[a];o.runtime=new s(o,i)}n.autoCoordinateFix&&(i.anchor||(i.pivot.set(.5*i.width,.5*i.height),i.position.x+=i.width*i.scale.x*.5,i.position.y+=i.height*i.scale.y*.5))}}})},t.prototype.filterAnimationContainer=function(t,e){void 0===e&&(e=[]),t.sgmed&&t.sgmed.cocosAnimations&&e.push(t);for(var r=0;r<t.children.length;r++)this.filterAnimationContainer(t.children[r],e);return e},t}();e.default=c}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["scene-graph-cocos-animation-rt"]=e():t["scene-graph-cocos-animation-rt"]=e()}(window,function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var a=e[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)r.d(n,a,function(e){return t[e]}.bind(null,a));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){"use strict";r.r(e);var n={linear:function(t){return t},quadOut:function(t){return t*(2-t)}},a=2*Math.PI;function i(t){return t<0?-Math.pow(-t,1/3):Math.pow(t,1/3)}function o(t,e){var r=function(t,e){var r=e,n=e-t[0],o=3*r,u=3*n,s=3*(e-t[2]),c=1/(-r+u-s+(e-1)),f=(o-6*n+s)*c,m=f*(1/3),l=(-o+u)*c,p=1/3*(3*l-f*f),g=p*(1/3),h=(2*f*f*f-9*f*l+r*c*27)/27,v=h/2,y=v*v+g*g*g;if(y<0){var d=1/3*-p,b=d*d*d,M=Math.sqrt(b),P=-h/(2*M),F=P<-1?-1:P>1?1:P,x=Math.acos(F),k=2*i(M),j=k*Math.cos(x*(1/3))-m,O=k*Math.cos((x+a)*(1/3))-m,A=k*Math.cos((x+2*a)*(1/3))-m;return 0<=j&&j<=1?0<=O&&O<=1?0<=A&&A<=1?Math.max(j,O,A):Math.max(j,O):0<=A&&A<=1?Math.max(j,A):j:0<=O&&O<=1?0<=A&&A<=1?Math.max(O,A):O:A}if(0===y){var C=v<0?i(-v):-i(v);return O=-C-m,0<=(j=2*C-m)&&j<=1?0<=O&&O<=1?Math.max(j,O):j:O}var w=Math.sqrt(y);return i(-v+w)-i(v+w)-m}(t,e),n=1-r;return 3*t[1]*r*n*n+3*t[3]*r*r*n+r*r*r}var u=Math.PI/180;var s=function(){function t(e,r){this.fps=60,this.paused=!1,this.elapsedTime=0,this.colorMatrix=void 0,this.animation=e,this.target=r,this.animationFrameTime=1/this.animation.sample,this.curveFuncsMap=new Map;for(var n=Object.keys(this.animation.curves),a=0;a<n.length;a++){for(var i=n[a],o=[],u=this.animation.curves[i],s=0;s<u.keyFrames.length;s++){var c=u.keyFrames[s],f=t.getCurveFunction(c.curve);o.push(f)}this.curveFuncsMap.set(i,o)}}return Object.defineProperty(t.prototype,"spf",{get:function(){return 1/this.fps},enumerable:!0,configurable:!0}),t.getCurveFunction=function(t){return t?"string"==typeof t?n.hasOwnProperty(t)?n[t]:n.linear:function(t){return function(e){return o(t,e)}}(t):n.linear},t.prototype.pause=function(){this.paused=!0},t.prototype.resume=function(){this.paused=!1},t.prototype.reset=function(){this.elapsedTime=0},t.prototype.getCurrentKeyFrameIndex=function(t,e,r){for(var n=1/r,a=t.length-1;a>=0;a--){if(n*(r*t[a].frame)<e)return a}return n*(r*t[0].frame)>e?-1:t.length},t.prototype.update=function(e){var r=this;if(!this.paused){this.elapsedTime+=e*this.spf;for(var n=!1,a=Object.keys(this.animation.curves),i=0;i<a.length;i++){var o=a[i],u=this.animation.curves[o],s=this.getCurrentKeyFrameIndex(u.keyFrames,this.elapsedTime,this.animation.sample);if(-1!==s){if(s!==u.keyFrames.length){var c=this.curveFuncsMap.get(o);if(c&&0!=c.length){var f=void 0,m=u.keyFrames[s],l=0;if(s>=u.keyFrames.length-1)f=m,s>0&&(m=u.keyFrames[s-1]),(l=this.elapsedTime/this.animation.duration)<1?n=!0:l=1;else{var p=this.animationFrameTime*(this.animation.sample*m.frame);f=u.keyFrames[s+1],l=(this.elapsedTime-p)/(this.animationFrameTime*(this.animation.sample*f.frame)-p),n=!0}var g=f.value,h=m.value,v=c[s],y={target:this.target,animationProperty:o,currentValue:h,targetValue:g,timeRatio:l,curveFunc:v};t.getAnimationPropertyConversionInfoSet(y).forEach(function(t){"alpha"===t.key&&void 0===t.target.alpha?(r.colorMatrix||(r.colorMatrix=new PIXI.filters.ColorMatrixFilter,t.target.filters||(t.target.filters=[]),t.target.filters.push(r.colorMatrix)),r.colorMatrix.alpha=t.value):t.target[t.key]=t.value})}}}else n=!0}n||(this.paused=!0)}},t.getPrimitiveAnimationPropertyConversionInfo=function(t){var e=t.targetValue-t.currentValue,r=t.currentValue+e*t.curveFunc(t.timeRatio);switch(t.animationProperty){case"x":return{target:t.target.position,key:t.animationProperty,value:r};case"y":return{target:t.target.position,key:t.animationProperty,value:-1*r};case"rotation":return{target:t.target,key:t.animationProperty,value:r*u};case"opacity":return{target:t.target,key:"alpha",value:r/255};default:return{target:t.target,key:t.animationProperty,value:r}}},t.getObjectAnimationPropertyConversionInfoSet=function(t){var e=new Set,r=t.targetValue,n=t.currentValue;if("color"===t.animationProperty){var a=t.curveFunc(t.timeRatio);if("tint"in t.target){var i={r:n.r/255,g:n.g/255,b:n.b/255},o={r:r.r/255,g:r.g/255,b:r.b/255},u={r:(o.r-i.r)*a*16711680,g:(o.g-i.g)*a*65280,b:(o.b-i.b)*a*255};e.add({target:t.target,key:"tint",value:i.r/16711680+(u.r-u.r%65536)+i.g/65280+(u.g-u.g%256)+i.b/255+u.b})}}else for(var s=Object.getOwnPropertyNames(n),c=0;c<s.length;c++){var f=s[c],m=r[f]-n[f],l=n[f]+m*t.curveFunc(t.timeRatio);e.add({target:t.target[t.animationProperty],key:f,value:l})}return e},t.getAnimationPropertyConversionInfoSet=function(e){if("number"==typeof e.currentValue){var r=new Set,n=t.getPrimitiveAnimationPropertyConversionInfo(e);return r.add(n),r}return t.getObjectAnimationPropertyConversionInfoSet(e)},t}(),c=function(){function t(){}return t.prototype.extendRuntimeObjects=function(t,e,r,n){e.forEach(function(t,e){if(t.animations){var a=r.get(e);if(a.sgmed||(a.sgmed={}),a.sgmed.cocosAnimations=t.animations,a.sgmed.cocosAnimations){for(var i=0;i<a.sgmed.cocosAnimations.length;i++){(o=a.sgmed.cocosAnimations[i]).runtime=new s(o,a)}if(n.autoCoordinateFix)for(i=0;i<a.sgmed.cocosAnimations.length;i++)for(var o=a.sgmed.cocosAnimations[i],u=Object.keys(o.curves),c=0;c<u.length;c++){var f=u[c];if("position"===f)for(var m=o.curves[f],l=0;l<m.keyFrames.length;l++){var p=m.keyFrames[l].value;p.y=-p.y}}}}})},t.prototype.filterAnimationContainer=function(t,e){void 0===e&&(e=[]),t.sgmed&&t.sgmed.cocosAnimations&&e.push(t);for(var r=0;r<t.children.length;r++)this.filterAnimationContainer(t.children[r],e);return e},t}();e.default=c}])});

package.json

 {
   "name": "@drecom/scene-graph-cocos-animation-rt",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
@@ -22,4 +22,4 @@ "main": "lib/scene-graph-cocos-animation-rt.min.js",
   "devDependencies": {
-    "@drecom/scene-graph-cocos-animation-cli": "^0.0.2",
-    "@drecom/scene-graph-mediator-rt": "^1.1.2",
+    "@drecom/scene-graph-cocos-animation-cli": "^0.0.3",
+    "@drecom/scene-graph-mediator-rt": "^1.1.3",
     "@drecom/scene-graph-schema": "0.0.6",
@@ -32,3 +32,3 @@ "@types/pixi.js": "^4.8.2",
   },
-  "gitHead": "dcffa7b570bc44899cc9e6324769587db6fe3b18"
+  "gitHead": "e2b3665bd31d184cf687d494ce9dc2ea7c9da308"
 }

src/CocosAnimationRuntime.ts

@@ -53,10 +53,19 @@ import { SchemaJson, Node } from '@drecom/scene-graph-schema';
       if (option.autoCoordinateFix) {
-        // calibrate anchor system difference
-        if (!(container as any).anchor) {
-          container.pivot.set(
-            container.width  * 0.5,
-            container.height * 0.5
-          );
-          container.position.x += container.width  * container.scale.x * 0.5;
-          container.position.y += container.height * container.scale.y * 0.5;
+        for (let i = 0; i < container.sgmed.cocosAnimations.length; i++) {
+          const cocosAnimation = container.sgmed.cocosAnimations[i];
+          const properties = Object.keys(cocosAnimation.curves);
+          for (let j = 0; j < properties.length; j++) {
+            const property = properties[j];
+            if (property !== 'position') {
+              continue;
+            }
+            const curve = cocosAnimation.curves[property];
+            for (let k = 0; k < curve.keyFrames.length; k++) {
+              const keyFrame = curve.keyFrames[k];
+              const value = keyFrame.value as any;
+
+              // cocos coordinate system
+              value.y = -value.y;
+            }
+          }
         }
@@ -63,0 +72,0 @@ }

src/CocosAnimationRuntimeExtension.ts

@@ -48,2 +48,4 @@ import { CocosAnimationClientTypes as ClientTypes } from '@drecom/scene-graph-cocos-animation-cli';
 
+  public colorMatrix?: PIXI.filters.ColorMatrixFilter = undefined;
+
   /**
@@ -118,6 +120,8 @@ * Seconds per frame by application fps
   /**
-   * Returns index of current key frame
-   * current key frame is calcurated by elapsed time and animation fps
+   * Returns index of current key frame.
+   * Current key frame is calcurated by elapsed time and animation fps.
+   * It returns -1 when the elapsedTime has not been reached to the earliest key frame yet.
+   * Also it returns the length of key frame to indicate all key frames are passed.
    */
-  private getCurrentFrameIndex(keyFrames: ClientTypes.AnimationFrame[], elapsedTime: number, fps: number): number {
+  private getCurrentKeyFrameIndex(keyFrames: ClientTypes.AnimationFrame[], elapsedTime: number, fps: number): number {
     const spf = 1.0 / fps;
@@ -136,3 +140,7 @@
 
-    return -1;
+    if ((spf * (fps * keyFrames[0].frame)) > elapsedTime) {
+      return -1;
+    } else {
+      return keyFrames.length;
+    }
   }
@@ -157,5 +165,9 @@
 
-      const currentFrameIndex = this.getCurrentFrameIndex(curve.keyFrames, this.elapsedTime, this.animation.sample);
+      const currentFrameIndex = this.getCurrentKeyFrameIndex(curve.keyFrames, this.elapsedTime, this.animation.sample);
       if (currentFrameIndex === -1) {
+        activeCurveExists = true;
         continue;
+      } else if (currentFrameIndex === curve.keyFrames.length) {
+        // finished
+        continue;
       }
@@ -174,5 +186,14 @@
       if (currentFrameIndex >= curve.keyFrames.length - 1) {
-        nextFrame    = currentFrame;
-        currentFrame = curve.keyFrames[currentFrameIndex - 1];
-        timeRatio    = 1.0;
+        nextFrame = currentFrame;
+        if (currentFrameIndex > 0) {
+          currentFrame = curve.keyFrames[currentFrameIndex - 1];
+        }
+
+        // TODO: next version feature
+        timeRatio = this.elapsedTime / (this.animation as any).duration;
+        if (timeRatio < 1.0) {
+          activeCurveExists = true;
+        } else {
+          timeRatio = 1.0;
+        }
       } else {
@@ -212,3 +233,18 @@ const currentKeyFrameAsTime = this.animationFrameTime * (this.animation.sample * currentFrame.frame);
       convertInfo.forEach((item) => {
-        item.target[item.key] = item.value;
+        if (item.key === 'alpha') {
+          if (item.target.alpha === undefined) {
+            if (!this.colorMatrix) {
+              this.colorMatrix = new PIXI.filters.ColorMatrixFilter();
+              if (!item.target.filters) {
+                item.target.filters = [];
+              }
+              item.target.filters.push(this.colorMatrix);
+            }
+            this.colorMatrix.alpha = item.value;
+          } else {
+            item.target[item.key] = item.value;
+          }
+        } else {
+          item.target[item.key] = item.value;
+        }
       });
@@ -243,3 +279,3 @@ }
       case 'opacity': return {
-        target: params.target.position,
+        target: params.target,
         key: 'alpha',
@@ -246,0 +282,0 @@ value: value / 255

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142382

increased by5.64%

Lines of code

1358

increased by7.61%

No dependency changes