Google Git
Sign in
skia/external/github.com/airbnb/lottie-web/refs/heads/14_gradient_fills^!/.
commit
476fe836ff2ddbed68b0e17776f4d6f5055adf3e
[log]
author
hernan <hernantorrisi@gmail.com>
Sat Aug 13 19:04:03 2016 -0300
committer
hernan <hernantorrisi@gmail.com>
Sat Aug 13 19:04:03 2016 -0300
tree
aa8a43ff03d81d0139244aecd73176e71d7ef309
parent
a9d343630b1e2d969cd41e4de6e15c6d639cf33b [diff]
gradient fills finnished

diff --git a/extension/jsx/utils/ProjectParser.jsx b/extension/jsx/utils/ProjectParser.jsx
index 8b108b6..11ae643 100644
--- a/extension/jsx/utils/ProjectParser.jsx
+++ b/extension/jsx/utils/ProjectParser.jsx

@@ -54,15 +54,17 @@
             //bm_eventDispatcher.log(XML_Ob['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'].length());
             var stops = XML_Ob['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'];
             var colors = XML_Ob['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'][1]['prop.list'][0]['prop.pair'][0]['prop.list'][0]['prop.pair'];
-            bm_eventDispatcher.log(colors.toString());
             i = 0;
             len = stops.length();
-            var opacitiesArr = [],op, floats, nextFloats, midPoint, midPosition;
+            var opacitiesArr = [],op, floats, nextFloats, midPoint, midPosition, hasOpacity = false;
             while(i<len){
                 floats = stops[i]['prop.list'][0]['prop.pair'][0]['array'][0].float;
                 op = [];
                 op.push(bm_generalUtils.roundNumber(Number(floats[0].toString()),3));
                 op.push(bm_generalUtils.roundNumber(Number(floats[2].toString()),3));
+                if(op[1] !== 1){
+                    hasOpacity = true;
+                }
                 opacitiesArr.push(op);
                 midPosition = bm_generalUtils.roundNumber(Number(floats[1].toString()),3);
                 if(i<len-1 && midPosition !== 0.5){
@@ -76,6 +78,9 @@
                 }
                 i += 1;
             }
+            if(!hasOpacity){
+                opacitiesArr.length = 0;
+            }
             i = 0;
             len = colors.length();
             var colorsArr = [];
@@ -103,8 +108,6 @@
                 }
                 i += 1;
             }
-            bm_eventDispatcher.log(opacitiesArr);
-            bm_eventDispatcher.log(colorsArr);
             gradientData.c = colorsArr;
             gradientData.o = opacitiesArr;
             //var jsonData = bm_xml2json(XML_Ob);

diff --git a/extension/jsx/utils/shapeHelper.jsx b/extension/jsx/utils/shapeHelper.jsx
index fc7e4c9..cdd3b37 100644
--- a/extension/jsx/utils/shapeHelper.jsx
+++ b/extension/jsx/utils/shapeHelper.jsx

@@ -9,6 +9,7 @@
         star: 'sr',
         fill: 'fl',
         gfill: 'gf',
+        gStroke: 'sf',
         stroke: 'st',
         merge: 'mm',
         trim: 'tm',
@@ -43,6 +44,8 @@
             return shapeItemTypes.group;
         case 'ADBE Vector Graphic - G-Fill':
             return shapeItemTypes.gfill;
+        case 'ADBE Vector Graphic - G-Stroke':
+            return shapeItemTypes.gStroke;
         default:
             bm_eventDispatcher.log(matchName);
             return '';
@@ -154,6 +157,28 @@
                     ob.e = bm_keyframeHelper.exportKeyframes(prop.property('End Point'), frameRate);
                     ob.o = bm_keyframeHelper.exportKeyframes(prop.property('Opacity'), frameRate);
                     ob.t = prop.property('Type').value;
