bodymovin
Version:
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript
41 lines (40 loc) • 2.34 kB
JavaScript
function SVGTritoneFilter(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);
var feComponentTransfer = document.createElementNS(svgNS,'feComponentTransfer');
feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
filter.appendChild(feComponentTransfer);
this.matrixFilter = feComponentTransfer;
var feFuncR = document.createElementNS(svgNS,'feFuncR');
feFuncR.setAttribute('type','table');
feComponentTransfer.appendChild(feFuncR);
this.feFuncR = feFuncR;
var feFuncG = document.createElementNS(svgNS,'feFuncG');
feFuncG.setAttribute('type','table');
feComponentTransfer.appendChild(feFuncG);
this.feFuncG = feFuncG;
var feFuncB = document.createElementNS(svgNS,'feFuncB');
feFuncB.setAttribute('type','table');
feComponentTransfer.appendChild(feFuncB);
this.feFuncB = feFuncB;
}
SVGTritoneFilter.prototype.renderFrame = function(forceRender){
if(forceRender || this.filterManager.mdf){
var color1 = this.filterManager.effectElements[0].p.v;
var color2 = this.filterManager.effectElements[1].p.v;
var color3 = this.filterManager.effectElements[2].p.v;
var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0]
var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1]
var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2]
this.feFuncR.setAttribute('tableValues', tableR);
this.feFuncG.setAttribute('tableValues', tableG);
this.feFuncB.setAttribute('tableValues', tableB);
//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');
}
};