bodymovin
Version:
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript
36 lines (35 loc) • 2.06 kB
JavaScript
function SVGTintFilter(filter, filterManager){
this.filterManager = filterManager;
var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
feColorMatrix.setAttribute('type','matrix');
feColorMatrix.setAttribute('color-interpolation-filters','linearRGB');
feColorMatrix.setAttribute('values','0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
feColorMatrix.setAttribute('result','f1');
filter.appendChild(feColorMatrix);
feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
feColorMatrix.setAttribute('type','matrix');
feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
feColorMatrix.setAttribute('result','f2');
filter.appendChild(feColorMatrix);
this.matrixFilter = feColorMatrix;
if(filterManager.effectElements[2].p.v !== 100 || filterManager.effectElements[2].p.k){
var feMerge = document.createElementNS(svgNS,'feMerge');
filter.appendChild(feMerge);
var feMergeNode;
feMergeNode = document.createElementNS(svgNS,'feMergeNode');
feMergeNode.setAttribute('in','SourceGraphic');
feMerge.appendChild(feMergeNode);
feMergeNode = document.createElementNS(svgNS,'feMergeNode');
feMergeNode.setAttribute('in','f2');
feMerge.appendChild(feMergeNode);
}
}
SVGTintFilter.prototype.renderFrame = function(forceRender){
if(forceRender || this.filterManager.mdf){
var colorBlack = this.filterManager.effectElements[0].p.v;
var colorWhite = this.filterManager.effectElements[1].p.v;
var opacity = this.filterManager.effectElements[2].p.v/100;
this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
}
};