+                    if(ob.t === 2){
+                        ob.h = bm_keyframeHelper.exportKeyframes(prop.property('Highlight Length'), frameRate);
+                        ob.a = bm_keyframeHelper.exportKeyframes(prop.property('Highlight Angle'), frameRate);
+                    }
+
+                } else if (itemType === shapeItemTypes.gStroke) {
+                    ob = {};
+                    ob.ty = itemType;
+                    var gradientData = bm_ProjectHelper.getGradientData(navigationShapeTree);
+                    ob.c = gradientData.c;
+                    ob.y = gradientData.o;
+                    ob.s = bm_keyframeHelper.exportKeyframes(prop.property('Start Point'), frameRate);
+                    ob.e = bm_keyframeHelper.exportKeyframes(prop.property('End Point'), frameRate);
+                    ob.o = bm_keyframeHelper.exportKeyframes(prop.property('Opacity'), frameRate);
+                    ob.w = bm_keyframeHelper.exportKeyframes(prop.property('Stroke Width'), frameRate);
+                    ob.lc = prop.property('Line Cap').value;
+                    ob.lj = prop.property('Line Join').value;
+                    ob.t = prop.property('Type').value;
+                    if(ob.t === 2){
+                        ob.h = bm_keyframeHelper.exportKeyframes(prop.property('Highlight Length'), frameRate);
+                        ob.a = bm_keyframeHelper.exportKeyframes(prop.property('Highlight Angle'), frameRate);
+                    }
 
                 } else if (itemType === shapeItemTypes.stroke) {
                     ob = {};

diff --git a/player/index.html b/player/index.html
index 2d7b9d9..336da80 100644
--- a/player/index.html
+++ b/player/index.html

@@ -10,8 +10,8 @@
         }
         #bodymovin{
             background-color:#ddd;
-            width:900px;
-            height:600px;
+            width:1000px;
+            height:400px;
             /*width:800px;
             height:500px;*/
             display:block;

diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js
index 7b785b7..cc01bcd 100644
--- a/player/js/elements/ShapeElement.js
+++ b/player/js/elements/ShapeElement.js

@@ -87,15 +87,15 @@
 
             }else if(arr[i].ty == 'gf'){
                 pathElement = document.createElementNS(svgNS, "path");
-                var mask = document.createElementNS(svgNS,"mask");
-                var maskElement = document.createElementNS(svgNS, "path");
-                mask.appendChild(maskElement);
                 var gradientId = 'gr_'+randomString(10);
-                var opacityId = 'op_'+randomString(10);
-                var maskId = 'mk_'+randomString(10);
-                mask.setAttribute('id',maskId);
-                pathElement.setAttribute('mask','url(#'+maskId+')');
-                var gfill = document.createElementNS(svgNS,'linearGradient');
+                var gfill,opFill;
+                if(arr[i].t === 1){
+                    gfill = document.createElementNS(svgNS,'linearGradient');
+                } else {
+                    gfill = document.createElementNS(svgNS,'radialGradient');
+                    data[i].h = PropertyFactory.getProp(this,arr[i].h,1,0.01,dynamicProperties);
+                    data[i].a = PropertyFactory.getProp(this,arr[i].a,1,degToRads,dynamicProperties);
+                }
                 gfill.setAttribute('id',gradientId);
                 gfill.setAttribute('spreadMethod','pad');
                 gfill.setAttribute('gradientUnits','userSpaceOnUse');
@@ -107,26 +107,39 @@
                     stop.setAttribute('style','stop-color:rgb('+Math.round(arr[i].c[j][1]*255)+','+Math.round(arr[i].c[j][2]*255)+','+Math.round(arr[i].c[j][3]*255)+')');
                     gfill.appendChild(stop);
                 }
-                var opFill = document.createElementNS(svgNS,'linearGradient');
-                opFill.setAttribute('id',opacityId);
-                opFill.setAttribute('spreadMethod','pad');
-                opFill.setAttribute('gradientUnits','userSpaceOnUse');
-                jLen = arr[i].y.length;
-                for(j=0;j<jLen;j+=1){
-                    stop = document.createElementNS(svgNS,'stop');
-                    stop.setAttribute('offset',Math.round(arr[i].y[j][0]*100)+'%');
-                    stop.setAttribute('style','stop-color:rgb(255,255,255);stop-opacity:'+arr[i].y[j][1]);
-                    opFill.appendChild(stop);
-                }
                 pathElement.setAttribute('fill','url(#'+gradientId+')');
