@visactor/vrender-animate
Version:
This module provides a graph-based animation system for VRender.
49 lines (44 loc) • 2.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.Pixelation = void 0;
const vrender_core_1 = require("@visactor/vrender-core"), DisappearAnimateBase_1 = require("./base/DisappearAnimateBase");
class Pixelation extends DisappearAnimateBase_1.DisappearAnimateBase {
constructor(from, to, duration, easing, params) {
var _a, _b;
super(from, to, duration, easing, params), this.pixelationConfig = {
maxPixelSize: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.maxPixelSize) || 20,
method: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.method) || "out"
};
}
applyDownsamplePixelation(canvas, pixelSize) {
if (pixelSize <= 1) return canvas;
const {width: width, height: height} = canvas, smallWidth = Math.ceil(width / pixelSize), smallHeight = Math.ceil(height / pixelSize), smallCanvas = vrender_core_1.vglobal.createCanvas({
width: smallWidth,
height: smallHeight,
dpr: 1
}), smallCtx = smallCanvas.getContext("2d");
if (!smallCtx) return canvas;
const outputCanvas = vrender_core_1.vglobal.createCanvas({
width: width,
height: height,
dpr: vrender_core_1.vglobal.devicePixelRatio
}), outputCtx = outputCanvas.getContext("2d");
return outputCtx ? (smallCtx.imageSmoothingEnabled = !1, outputCtx.imageSmoothingEnabled = !1,
smallCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight), outputCtx.drawImage(smallCanvas, 0, 0, width, height),
outputCanvas) : canvas;
}
updateAnimationProgress() {
if ("in" === this.pixelationConfig.method) {
return this.pixelationConfig.maxPixelSize - this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
}
return 1 + this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
}
afterStageRender(stage, canvas) {
const currentPixelSize = this.updateAnimationProgress();
if (currentPixelSize <= 1) return canvas;
return this.applyDownsamplePixelation(canvas, currentPixelSize);
}
}
exports.Pixelation = Pixelation;
//# sourceMappingURL=pixelation.js.map