-                maskElement.setAttribute('fill','url(#'+opacityId+')');
                 this.globalData.defs.appendChild(gfill);
-                this.globalData.defs.appendChild(opFill);
-                this.globalData.defs.appendChild(mask);
-                data[i].s = PropertyFactory.getProp(this,arr[i].s,0,null,dynamicProperties);
-                data[i].e = PropertyFactory.getProp(this,arr[i].e,0,null,dynamicProperties);
+                if(arr[i].y.length){
+                    var mask = document.createElementNS(svgNS,"mask");
+                    var maskElement = document.createElementNS(svgNS, "path");
+                    mask.appendChild(maskElement);
+                    var opacityId = 'op_'+randomString(10);
+                    var maskId = 'mk_'+randomString(10);
+                    mask.setAttribute('id',maskId);
+                    pathElement.setAttribute('mask','url(#'+maskId+')');
+                    if(arr[i].t === 1){
+                        opFill = document.createElementNS(svgNS,'linearGradient');
+                    } else {
+                        opFill = document.createElementNS(svgNS,'radialGradient');
+                    }
+                    opFill.setAttribute('id',opacityId);
+                    opFill.setAttribute('spreadMethod','pad');
+                    opFill.setAttribute('gradientUnits','userSpaceOnUse');
+                    jLen = arr[i].y.length;
+                    for(j=0;j<jLen;j+=1){
+                        stop = document.createElementNS(svgNS,'stop');
+                        stop.setAttribute('offset',Math.round(arr[i].y[j][0]*100)+'%');
+                        stop.setAttribute('style','stop-color:rgb(255,255,255);stop-opacity:'+arr[i].y[j][1]);
+                        opFill.appendChild(stop);
+                    }
+                    maskElement.setAttribute('fill','url(#'+opacityId+')');
+                    this.globalData.defs.appendChild(opFill);
+                    this.globalData.defs.appendChild(mask);
+                    data[i].of = opFill;
+                }
+                data[i].s = PropertyFactory.getProp(this,arr[i].s,1,null,dynamicProperties);
+                data[i].e = PropertyFactory.getProp(this,arr[i].e,1,null,dynamicProperties);
                 data[i].gf = gfill;
-                data[i].of = opFill;
             }else{
                 pathElement = document.createElementNS(svgNS, "path");
                 if(!data[i].c.k) {
@@ -435,17 +448,58 @@
     }
     var gfill = viewData.gf;
     var opFill = viewData.of;
-    if(viewData.s.mdf || this.firstFrame){
-        gfill.setAttribute('x1',viewData.s.v[0]);
-        gfill.setAttribute('y1',viewData.s.v[1]);
-        opFill.setAttribute('x1',viewData.s.v[0]);
-        opFill.setAttribute('y1',viewData.s.v[1]);
-    }
-    if(viewData.e.mdf || this.firstFrame){
-        gfill.setAttribute('x2',viewData.e.v[0]);
-        gfill.setAttribute('y2',viewData.e.v[1]);
-        opFill.setAttribute('x2',viewData.e.v[0]);
-        opFill.setAttribute('y2',viewData.e.v[1]);
+    if(styleData.t === 1){
+        if(viewData.s.mdf || this.firstFrame){
+            gfill.setAttribute('x1',viewData.s.v[0]);
+            gfill.setAttribute('y1',viewData.s.v[1]);
+            if(opFill){
+                opFill.setAttribute('x1',viewData.s.v[0]);
+                opFill.setAttribute('y1',viewData.s.v[1]);
+            }
+        }
+        if(viewData.e.mdf || this.firstFrame){
+            gfill.setAttribute('x2',viewData.e.v[0]);
+            gfill.setAttribute('y2',viewData.e.v[1]);
+            if(opFill){
+                opFill.setAttribute('x2',viewData.e.v[0]);
+                opFill.setAttribute('y2',viewData.e.v[1]);
+            }
+        }
+    } else {
+        if(viewData.s.mdf || this.firstFrame){
+            gfill.setAttribute('cx',viewData.s.v[0]);
+            gfill.setAttribute('cy',viewData.s.v[1]);
+            if(opFill){
+                opFill.setAttribute('cx',viewData.s.v[0]);
+                opFill.setAttribute('cy',viewData.s.v[1]);
+            }
+        }
+        var rad;
+        if(viewData.s.mdf || viewData.e.mdf || this.firstFrame){
+            rad = Math.sqrt(Math.pow(viewData.s.v[0]-viewData.e.v[0],2)+Math.pow(viewData.s.v[1]-viewData.e.v[1],2));
+            gfill.setAttribute('r',rad);
+            if(opFill){
+                opFill.setAttribute('r',rad);
+            }
+        }
+        if(viewData.e.mdf || viewData.h.mdf || viewData.a.mdf || this.firstFrame){
+            if(!rad){
+                rad = Math.sqrt(Math.pow(viewData.s.v[0]-viewData.e.v[0],2)+Math.pow(viewData.s.v[1]-viewData.e.v[1],2));
+            }
+            var ang = Math.atan2(viewData.e.v[1]-viewData.s.v[1], viewData.e.v[0]-viewData.s.v[0]);
+
+            var percent = viewData.h.v >= 1 ? 0.99 : viewData.h.v;
+            var dist = rad*percent;
+            var x = Math.cos(ang + viewData.a.v)*dist + viewData.s.v[0];
+            var y = Math.sin(ang + viewData.a.v)*dist + viewData.s.v[1];
+            gfill.setAttribute('fx',x);
+            gfill.setAttribute('fy',y);
+            if(opFill){
+                opFill.setAttribute('fx',x);
+                opFill.setAttribute('fy',y);
+            }
+        }
+        //gfill.setAttribute('fy','200');
     }
 };
 

diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index f141134..14de064 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js

@@ -34,15 +34,17 @@
     var j, jLen;
     var ownArrays = [], ownModifiers = [], styleElem;
     for(i=len;i>=0;i-=1){
-        if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
+        if(arr[i].ty == 'fl' || arr[i].ty == 'st' || arr[i].ty == 'gf'){
             styleElem = {
                 type: arr[i].ty,
                 elements: []
             };
             data[i] = {};
-            data[i].c = PropertyFactory.getProp(this,arr[i].c,1,255,dynamicProperties);
-            if(!data[i].c.k){
-                styleElem.co = 'rgb('+bm_floor(data[i].c.v[0])+','+bm_floor(data[i].c.v[1])+','+bm_floor(data[i].c.v[2])+')';
+            if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
+                data[i].c = PropertyFactory.getProp(this,arr[i].c,1,255,dynamicProperties);
+                if(!data[i].c.k){
+                    styleElem.co = 'rgb('+bm_floor(data[i].c.v[0])+','+bm_floor(data[i].c.v[1])+','+bm_floor(data[i].c.v[2])+')';
+                }
             }
             data[i].o = PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties);
             if(arr[i].ty == 'st') {
@@ -64,6 +66,15 @@
                     }
                 }
 
+            } else if(arr[i].ty == 'gf') {
+                data[i].s = PropertyFactory.getProp(this,arr[i].s,1,null,dynamicProperties);
+                data[i].e = PropertyFactory.getProp(this,arr[i].e,1,null,dynamicProperties);
+                if(arr[i].t === 2){
+                    data[i].h = PropertyFactory.getProp(this,arr[i].h,1,0.01,dynamicProperties);
+                    data[i].a = PropertyFactory.getProp(this,arr[i].a,1,degToRads,dynamicProperties);
+                }
+                styleElem.c = arr[i].c;
+
             }
             this.stylesList.push(styleElem);
             data[i].style = styleElem;
@@ -213,6 +224,8 @@
             this.renderPath(items[i],data[i],groupTransform);
         }else if(items[i].ty == 'fl'){
             this.renderFill(items[i],data[i],groupTransform);
+        }else if(items[i].ty == 'gf'){
+            this.renderGFill(items[i],data[i],groupTransform);
         }else if(items[i].ty == 'st'){
             this.renderStroke(items[i],data[i],groupTransform);
         }else if(items[i].ty == 'gr'){
@@ -230,18 +243,30 @@
     renderer.ctxTransform(this.finalTransform.mat.props);
     for(i=0;i<len;i+=1){
         type = this.stylesList[i].type;
+        if(type === 'gf'){
+            ctx.save();
+
+        }
         if(type === 'st' && this.stylesList[i].wi === 0){
             continue;
         }
         renderer.save();
         elems = this.stylesList[i].elements;
-        jLen = elems.length;
         if(type === 'st'){
             ctx.strokeStyle = this.stylesList[i].co;
             ctx.lineWidth = this.stylesList[i].wi;
             ctx.lineCap = this.stylesList[i].lc;
             ctx.lineJoin = this.stylesList[i].lj;
             ctx.miterLimit = this.stylesList[i].ml || 0;
+        }else if(type === 'gf'){
+            var grad = ctx.createLinearGradient(this.stylesList[i].x1,this.stylesList[i].y1,this.stylesList[i].x2,this.stylesList[i].y2);
+            jLen = this.stylesList[i].c.length;
+            j = 0;
+            while(j<jLen){
+                grad.addColorStop(this.stylesList[i].c[j][0],"rgb("+Math.round(this.stylesList[i].c[j][1]*255)+","+Math.round(this.stylesList[i].c[j][2]*255)+","+Math.round(this.stylesList[i].c[j][3]*255)+")");
+                j += 1;
+            }
+            ctx.fillStyle = grad;
         }else{
             ctx.fillStyle = this.stylesList[i].co;
         }
@@ -249,6 +274,7 @@
         if(type !== 'st'){
             ctx.beginPath();
         }
+        jLen = elems.length;
         for(j=0;j<jLen;j+=1){
             if(type === 'st'){
                 ctx.beginPath();
@@ -280,6 +306,29 @@
         if(type !== 'st'){
             ctx.fill();
         }
+        if(type === 'gf'){
+            ctx.globalCompositeOperation = 'destination-in';
+            jLen = elems.length;
+            for(j=0;j<jLen;j+=1){
+                nodes = elems[j].trNodes;
+                kLen = nodes.length;
+
+                for(k=0;k<kLen;k+=1){
+                    if(nodes[k].t == 'm'){
+                        ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
+                    }else if(nodes[k].t == 'c'){
+                        ctx.bezierCurveTo(nodes[k].p1[0],nodes[k].p1[1],nodes[k].p2[0],nodes[k].p2[1],nodes[k].p3[0],nodes[k].p3[1]);
+                    }else{
+                        ctx.closePath();
+                    }
+                }
+                if(type === 'st'){
+                    ctx.stroke();
+                }
+            }
+            ctx.restore();
+
+        }
         renderer.restore();
     }
     renderer.restore();
@@ -358,6 +407,17 @@
     }
 };
 
+CVShapeElement.prototype.renderGFill = function(styleData,viewData, groupTransform){
+    var styleElem = viewData.style;
+    if(viewData.s.mdf || viewData.e.mdf || this.firstFrame){
+        styleElem.x1 = viewData.s.v[0];
+        styleElem.y1 = viewData.s.v[1];
+        styleElem.x2 = viewData.e.v[0];
+        styleElem.y2 = viewData.e.v[1];
+    }
+
+};
+
 CVShapeElement.prototype.renderStroke = function(styleData,viewData, groupTransform){
     var styleElem = viewData.style;
     //TODO fix dashes