@visactor/vrender-animate 1.0.12 → 1.0.13

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, splitRect, splitArc, splitCircle, splitLine, splitPolygon, splitArea, splitPath, AttributeUpdateType, pathToBezierCurves, applyTransformOnBezierCurves, alignBezierCurves, findBestMorphingRotation, pointInterpolation, RichText, divideCubic } from '@visactor/vrender-core';
+import { interpolateColor, interpolatePureColorArrayToStr, pointsInterpolation, Generator, ColorStore, ColorType, AnimateStatus, AnimateStepType, PerformanceRAF, STATUS, application, CustomPath2D, CurveContext, Graphic, splitRect, splitArc, splitCircle, splitLine, splitPolygon, splitArea, splitPath, AttributeUpdateType, pathToBezierCurves, applyTransformOnBezierCurves, alignBezierCurves, findBestMorphingRotation, pointInterpolation, RichText, divideCubic, vglobal } from '@visactor/vrender-core';
 import { pi2, isString, EventEmitter, isArray, isFunction, mixin, isNil, isValidNumber, clamp, Point, pi, isNumber, isValid, isNumberClose, PointService } from '@visactor/vutils';
 
 class Easing {
@@ -565,8 +565,6 @@ class WaitStep extends Step {
     }
     onStart() {
         super.onStart();
-    }
-    onFirstRun() {
         const fromProps = this.getFromProps();
         this.target.setAttributes(fromProps);
     }
@@ -7156,6 +7154,2248 @@ class StreamLight extends ACustomAnimate {
     }
 }
 
+class DisappearAnimateBase extends AStageAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+        this.webglCanvas = null;
+        this.gl = null;
+        this.program = null;
+        this.currentAnimationRatio = 0;
+        this.animationTime = 0;
+    }
+    onUpdate(end, ratio, out) {
+        super.onUpdate(end, ratio, out);
+        this.currentAnimationRatio = ratio;
+        this.animationTime = ratio * Math.PI * 2;
+    }
+    getAnimationTime() {
+        if (this.currentAnimationRatio > 0) {
+            return this.animationTime;
+        }
+        return Date.now() / 1000.0;
+    }
+    getDurationFromParent() {
+        return this.duration || 1000;
+    }
+    initWebGL(canvas) {
+        try {
+            this.webglCanvas = vglobal.createCanvas({
+                width: canvas.width,
+                height: canvas.height,
+                dpr: vglobal.devicePixelRatio
+            });
+            if (!this.webglCanvas) {
+                console.warn('WebGL canvas creation failed');
+                return false;
+            }
+            this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`;
+            this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;
+            let glContext = null;
+            try {
+                glContext = this.webglCanvas.getContext('webgl');
+                if (!glContext) {
+                    glContext = this.webglCanvas.getContext('experimental-webgl');
+                }
+            }
+            catch (e) {
+                console.warn('Failed to get WebGL context:', e);
+            }
+            this.gl = glContext;
+            if (!this.gl) {
+                console.warn('WebGL not supported');
+                return false;
+            }
+            const shaders = this.getShaderSources();
+            this.program = this.createShaderProgram(shaders.vertex, shaders.fragment);
+            return this.program !== null;
+        }
+        catch (error) {
+            console.warn('Failed to initialize WebGL:', error);
+            return false;
+        }
+    }
+    createShaderProgram(vertexSource, fragmentSource) {
+        if (!this.gl) {
+            return null;
+        }
+        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource);
+        const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
+        if (!vertexShader || !fragmentShader) {
+            return null;
+        }
+        const program = this.gl.createProgram();
+        if (!program) {
+            return null;
+        }
+        this.gl.attachShader(program, vertexShader);
+        this.gl.attachShader(program, fragmentShader);
+        this.gl.linkProgram(program);
+        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+            console.error('Shader program link error:', this.gl.getProgramInfoLog(program));
+            return null;
+        }
+        return program;
+    }
+    createShader(type, source) {
+        if (!this.gl) {
+            return null;
+        }
+        const shader = this.gl.createShader(type);
+        if (!shader) {
+            return null;
+        }
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    }
+    setupWebGLState(canvas) {
+        if (!this.gl || !this.webglCanvas) {
+            return;
+        }
+        if (this.webglCanvas.width !== canvas.width || this.webglCanvas.height !== canvas.height) {
+            this.webglCanvas.width = canvas.width;
+            this.webglCanvas.height = canvas.height;
+        }
+        this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height);
+        this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    }
+    createFullScreenQuad() {
+        if (!this.gl) {
+            return null;
+        }
+        const vertices = new Float32Array([
+            -1,
+            -1,
+            0,
+            1,
+            1,
+            -1,
+            1,
+            1,
+            -1,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1,
+            0
+        ]);
+        const vertexBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+        return vertexBuffer;
+    }
+    createTextureFromCanvas(canvas) {
+        if (!this.gl) {
+            return null;
+        }
+        const texture = this.gl.createTexture();
+        this.gl.activeTexture(this.gl.TEXTURE0);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        return texture;
+    }
+    setupVertexAttributes() {
+        if (!this.gl || !this.program) {
+            return;
+        }
+        const positionLocation = this.gl.getAttribLocation(this.program, 'a_position');
+        const texCoordLocation = this.gl.getAttribLocation(this.program, 'a_texCoord');
+        this.gl.enableVertexAttribArray(positionLocation);
+        this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 16, 0);
+        this.gl.enableVertexAttribArray(texCoordLocation);
+        this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 16, 8);
+    }
+    createOutputCanvas(canvas) {
+        const outputCanvas = vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vglobal.devicePixelRatio
+        });
+        const ctx = outputCanvas.getContext('2d');
+        if (!ctx) {
+            return null;
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(canvas, 0, 0);
+        return { canvas: outputCanvas, ctx };
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+    applyCanvas2DEffect(canvas) {
+        return null;
+    }
+    supportsWebGL() {
+        return this.getShaderSources() !== null;
+    }
+    supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;
+    }
+    release() {
+        super.release();
+        if (this.gl) {
+            if (this.program) {
+                this.gl.deleteProgram(this.program);
+                this.program = null;
+            }
+            this.gl = null;
+        }
+        if (this.webglCanvas) {
+            this.webglCanvas = null;
+        }
+        this.currentAnimationRatio = 0;
+        this.animationTime = 0;
+    }
+    afterStageRender(stage, canvas) {
+        let result = null;
+        if (this.supportsWebGL()) {
+            if (!this.gl && !this.initWebGL(canvas)) {
+                console.warn('WebGL初始化失败，尝试Canvas 2D回退');
+            }
+            if (this.gl) {
+                result = this.applyWebGLEffect(canvas);
+                if (result) {
+                    return result;
+                }
+                console.warn('WebGL特效执行失败，尝试Canvas 2D回退');
+            }
+        }
+        if (this.supportsCanvas2D()) {
+            result = this.applyCanvas2DEffect(canvas);
+            if (result) {
+                return result;
+            }
+            console.warn('Canvas 2D特效执行失败');
+        }
+        if (!this.supportsWebGL() && !this.supportsCanvas2D()) {
+            console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`);
+        }
+        return canvas;
+    }
+}
+
+class Canvas2DEffectBase extends DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+}
+class HybridEffectBase extends DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+    applyCanvas2DEffect(canvas) {
+        return null;
+    }
+    supportsWebGL() {
+        return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && this.getShaderSources() !== null;
+    }
+    supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;
+    }
+    afterStageRender(stage, canvas) {
+        var _a, _b;
+        let result = null;
+        if (((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.useWebGL) !== false) {
+            if (this.supportsWebGL()) {
+                if (!this.gl && !this.initWebGL(canvas)) {
+                    console.warn('WebGL初始化失败，尝试Canvas 2D回退');
+                }
+                if (this.gl) {
+                    result = this.applyWebGLEffect(canvas);
+                    if (result) {
+                        return result;
+                    }
+                    console.warn('WebGL特效执行失败，尝试Canvas 2D回退');
+                }
+            }
+            if (this.supportsCanvas2D()) {
+                result = this.applyCanvas2DEffect(canvas);
+                if (result) {
+                    return result;
+                }
+                console.warn('Canvas 2D特效执行失败');
+            }
+        }
+        else {
+            if (this.supportsCanvas2D()) {
+                result = this.applyCanvas2DEffect(canvas);
+                if (result) {
+                    return result;
+                }
+                console.warn('Canvas 2D特效执行失败');
+            }
+            else {
+                console.warn(`${this.constructor.name}: useWebGL=false 但未实现Canvas 2D方法`);
+            }
+        }
+        if (!this.supportsWebGL() && !this.supportsCanvas2D()) {
+            console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`);
+        }
+        return canvas;
+    }
+}
+
+class ImageProcessUtils {
+    static createTempCanvas(width, height, dpr) {
+        return vglobal.createCanvas({
+            width,
+            height,
+            dpr: dpr || vglobal.devicePixelRatio
+        });
+    }
+    static cloneImageData(imageData) {
+        const clonedData = new Uint8ClampedArray(imageData.data);
+        return new ImageData(clonedData, imageData.width, imageData.height);
+    }
+    static lerp(start, end, t) {
+        return start * (1 - t) + end * t;
+    }
+    static smoothstep(edge0, edge1, x) {
+        const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+        return t * t * (3 - 2 * t);
+    }
+    static distance(x1, y1, x2, y2) {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    static normalizeAngle(angle) {
+        return (angle + Math.PI) / (2 * Math.PI);
+    }
+    static pixelNoise(x, y, pixelSize) {
+        if (pixelSize <= 0) {
+            return 0;
+        }
+        const gridX = Math.floor(x / pixelSize) * pixelSize;
+        const gridY = Math.floor(y / pixelSize) * pixelSize;
+        const n = Math.sin(gridX * 12.9898 + gridY * 78.233) * 43758.5453;
+        return n - Math.floor(n);
+    }
+    static generateNoiseTexture(width, height) {
+        const data = new Uint8Array(width * height);
+        for (let i = 0; i < data.length; i++) {
+            data[i] = Math.floor(Math.random() * 256);
+        }
+        return data;
+    }
+    static applyCSSFilter(canvas, filter) {
+        const outputCanvas = this.createTempCanvas(canvas.width, canvas.height);
+        const ctx = outputCanvas.getContext('2d');
+        if (!ctx) {
+            return canvas;
+        }
+        ctx.filter = filter;
+        ctx.drawImage(canvas, 0, 0);
+        ctx.filter = 'none';
+        return outputCanvas;
+    }
+    static extractChannel(imageData, channelIndex) {
+        const { data, width, height } = imageData;
+        const channelData = new Uint8ClampedArray(data.length);
+        for (let i = 0; i < data.length; i += 4) {
+            channelData[i] = 0;
+            channelData[i + 1] = 0;
+            channelData[i + 2] = 0;
+            channelData[i + 3] = data[i + 3];
+            if (channelIndex >= 0 && channelIndex <= 2) {
+                channelData[i + channelIndex] = data[i + channelIndex];
+            }
+        }
+        return new ImageData(channelData, width, height);
+    }
+    static blendImageData(imageData1, imageData2, ratio) {
+        const { data: data1, width, height } = imageData1;
+        const { data: data2 } = imageData2;
+        const result = new Uint8ClampedArray(data1.length);
+        for (let i = 0; i < data1.length; i += 4) {
+            result[i] = Math.round(this.lerp(data1[i], data2[i], ratio));
+            result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio));
+            result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio));
+            result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio));
+        }
+        return new ImageData(result, width, height);
+    }
+    static getLuminance(r, g, b) {
+        return r * 0.299 + g * 0.587 + b * 0.114;
+    }
+    static applySepiaToPixel(r, g, b) {
+        const sepiaR = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
+        const sepiaG = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
+        const sepiaB = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
+        return [sepiaR, sepiaG, sepiaB];
+    }
+    static calculateDynamicStrength(baseStrength, animationTime) {
+        return baseStrength * (animationTime / (Math.PI * 2));
+    }
+}
+class ShaderLibrary {
+}
+ShaderLibrary.STANDARD_VERTEX_SHADER = `
+    attribute vec2 a_position;
+    attribute vec2 a_texCoord;
+    varying vec2 v_texCoord;
+
+    void main() {
+      gl_Position = vec4(a_position, 0.0, 1.0);
+      v_texCoord = a_texCoord;
+    }
+  `;
+ShaderLibrary.SHADER_FUNCTIONS = `
+    // 亮度计算函数
+    float luminance(vec3 color) {
+      return dot(color, vec3(0.299, 0.587, 0.114));
+    }
+
+    // 褐色调函数
+    vec3 sepia(vec3 color) {
+      float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;
+      float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;
+      float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;
+      return vec3(r, g, b);
+    }
+
+    // 线性插值函数
+    float lerp(float a, float b, float t) {
+      return a * (1.0 - t) + b * t;
+    }
+
+
+    // 简单噪声函数
+    float pixelNoise(vec2 coord, float pixelSize) {
+      vec2 gridCoord = floor(coord / pixelSize) * pixelSize;
+      return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);
+    }
+
+    // 动态强度计算
+    float calculateDynamicStrength(float baseStrength, float time) {
+      return baseStrength * (time / 6.28318531); // 2π
+    }
+  `;
+
+class Dissolve extends HybridEffectBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d;
+        super(from, to, duration, easing, params);
+        this.noiseData = null;
+        const rawNoiseScale = (_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.noiseScale;
+        const clampedNoiseScale = rawNoiseScale !== undefined ? Math.max(0, Math.floor(rawNoiseScale)) : 8;
+        this.dissolveConfig = {
+            dissolveType: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.dissolveType) || 'outward',
+            useWebGL: ((_c = params === null || params === void 0 ? void 0 : params.options) === null || _c === void 0 ? void 0 : _c.useWebGL) !== undefined ? params.options.useWebGL : true,
+            noiseScale: clampedNoiseScale,
+            fadeEdge: ((_d = params === null || params === void 0 ? void 0 : params.options) === null || _d === void 0 ? void 0 : _d.fadeEdge) !== undefined ? params.options.fadeEdge : true
+        };
+    }
+    getShaderSources() {
+        const vertexShader = ShaderLibrary.STANDARD_VERTEX_SHADER;
+        const fragmentShader = `
+      precision mediump float;
+      uniform sampler2D u_texture;
+      uniform sampler2D u_noiseTexture;
+      uniform float u_time;
+      uniform int u_dissolveType;
+      uniform vec2 u_resolution;
+      uniform float u_noiseScale;
+      uniform bool u_fadeEdge;
+      varying vec2 v_texCoord;
+
+      ${ShaderLibrary.SHADER_FUNCTIONS}
+
+      // 向外溶解函数
+      float outwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        vec2 center = vec2(0.5, 0.5);
+        float distFromCenter = length(uv - center);
+        float maxDist = length(vec2(0.5, 0.5));
+
+        // 归一化距离 (0为中心，1为边缘)
+        float normalizedDist = distFromCenter / maxDist;
+
+        // 向外溶解：从边缘开始溶解，time控制溶解进度
+        // 增加安全边距，确保动画结束时完全溶解
+        float edgeThreshold = 1.2 - time * 1.5;
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          // 添加基于像素大小的噪声，让边缘呈现颗粒状
+          vec2 pixelCoord = uv * resolution; // 转换为像素坐标
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.4; // 增强噪声影响
+          edgeThreshold += noiseInfluence;
+          return normalizedDist > edgeThreshold ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.15; // 渐变宽度
+            return 1.0 - smoothstep(edgeThreshold - fadeWidth, edgeThreshold, normalizedDist);
+          } else {
+            // 硬边缘：返回0或1
+            return normalizedDist > edgeThreshold ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 向内溶解函数
+      float inwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        vec2 center = vec2(0.5, 0.5);
+        float distFromCenter = length(uv - center);
+        float maxDist = length(vec2(0.5, 0.5));
+
+        float normalizedDist = distFromCenter / maxDist;
+
+        // 向内溶解：从中心开始溶解，time控制溶解进度
+        // 增加系数，确保动画结束时完全溶解
+        float centerThreshold = time * 1.4;
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.4;
+          centerThreshold += noiseInfluence;
+          return normalizedDist < centerThreshold ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.15; // 渐变宽度
+            return smoothstep(centerThreshold, centerThreshold + fadeWidth, normalizedDist);
+          } else {
+            // 硬边缘：返回0或1
+            return normalizedDist < centerThreshold ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 径向溶解函数
+      float radialDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        vec2 center = vec2(0.5, 0.5);
+        float angle = atan(uv.y - center.y, uv.x - center.x);
+        float normalizedAngle = (angle + 3.14159) / (2.0 * 3.14159);
+
+        // 径向溶解：按角度顺序溶解，time控制溶解进度
+        // 增加系数，确保动画结束时完全溶解
+        float angleThreshold = time * 1.2;
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.3;
+          angleThreshold += noiseInfluence;
+          return normalizedAngle < angleThreshold ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.08; // 渐变宽度
+            return smoothstep(angleThreshold, angleThreshold + fadeWidth, normalizedAngle);
+          } else {
+            // 硬边缘：返回0或1
+            return normalizedAngle < angleThreshold ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 从左到右溶解函数
+      float leftToRightDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        // 左到右溶解：从x=0开始向x=1溶解
+        float dissolvePosition = time * 1.2; // 增加系数确保完全溶解
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.3;
+          dissolvePosition += noiseInfluence;
+          return uv.x < dissolvePosition ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.08; // 渐变宽度
+            return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.x);
+          } else {
+            // 硬边缘：返回0或1
+            return uv.x < dissolvePosition ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 从右到左溶解函数
+      float rightToLeftDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        // 右到左溶解：从x=1开始向x=0溶解
+        float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.3;
+          dissolvePosition += noiseInfluence;
+          return uv.x > dissolvePosition ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.08; // 渐变宽度
+            return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.x);
+          } else {
+            // 硬边缘：返回0或1
+            return uv.x > dissolvePosition ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 从上到下溶解函数
+      float topToBottomDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        // 上到下溶解：从y=0开始向y=1溶解
+        float dissolvePosition = time * 1.2; // 增加系数确保完全溶解
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.3;
+          dissolvePosition += noiseInfluence;
+          return uv.y < dissolvePosition ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.08; // 渐变宽度
+            return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.y);
+          } else {
+            // 硬边缘：返回0或1
+            return uv.y < dissolvePosition ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      // 从下到上溶解函数
+      float bottomToTopDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {
+        // 下到上溶解：从y=1开始向y=0溶解
+        float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解
+
+        // 当pixelSize > 0时添加颗粒效果
+        if (pixelSize > 0.0) {
+          vec2 pixelCoord = uv * resolution;
+          float noiseValue = pixelNoise(pixelCoord, pixelSize);
+          float noiseInfluence = (noiseValue - 0.5) * 0.3;
+          dissolvePosition += noiseInfluence;
+          return uv.y > dissolvePosition ? 0.0 : 1.0;
+        } else {
+          // 平滑溶解：根据fadeEdge决定是否使用渐变
+          if (u_fadeEdge) {
+            // 柔和边缘：返回渐变值
+            float fadeWidth = 0.08; // 渐变宽度
+            return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.y);
+          } else {
+            // 硬边缘：返回0或1
+            return uv.y > dissolvePosition ? 0.0 : 1.0;
+          }
+        }
+      }
+
+      void main() {
+        vec2 uv = v_texCoord;
+        vec4 texColor = texture2D(u_texture, uv);
+
+        float alpha = 1.0;
+
+        // 根据溶解类型选择对应的溶解函数
+        if (u_dissolveType == 0) {
+          alpha = outwardDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 1) {
+          alpha = inwardDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 2) {
+          alpha = radialDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 3) {
+          alpha = leftToRightDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 4) {
+          alpha = rightToLeftDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 5) {
+          alpha = topToBottomDissolve(uv, u_time, u_noiseScale, u_resolution);
+        } else if (u_dissolveType == 6) {
+          alpha = bottomToTopDissolve(uv, u_time, u_noiseScale, u_resolution);
+        }
+
+        gl_FragColor = vec4(texColor.rgb, texColor.a * alpha);
+      }
+    `;
+        return { vertex: vertexShader, fragment: fragmentShader };
+    }
+    applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) {
+            return canvas;
+        }
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) {
+            return canvas;
+        }
+        if (!this.noiseData) {
+            this.noiseData = ImageProcessUtils.generateNoiseTexture(256, 256);
+        }
+        const noiseTexture = this.gl.createTexture();
+        this.gl.activeTexture(this.gl.TEXTURE1);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, noiseTexture);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, 256, 256, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, this.noiseData);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        const vertexBuffer = this.createFullScreenQuad();
+        if (!vertexBuffer) {
+            return canvas;
+        }
+        this.gl.useProgram(this.program);
+        this.setupVertexAttributes();
+        this.setUniforms();
+        this.gl.enable(this.gl.BLEND);
+        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+        this.gl.deleteTexture(texture);
+        this.gl.deleteTexture(noiseTexture);
+        this.gl.deleteBuffer(vertexBuffer);
+        return this.webglCanvas;
+    }
+    setUniforms() {
+        if (!this.gl || !this.program || !this.webglCanvas) {
+            return;
+        }
+        const textureLocation = this.gl.getUniformLocation(this.program, 'u_texture');
+        const noiseTextureLocation = this.gl.getUniformLocation(this.program, 'u_noiseTexture');
+        const timeLocation = this.gl.getUniformLocation(this.program, 'u_time');
+        const dissolveTypeLocation = this.gl.getUniformLocation(this.program, 'u_dissolveType');
+        const resolutionLocation = this.gl.getUniformLocation(this.program, 'u_resolution');
+        const noiseScaleLocation = this.gl.getUniformLocation(this.program, 'u_noiseScale');
+        const fadeEdgeLocation = this.gl.getUniformLocation(this.program, 'u_fadeEdge');
+        this.gl.uniform1i(textureLocation, 0);
+        this.gl.uniform1i(noiseTextureLocation, 1);
+        this.gl.uniform1f(timeLocation, this.currentAnimationRatio);
+        this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        this.gl.uniform1f(noiseScaleLocation, this.dissolveConfig.noiseScale);
+        this.gl.uniform1i(fadeEdgeLocation, this.dissolveConfig.fadeEdge ? 1 : 0);
+        const dissolveTypeMap = {
+            outward: 0,
+            inward: 1,
+            radial: 2,
+            leftToRight: 3,
+            rightToLeft: 4,
+            topToBottom: 5,
+            bottomToTop: 6
+        };
+        this.gl.uniform1i(dissolveTypeLocation, dissolveTypeMap[this.dissolveConfig.dissolveType] || 0);
+    }
+    applyCanvas2DEffect(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return canvas;
+        }
+        const { canvas: outputCanvasElement, ctx } = outputCanvas;
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const progress = this.currentAnimationRatio;
+        let dissolvedImageData;
+        switch (this.dissolveConfig.dissolveType) {
+            case 'outward':
+                dissolvedImageData = this.applyOutwardDissolve(imageData, progress);
+                break;
+            case 'inward':
+                dissolvedImageData = this.applyInwardDissolve(imageData, progress);
+                break;
+            case 'radial':
+                dissolvedImageData = this.applyRadialDissolve(imageData, progress);
+                break;
+            case 'leftToRight':
+                dissolvedImageData = this.applyLeftToRightDissolve(imageData, progress);
+                break;
+            case 'rightToLeft':
+                dissolvedImageData = this.applyRightToLeftDissolve(imageData, progress);
+                break;
+            case 'topToBottom':
+                dissolvedImageData = this.applyTopToBottomDissolve(imageData, progress);
+                break;
+            case 'bottomToTop':
+                dissolvedImageData = this.applyBottomToTopDissolve(imageData, progress);
+                break;
+            default:
+                dissolvedImageData = imageData;
+        }
+        ctx.putImageData(dissolvedImageData, 0, 0);
+        return outputCanvasElement;
+    }
+    applyOutwardDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const dx = x - centerX;
+                const dy = y - centerY;
+                const distFromCenter = Math.sqrt(dx * dx + dy * dy);
+                const normalizedDist = distFromCenter / maxDist;
+                let dissolveThreshold = 1.2 - progress * 1.4;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.4;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedDist > dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.15;
+                        const fadeStart = dissolveThreshold - fadeWidth;
+                        const fadeEnd = dissolveThreshold;
+                        if (normalizedDist < fadeStart) {
+                            alpha = 1.0;
+                        }
+                        else if (normalizedDist > fadeEnd) {
+                            alpha = 0.0;
+                        }
+                        else {
+                            alpha = 1.0 - (normalizedDist - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedDist > dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyInwardDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const dx = x - centerX;
+                const dy = y - centerY;
+                const distFromCenter = Math.sqrt(dx * dx + dy * dy);
+                const normalizedDist = distFromCenter / maxDist;
+                let dissolveThreshold = progress * 1.4;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.4;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedDist < dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.15;
+                        const fadeStart = dissolveThreshold;
+                        const fadeEnd = dissolveThreshold + fadeWidth;
+                        if (normalizedDist < fadeStart) {
+                            alpha = 0.0;
+                        }
+                        else if (normalizedDist > fadeEnd) {
+                            alpha = 1.0;
+                        }
+                        else {
+                            alpha = (normalizedDist - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedDist < dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyRadialDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const dx = x - centerX;
+                const dy = y - centerY;
+                const angle = Math.atan2(dy, dx);
+                const normalizedAngle = (angle + Math.PI) / (2 * Math.PI);
+                let dissolveThreshold = progress * 1.2;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.3;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedAngle < dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.08;
+                        const fadeStart = dissolveThreshold;
+                        const fadeEnd = dissolveThreshold + fadeWidth;
+                        if (normalizedAngle < fadeStart) {
+                            alpha = 0.0;
+                        }
+                        else if (normalizedAngle > fadeEnd) {
+                            alpha = 1.0;
+                        }
+                        else {
+                            alpha = (normalizedAngle - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedAngle < dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyLeftToRightDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const normalizedX = x / width;
+                let dissolveThreshold = progress * 1.2;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.3;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedX < dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.08;
+                        const fadeStart = dissolveThreshold;
+                        const fadeEnd = dissolveThreshold + fadeWidth;
+                        if (normalizedX < fadeStart) {
+                            alpha = 0.0;
+                        }
+                        else if (normalizedX > fadeEnd) {
+                            alpha = 1.0;
+                        }
+                        else {
+                            alpha = (normalizedX - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedX < dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyRightToLeftDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const normalizedX = x / width;
+                let dissolveThreshold = 1.0 - progress * 1.2;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.3;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedX > dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.08;
+                        const fadeStart = dissolveThreshold - fadeWidth;
+                        const fadeEnd = dissolveThreshold;
+                        if (normalizedX < fadeStart) {
+                            alpha = 1.0;
+                        }
+                        else if (normalizedX > fadeEnd) {
+                            alpha = 0.0;
+                        }
+                        else {
+                            alpha = 1.0 - (normalizedX - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedX > dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyTopToBottomDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const normalizedY = y / height;
+                let dissolveThreshold = progress * 1.2;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.3;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedY < dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.08;
+                        const fadeStart = dissolveThreshold;
+                        const fadeEnd = dissolveThreshold + fadeWidth;
+                        if (normalizedY < fadeStart) {
+                            alpha = 0.0;
+                        }
+                        else if (normalizedY > fadeEnd) {
+                            alpha = 1.0;
+                        }
+                        else {
+                            alpha = (normalizedY - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedY < dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyBottomToTopDissolve(imageData, progress) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        result.set(data);
+        const pixelSize = this.dissolveConfig.noiseScale;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const normalizedY = y / height;
+                let dissolveThreshold = 1.0 - progress * 1.2;
+                let alpha = 1.0;
+                if (pixelSize > 0) {
+                    const noiseValue = ImageProcessUtils.pixelNoise(x, y, pixelSize);
+                    const noiseInfluence = (noiseValue - 0.5) * 0.3;
+                    dissolveThreshold += noiseInfluence;
+                    alpha = normalizedY > dissolveThreshold ? 0.0 : 1.0;
+                }
+                else {
+                    if (this.dissolveConfig.fadeEdge) {
+                        const fadeWidth = 0.08;
+                        const fadeStart = dissolveThreshold - fadeWidth;
+                        const fadeEnd = dissolveThreshold;
+                        if (normalizedY < fadeStart) {
+                            alpha = 1.0;
+                        }
+                        else if (normalizedY > fadeEnd) {
+                            alpha = 0.0;
+                        }
+                        else {
+                            alpha = 1.0 - (normalizedY - fadeStart) / (fadeEnd - fadeStart);
+                        }
+                    }
+                    else {
+                        alpha = normalizedY > dissolveThreshold ? 0.0 : 1.0;
+                    }
+                }
+                const index = (y * width + x) * 4;
+                result[index + 3] = Math.floor(result[index + 3] * alpha);
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+}
+
+class Grayscale extends HybridEffectBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c;
+        super(from, to, duration, easing, params);
+        const rawStrength = ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.strength) !== undefined ? params.options.strength : 1.0;
+        const clampedStrength = Math.max(0, Math.min(1, rawStrength));
+        this.colorConfig = {
+            effectType: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.effectType) || 'grayscale',
+            strength: clampedStrength,
+            useWebGL: ((_c = params === null || params === void 0 ? void 0 : params.options) === null || _c === void 0 ? void 0 : _c.useWebGL) !== undefined ? params.options.useWebGL : true
+        };
+    }
+    getShaderSources() {
+        const vertexShader = ShaderLibrary.STANDARD_VERTEX_SHADER;
+        const fragmentShader = `
+      precision mediump float;
+      uniform sampler2D u_texture;
+      uniform float u_time;
+      uniform float u_strength;
+      uniform int u_effectType;
+      uniform vec2 u_resolution;
+      varying vec2 v_texCoord;
+
+      ${ShaderLibrary.SHADER_FUNCTIONS}
+
+      void main() {
+        vec2 uv = v_texCoord;
+        vec4 originalColor = texture2D(u_texture, uv);
+        vec3 color = originalColor.rgb;
+
+        // 计算动态强度
+        float dynamicStrength = calculateDynamicStrength(u_strength, u_time);
+
+        if (u_effectType == 0) {
+          // 灰度效果
+          float gray = luminance(color);
+          vec3 grayColor = vec3(gray);
+          color = mix(color, grayColor, dynamicStrength);
+        } else if (u_effectType == 1) {
+          // 褐色调效果
+          vec3 sepiaColor = sepia(color);
+          color = mix(color, sepiaColor, dynamicStrength);
+        }
+
+        gl_FragColor = vec4(color, originalColor.a);
+      }
+    `;
+        return { vertex: vertexShader, fragment: fragmentShader };
+    }
+    applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) {
+            return null;
+        }
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) {
+            return null;
+        }
+        const vertexBuffer = this.createFullScreenQuad();
+        if (!vertexBuffer) {
+            this.gl.deleteTexture(texture);
+            return null;
+        }
+        try {
+            this.gl.useProgram(this.program);
+            this.setupVertexAttributes();
+            this.setColorUniforms();
+            this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+            return this.webglCanvas;
+        }
+        finally {
+            this.gl.deleteTexture(texture);
+            this.gl.deleteBuffer(vertexBuffer);
+        }
+    }
+    setColorUniforms() {
+        if (!this.gl || !this.program) {
+            return;
+        }
+        const currentTime = this.getAnimationTime();
+        const timeLocation = this.gl.getUniformLocation(this.program, 'u_time');
+        const strengthLocation = this.gl.getUniformLocation(this.program, 'u_strength');
+        const effectTypeLocation = this.gl.getUniformLocation(this.program, 'u_effectType');
+        const resolutionLocation = this.gl.getUniformLocation(this.program, 'u_resolution');
+        this.gl.uniform1f(timeLocation, currentTime);
+        this.gl.uniform1f(strengthLocation, this.colorConfig.strength);
+        this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        const effectTypeMap = {
+            grayscale: 0,
+            sepia: 1
+        };
+        this.gl.uniform1i(effectTypeLocation, effectTypeMap[this.colorConfig.effectType] || 0);
+    }
+    applyCanvas2DEffect(canvas) {
+        if (this.colorConfig.strength <= 0) {
+            const outputCanvas = this.createOutputCanvas(canvas);
+            return outputCanvas ? outputCanvas.canvas : null;
+        }
+        if (this.canUseCSSFilter()) {
+            return this.applyCSSFilter(canvas);
+        }
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const currentTime = this.getAnimationTime();
+            let processedImageData;
+            switch (this.colorConfig.effectType) {
+                case 'grayscale':
+                    processedImageData = this.applyGrayscaleEffect(imageData, this.colorConfig.strength, currentTime);
+                    break;
+                case 'sepia':
+                    processedImageData = this.applySepiaEffect(imageData, this.colorConfig.strength, currentTime);
+                    break;
+                default:
+                    processedImageData = this.applyGrayscaleEffect(imageData, this.colorConfig.strength, currentTime);
+            }
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.putImageData(processedImageData, 0, 0);
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('Canvas 2D color effect failed:', error);
+            return null;
+        }
+    }
+    canUseCSSFilter() {
+        var _a;
+        return !!window.useFilterAPI && typeof CSS !== 'undefined' && ((_a = CSS.supports) === null || _a === void 0 ? void 0 : _a.call(CSS, 'filter', 'grayscale(1)'));
+    }
+    applyCSSFilter(canvas) {
+        try {
+            const outputCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height);
+            const ctx = outputCanvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
+            const currentTime = this.getAnimationTime();
+            const dynamicStrength = ImageProcessUtils.calculateDynamicStrength(this.colorConfig.strength, currentTime);
+            let filterValue = '';
+            if (this.colorConfig.effectType === 'grayscale') {
+                filterValue = `grayscale(${Math.min(1, dynamicStrength)})`;
+            }
+            else if (this.colorConfig.effectType === 'sepia') {
+                filterValue = `sepia(${Math.min(1, dynamicStrength)})`;
+            }
+            ctx.filter = filterValue;
+            ctx.drawImage(canvas, 0, 0);
+            ctx.filter = 'none';
+            return outputCanvas;
+        }
+        catch (error) {
+            console.warn('CSS Filter API failed, falling back to pixel processing:', error);
+            return null;
+        }
+    }
+    applyGrayscaleEffect(imageData, strength, time) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        const dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const a = data[i + 3];
+            const gray = ImageProcessUtils.getLuminance(r, g, b);
+            result[i] = Math.round(ImageProcessUtils.lerp(r, gray, dynamicStrength));
+            result[i + 1] = Math.round(ImageProcessUtils.lerp(g, gray, dynamicStrength));
+            result[i + 2] = Math.round(ImageProcessUtils.lerp(b, gray, dynamicStrength));
+            result[i + 3] = a;
+        }
+        return new ImageData(result, width, height);
+    }
+    applySepiaEffect(imageData, strength, time) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        const dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const a = data[i + 3];
+            const [sepiaR, sepiaG, sepiaB] = ImageProcessUtils.applySepiaToPixel(r, g, b);
+            result[i] = Math.round(ImageProcessUtils.lerp(r, sepiaR, dynamicStrength));
+            result[i + 1] = Math.round(ImageProcessUtils.lerp(g, sepiaG, dynamicStrength));
+            result[i + 2] = Math.round(ImageProcessUtils.lerp(b, sepiaB, dynamicStrength));
+            result[i + 3] = a;
+        }
+        return new ImageData(result, width, height);
+    }
+    afterStageRender(stage, canvas) {
+        if (this.canUseCSSFilter() && this.colorConfig.strength > 0) {
+            const cssResult = this.applyCSSFilter(canvas);
+            if (cssResult) {
+                return cssResult;
+            }
+        }
+        return super.afterStageRender(stage, canvas);
+    }
+}
+
+class Distortion extends HybridEffectBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c;
+        super(from, to, duration, easing, params);
+        this.distortionConfig = {
+            distortionType: ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.distortionType) || 'wave',
+            strength: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.strength) || 0.3,
+            useWebGL: ((_c = params === null || params === void 0 ? void 0 : params.options) === null || _c === void 0 ? void 0 : _c.useWebGL) !== undefined ? params.options.useWebGL : true
+        };
+    }
+    getShaderSources() {
+        const vertexShader = `
+      attribute vec2 a_position;
+      attribute vec2 a_texCoord;
+      varying vec2 v_texCoord;
+
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+        v_texCoord = a_texCoord;
+      }
+    `;
+        const fragmentShader = `
+      precision mediump float;
+      uniform sampler2D u_texture;
+      uniform float u_time;
+      uniform float u_strength;
+      uniform int u_distortionType;
+      uniform vec2 u_resolution;
+      varying vec2 v_texCoord;
+
+      // 波浪扭曲函数
+      vec2 wave(vec2 uv, float time, float strength) {
+        float waveX = sin(uv.y * 10.0 + time * 3.0) * strength * 0.1;
+        float waveY = sin(uv.x * 10.0 + time * 2.0) * strength * 0.1;
+        return uv + vec2(waveX, waveY);
+      }
+
+      // 涟漪扭曲函数
+      vec2 ripple(vec2 uv, float time, float strength) {
+        vec2 center = vec2(0.5, 0.5);
+        float distance = length(uv - center);
+        float ripple = sin(distance * 20.0 - time * 5.0) * strength * 0.1;
+        vec2 direction = normalize(uv - center);
+        return uv + direction * ripple;
+      }
+
+      // 漩涡扭曲函数
+      vec2 swirl(vec2 uv, float time, float strength) {
+        vec2 center = vec2(0.5, 0.5);
+        vec2 delta = uv - center;
+        float dist = length(delta);
+        float originalAngle = atan(delta.y, delta.x);
+        float rotationAngle = dist * strength * time * 2.0;
+        float finalAngle = originalAngle + rotationAngle;
+        return center + dist * vec2(cos(finalAngle), sin(finalAngle));
+      }
+
+      void main() {
+        vec2 uv = v_texCoord;
+
+        // 根据扭曲类型应用相应变换
+        if (u_distortionType == 0) {
+          uv = wave(uv, u_time, u_strength);
+        } else if (u_distortionType == 1) {
+          uv = ripple(uv, u_time, u_strength);
+        } else if (u_distortionType == 2) {
+          uv = swirl(uv, u_time, u_strength);
+        }
+
+        // 边界检查
+        if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        } else {
+          gl_FragColor = texture2D(u_texture, uv);
+        }
+      }
+    `;
+        return { vertex: vertexShader, fragment: fragmentShader };
+    }
+    applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) {
+            return null;
+        }
+        this.setupWebGLState(canvas);
+        const texture = this.createTextureFromCanvas(canvas);
+        if (!texture) {
+            return null;
+        }
+        const vertexBuffer = this.createFullScreenQuad();
+        if (!vertexBuffer) {
+            this.gl.deleteTexture(texture);
+            return null;
+        }
+        try {
+            this.gl.useProgram(this.program);
+            this.setupVertexAttributes();
+            this.setDistortionUniforms();
+            this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+            return this.webglCanvas;
+        }
+        finally {
+            this.gl.deleteTexture(texture);
+            this.gl.deleteBuffer(vertexBuffer);
+        }
+    }
+    setDistortionUniforms() {
+        if (!this.gl || !this.program) {
+            return;
+        }
+        const currentTime = this.getAnimationTime();
+        const timeLocation = this.gl.getUniformLocation(this.program, 'u_time');
+        const strengthLocation = this.gl.getUniformLocation(this.program, 'u_strength');
+        const distortionTypeLocation = this.gl.getUniformLocation(this.program, 'u_distortionType');
+        const resolutionLocation = this.gl.getUniformLocation(this.program, 'u_resolution');
+        this.gl.uniform1f(timeLocation, currentTime);
+        this.gl.uniform1f(strengthLocation, this.distortionConfig.strength);
+        this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        const distortionTypeMap = {
+            wave: 0,
+            ripple: 1,
+            swirl: 2
+        };
+        this.gl.uniform1i(distortionTypeLocation, distortionTypeMap[this.distortionConfig.distortionType] || 0);
+    }
+    applyCanvas2DEffect(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const currentTime = this.getAnimationTime();
+            let distortedImageData;
+            switch (this.distortionConfig.distortionType) {
+                case 'wave':
+                    distortedImageData = this.applyWaveDistortion(imageData, this.distortionConfig.strength, currentTime);
+                    break;
+                case 'ripple':
+                    distortedImageData = this.applyRippleDistortion(imageData, this.distortionConfig.strength, currentTime);
+                    break;
+                case 'swirl':
+                    distortedImageData = this.applySwirlDistortion(imageData, this.distortionConfig.strength, currentTime);
+                    break;
+                default:
+                    distortedImageData = imageData;
+            }
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.putImageData(distortedImageData, 0, 0);
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('Canvas 2D distortion effect failed:', error);
+            return null;
+        }
+    }
+    applyWaveDistortion(imageData, strength, time) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const waveX = Math.sin(y * 0.1 + time * 3) * strength * 20;
+                const waveY = Math.sin(x * 0.1 + time * 2) * strength * 20;
+                const sourceX = Math.round(x - waveX);
+                const sourceY = Math.round(y - waveY);
+                const targetIndex = (y * width + x) * 4;
+                if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+                    const sourceIndex = (sourceY * width + sourceX) * 4;
+                    result[targetIndex] = data[sourceIndex];
+                    result[targetIndex + 1] = data[sourceIndex + 1];
+                    result[targetIndex + 2] = data[sourceIndex + 2];
+                    result[targetIndex + 3] = data[sourceIndex + 3];
+                }
+                else {
+                    result[targetIndex + 3] = 0;
+                }
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applyRippleDistortion(imageData, strength, time) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const dx = x - centerX;
+                const dy = y - centerY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                const ripple = Math.sin(distance * 0.2 - time * 5) * strength * 10;
+                const angle = Math.atan2(dy, dx);
+                const sourceX = Math.round(x - Math.cos(angle) * ripple);
+                const sourceY = Math.round(y - Math.sin(angle) * ripple);
+                const targetIndex = (y * width + x) * 4;
+                if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+                    const sourceIndex = (sourceY * width + sourceX) * 4;
+                    result[targetIndex] = data[sourceIndex];
+                    result[targetIndex + 1] = data[sourceIndex + 1];
+                    result[targetIndex + 2] = data[sourceIndex + 2];
+                    result[targetIndex + 3] = data[sourceIndex + 3];
+                }
+                else {
+                    result[targetIndex + 3] = 0;
+                }
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    applySwirlDistortion(imageData, strength, time) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data.length);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const dx = x - centerX;
+                const dy = y - centerY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                const originalAngle = Math.atan2(dy, dx);
+                const rotationAngle = distance * strength * time * 0.02;
+                const finalAngle = originalAngle + rotationAngle;
+                const sourceX = Math.round(centerX + distance * Math.cos(finalAngle));
+                const sourceY = Math.round(centerY + distance * Math.sin(finalAngle));
+                const targetIndex = (y * width + x) * 4;
+                if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
+                    const sourceIndex = (sourceY * width + sourceX) * 4;
+                    result[targetIndex] = data[sourceIndex];
+                    result[targetIndex + 1] = data[sourceIndex + 1];
+                    result[targetIndex + 2] = data[sourceIndex + 2];
+                    result[targetIndex + 3] = data[sourceIndex + 3];
+                }
+                else {
+                    result[targetIndex + 3] = 0;
+                }
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    afterStageRender(stage, canvas) {
+        if (this.distortionConfig.strength <= 0) {
+            return canvas;
+        }
+        return super.afterStageRender(stage, canvas);
+    }
+}
+
+class Particle extends HybridEffectBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b, _c, _d, _e;
+        super(from, to, duration, easing, params);
+        this.particles = [];
+        this.positionBuffer = null;
+        this.colorBuffer = null;
+        this.particleConfig = {
+            effectType: ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.effectType) || 'gravity',
+            count: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.count) || 4000,
+            size: ((_c = params === null || params === void 0 ? void 0 : params.options) === null || _c === void 0 ? void 0 : _c.size) || 20,
+            strength: ((_d = params === null || params === void 0 ? void 0 : params.options) === null || _d === void 0 ? void 0 : _d.strength) || 1.5,
+            useWebGL: ((_e = params === null || params === void 0 ? void 0 : params.options) === null || _e === void 0 ? void 0 : _e.useWebGL) !== undefined ? params.options.useWebGL : true
+        };
+    }
+    getShaderSources() {
+        const vertexShader = `
+      attribute vec2 a_position;
+      attribute vec4 a_color;
+      attribute float a_size;
+
+      uniform vec2 u_resolution;
+      uniform float u_time;
+      uniform float u_forceStrength;
+      uniform int u_effectType;
+
+      varying vec4 v_color;
+
+      void main() {
+        // 将像素坐标转换为剪辑空间坐标
+        vec2 clipSpace = ((a_position / u_resolution) * 2.0) - 1.0;
+        clipSpace.y = -clipSpace.y; // 翻转Y轴
+
+        gl_Position = vec4(clipSpace, 0.0, 1.0);
+        gl_PointSize = a_size;
+        v_color = a_color;
+      }
+    `;
+        const fragmentShader = `
+      precision mediump float;
+      varying vec4 v_color;
+
+      void main() {
+        // 创建圆形粒子
+        vec2 coord = gl_PointCoord - vec2(0.5);
+        float distance = length(coord);
+
+        if (distance > 0.5) {
+          discard;
+        }
+
+        // 保持原始颜色，只调整透明度渐变
+        gl_FragColor = vec4(v_color.rgb, v_color.a);
+      }
+    `;
+        return { vertex: vertexShader, fragment: fragmentShader };
+    }
+    applyWebGLEffect(canvas) {
+        if (!this.gl || !this.program || !this.webglCanvas) {
+            return null;
+        }
+        this.setupWebGLState(canvas);
+        if (this.particles.length === 0) {
+            this.extractParticles(canvas);
+        }
+        this.updateParticles(canvas);
+        const gl = this.gl;
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.useProgram(this.program);
+        this.prepareAndDrawParticles(gl);
+        return this.webglCanvas;
+    }
+    applyCanvas2DEffect(canvas) {
+        const output = this.createOutputCanvas(canvas);
+        if (!output) {
+            return null;
+        }
+        const { canvas: outputCanvas, ctx } = output;
+        const progress = this.currentAnimationRatio;
+        switch (this.particleConfig.effectType) {
+            case 'explode':
+                this.applyCanvas2DExplode(ctx, canvas, progress);
+                break;
+            case 'gravity':
+                this.applyCanvas2DGravity(ctx, canvas, progress);
+                break;
+            case 'vortex':
+                this.applyCanvas2DVortex(ctx, canvas, progress);
+                break;
+            default:
+                ctx.globalAlpha = Math.max(0, 1 - progress);
+                ctx.drawImage(canvas, 0, 0);
+        }
+        return outputCanvas;
+    }
+    extractParticles(canvas) {
+        const tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height, 1);
+        const tempCtx = tempCanvas.getContext('2d');
+        if (!tempCtx) {
+            return;
+        }
+        tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
+        const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+        const data = imageData.data;
+        this.particles = [];
+        const step = Math.max(1, Math.floor(Math.sqrt((tempCanvas.width * tempCanvas.height) / (this.particleConfig.count * 1.5))));
+        for (let y = 0; y < tempCanvas.height; y += step) {
+            for (let x = 0; x < tempCanvas.width; x += step) {
+                const index = (y * tempCanvas.width + x) * 4;
+                const r = data[index];
+                const g = data[index + 1];
+                const b = data[index + 2];
+                const a = data[index + 3];
+                if (a > 5) {
+                    const realX = (x / tempCanvas.width) * canvas.width;
+                    const realY = (y / tempCanvas.height) * canvas.height;
+                    const particle = {
+                        x: realX,
+                        y: realY,
+                        originX: realX,
+                        originY: realY,
+                        vx: 0,
+                        vy: 0,
+                        r: r / 255,
+                        g: g / 255,
+                        b: b / 255,
+                        a: Math.max(0.6, a / 255),
+                        life: 1.0,
+                        size: this.particleConfig.size * (1 + Math.random() * 0.5)
+                    };
+                    this.particles.push(particle);
+                }
+            }
+        }
+    }
+    updateParticles(canvas) {
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        const progress = this.currentAnimationRatio;
+        const duration = this.getDurationFromParent();
+        const isShortAnimation = duration < 2000;
+        const timeMultiplier = isShortAnimation ? Math.max(1.5, 3000 / duration) : 1.0;
+        const intensityBoost = isShortAnimation ? Math.min(2.0, 2000 / duration) : 1.0;
+        this.particles.forEach(particle => {
+            const dx = particle.x - centerX;
+            const dy = particle.y - centerY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const angle = Math.atan2(dy, dx);
+            this.applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas);
+            this.updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost);
+        });
+    }
+    applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas) {
+        const time = this.getAnimationTime();
+        switch (this.particleConfig.effectType) {
+            case 'explode':
+                const explodeIntensity = progress * this.particleConfig.strength * intensityBoost * 5;
+                particle.vx += Math.cos(angle) * explodeIntensity;
+                particle.vy += Math.sin(angle) * explodeIntensity;
+                break;
+            case 'gravity':
+                this.applyGravityEffect(particle, progress, intensityBoost, canvas, time);
+                break;
+            case 'vortex':
+                this.applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance);
+                break;
+        }
+    }
+    applyGravityEffect(particle, progress, intensityBoost, canvas, time) {
+        const gravityThreshold = ((particle.originX + particle.originY * 0.7) / (canvas.width + canvas.height)) * 0.8;
+        if (progress > gravityThreshold) {
+            const gravityProgress = (progress - gravityThreshold) / (1 - gravityThreshold);
+            const gravityForce = this.particleConfig.strength * gravityProgress * gravityProgress * 12 * intensityBoost;
+            particle.vy += gravityForce;
+            const turbulence = Math.sin(time * 3 + particle.originX * 0.02) * Math.cos(time * 2 + particle.originY * 0.015);
+            particle.vx += turbulence * this.particleConfig.strength * 2 * intensityBoost;
+        }
+    }
+    applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance) {
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        const spiralAngle = angle + progress * Math.PI * 0.8;
+        const targetRadius = distance + progress * Math.max(canvas.width, canvas.height) * 0.7 * 1.8;
+        const targetX = centerX + Math.cos(spiralAngle) * targetRadius;
+        const targetY = centerY + Math.sin(spiralAngle) * targetRadius;
+        const baseForce = progress * this.particleConfig.strength * 0.08 * intensityBoost;
+        particle.vx += (targetX - particle.x) * baseForce;
+        particle.vy += (targetY - particle.y) * baseForce;
+    }
+    updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost) {
+        const dragCoeff = isShortAnimation ? 0.99 : 0.98;
+        particle.vx *= dragCoeff;
+        particle.vy *= dragCoeff;
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+        if (isShortAnimation) {
+            const lifeDecayRate = Math.max(0.1, 0.5 / timeMultiplier);
+            particle.life = Math.max(0, 1 - progress * lifeDecayRate);
+            particle.a = Math.max(0.2, particle.life * Math.min(1, particle.a * 1.2));
+            particle.size = Math.max(this.particleConfig.size * 0.7, this.particleConfig.size * (0.5 + particle.life * 0.5));
+        }
+        else {
+            particle.life = Math.max(0, 1 - progress * 0.2);
+            particle.a = Math.max(0.1, particle.life * Math.min(1, particle.a * 1.5));
+            particle.size = Math.max(this.particleConfig.size * 0.5, this.particleConfig.size * (0.3 + particle.life * 0.7));
+        }
+    }
+    prepareAndDrawParticles(gl) {
+        const positions = new Float32Array(this.particles.length * 2);
+        const colors = new Float32Array(this.particles.length * 4);
+        const sizes = new Float32Array(this.particles.length);
+        this.particles.forEach((particle, i) => {
+            positions[i * 2] = particle.x;
+            positions[i * 2 + 1] = particle.y;
+            colors[i * 4] = particle.r;
+            colors[i * 4 + 1] = particle.g;
+            colors[i * 4 + 2] = particle.b;
+            colors[i * 4 + 3] = Math.max(0.1, particle.a);
+            sizes[i] = Math.max(6, particle.size * 1.5);
+        });
+        this.updateParticleBuffers(gl, positions, colors, sizes);
+        this.setParticleUniforms(gl);
+        gl.drawArrays(gl.POINTS, 0, this.particles.length);
+        this.cleanupTempBuffers(gl);
+    }
+    updateParticleBuffers(gl, positions, colors, sizes) {
+        if (!this.positionBuffer) {
+            this.positionBuffer = gl.createBuffer();
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+        const positionLocation = gl.getAttribLocation(this.program, 'a_position');
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        if (!this.colorBuffer) {
+            this.colorBuffer = gl.createBuffer();
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+        const colorLocation = gl.getAttribLocation(this.program, 'a_color');
+        gl.enableVertexAttribArray(colorLocation);
+        gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
+        const sizeBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.DYNAMIC_DRAW);
+        const sizeLocation = gl.getAttribLocation(this.program, 'a_size');
+        gl.enableVertexAttribArray(sizeLocation);
+        gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, false, 0, 0);
+        this._tempSizeBuffer = sizeBuffer;
+    }
+    setParticleUniforms(gl) {
+        const resolutionLocation = gl.getUniformLocation(this.program, 'u_resolution');
+        const timeLocation = gl.getUniformLocation(this.program, 'u_time');
+        const forceStrengthLocation = gl.getUniformLocation(this.program, 'u_forceStrength');
+        const effectTypeLocation = gl.getUniformLocation(this.program, 'u_effectType');
+        gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
+        gl.uniform1f(timeLocation, this.getAnimationTime());
+        gl.uniform1f(forceStrengthLocation, this.particleConfig.strength);
+        const effectTypeMap = {
+            explode: 0,
+            vortex: 1,
+            gravity: 2
+        };
+        gl.uniform1i(effectTypeLocation, effectTypeMap[this.particleConfig.effectType] || 0);
+    }
+    cleanupTempBuffers(gl) {
+        const tempSizeBuffer = this._tempSizeBuffer;
+        if (tempSizeBuffer) {
+            gl.deleteBuffer(tempSizeBuffer);
+            delete this._tempSizeBuffer;
+        }
+    }
+    applyCanvas2DExplode(ctx, canvas, progress) {
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, 1 - progress);
+        ctx.translate(centerX, centerY);
+        const scale = 1 + progress * 0.5;
+        ctx.scale(scale, scale);
+        ctx.translate(-centerX, -centerY);
+        ctx.drawImage(canvas, 0, 0);
+        ctx.restore();
+    }
+    applyCanvas2DGravity(ctx, canvas, progress) {
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, 1 - progress);
+        const offsetY = progress * canvas.height * 0.3;
+        ctx.drawImage(canvas, 0, offsetY);
+        ctx.restore();
+    }
+    applyCanvas2DVortex(ctx, canvas, progress) {
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, 1 - progress);
+        ctx.translate(centerX, centerY);
+        ctx.rotate(progress * Math.PI * 2);
+        ctx.translate(-centerX, -centerY);
+        ctx.drawImage(canvas, 0, 0);
+        ctx.restore();
+    }
+}
+
+class Glitch extends Canvas2DEffectBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params);
+        this.glitchConfig = {
+            effectType: ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.effectType) || 'rgb-shift',
+            intensity: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.intensity) !== undefined ? params.options.intensity : 0.5
+        };
+    }
+    applyCanvas2DEffect(canvas) {
+        if (this.glitchConfig.intensity <= 0) {
+            const outputCanvas = this.createOutputCanvas(canvas);
+            return outputCanvas ? outputCanvas.canvas : null;
+        }
+        try {
+            switch (this.glitchConfig.effectType) {
+                case 'rgb-shift':
+                    return this.applyRGBShiftGlitch(canvas);
+                case 'digital-distortion':
+                    return this.applyDigitalDistortionGlitch(canvas);
+                case 'scan-lines':
+                    return this.applyScanLineGlitch(canvas);
+                case 'data-corruption':
+                    return this.applyDataCorruptionGlitch(canvas);
+                default:
+                    return this.applyRGBShiftGlitch(canvas);
+            }
+        }
+        catch (error) {
+            console.warn('Glitch effect failed:', error);
+            return null;
+        }
+    }
+    applyRGBShiftGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime());
+            const maxOffset = Math.floor(dynamicIntensity * 20);
+            const redOffset = this.generateRandomOffset(maxOffset);
+            const greenOffset = this.generateRandomOffset(maxOffset, 0.3);
+            const blueOffset = this.generateRandomOffset(-maxOffset);
+            const tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height);
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(canvas, 0, 0);
+            const originalImageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height);
+            const redChannelData = ImageProcessUtils.extractChannel(originalImageData, 0);
+            const greenChannelData = ImageProcessUtils.extractChannel(originalImageData, 1);
+            const blueChannelData = ImageProcessUtils.extractChannel(originalImageData, 2);
+            ctx.globalCompositeOperation = 'screen';
+            tempCtx.clearRect(0, 0, canvas.width, canvas.height);
+            tempCtx.putImageData(redChannelData, 0, 0);
+            ctx.drawImage(tempCanvas, redOffset.x, redOffset.y);
+            tempCtx.clearRect(0, 0, canvas.width, canvas.height);
+            tempCtx.putImageData(greenChannelData, 0, 0);
+            ctx.drawImage(tempCanvas, greenOffset.x, greenOffset.y);
+            tempCtx.clearRect(0, 0, canvas.width, canvas.height);
+            tempCtx.putImageData(blueChannelData, 0, 0);
+            ctx.drawImage(tempCanvas, blueOffset.x, blueOffset.y);
+            ctx.globalCompositeOperation = 'source-over';
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('RGB shift glitch failed:', error);
+            return null;
+        }
+    }
+    applyDigitalDistortionGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime());
+            const distortedImageData = this.processDigitalDistortion(imageData, dynamicIntensity);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.putImageData(distortedImageData, 0, 0);
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('Digital distortion glitch failed:', error);
+            return null;
+        }
+    }
+    applyScanLineGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime());
+            const lineSpacing = Math.max(2, Math.floor(10 - dynamicIntensity * 8));
+            ctx.globalCompositeOperation = 'multiply';
+            for (let y = 0; y < canvas.height; y += lineSpacing) {
+                if (Math.random() < dynamicIntensity) {
+                    const opacity = 0.1 + dynamicIntensity * 0.4;
+                    ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
+                    ctx.fillRect(0, y, canvas.width, 1);
+                }
+            }
+            ctx.globalCompositeOperation = 'screen';
+            const brightLineCount = Math.floor(dynamicIntensity * 20);
+            for (let i = 0; i < brightLineCount; i++) {
+                const y = Math.random() * canvas.height;
+                const opacity = dynamicIntensity * 0.3;
+                ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+                ctx.fillRect(0, Math.floor(y), canvas.width, 1);
+            }
+            ctx.globalCompositeOperation = 'source-over';
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('Scan line glitch failed:', error);
+            return null;
+        }
+    }
+    applyDataCorruptionGlitch(canvas) {
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) {
+            return null;
+        }
+        const { ctx } = outputCanvas;
+        try {
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime());
+            const corruptedImageData = this.processDataCorruption(imageData, dynamicIntensity);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.putImageData(corruptedImageData, 0, 0);
+            return outputCanvas.canvas;
+        }
+        catch (error) {
+            console.warn('Data corruption glitch failed:', error);
+            return null;
+        }
+    }
+    generateRandomOffset(maxOffset, scale = 1) {
+        return {
+            x: (Math.random() - 0.5) * maxOffset,
+            y: (Math.random() - 0.5) * maxOffset * scale
+        };
+    }
+    processDigitalDistortion(imageData, intensity) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data);
+        const sliceCount = Math.floor(intensity * 20) + 5;
+        const sliceHeight = Math.floor(height / sliceCount);
+        for (let i = 0; i < sliceCount; i++) {
+            if (Math.random() < intensity) {
+                const y = i * sliceHeight;
+                const sliceEnd = Math.min(y + sliceHeight, height);
+                const offset = Math.floor((Math.random() - 0.5) * width * intensity * 0.1);
+                this.shiftSliceHorizontal(result, width, height, y, sliceEnd, offset);
+            }
+        }
+        const noiseIntensity = intensity * 0.3;
+        for (let i = 0; i < data.length; i += 4) {
+            if (Math.random() < noiseIntensity) {
+                result[i] = Math.random() * 255;
+                result[i + 1] = Math.random() * 255;
+                result[i + 2] = Math.random() * 255;
+            }
+        }
+        return new ImageData(result, width, height);
+    }
+    shiftSliceHorizontal(data, width, height, startY, endY, offset) {
+        const tempRow = new Uint8ClampedArray(width * 4);
+        for (let y = startY; y < endY; y++) {
+            const rowStart = y * width * 4;
+            for (let x = 0; x < width * 4; x++) {
+                tempRow[x] = data[rowStart + x];
+            }
+            for (let x = 0; x < width; x++) {
+                const sourceX = (x - offset + width) % width;
+                const targetIndex = rowStart + x * 4;
+                const sourceIndex = sourceX * 4;
+                data[targetIndex] = tempRow[sourceIndex];
+                data[targetIndex + 1] = tempRow[sourceIndex + 1];
+                data[targetIndex + 2] = tempRow[sourceIndex + 2];
+                data[targetIndex + 3] = tempRow[sourceIndex + 3];
+            }
+        }
+    }
+    processDataCorruption(imageData, intensity) {
+        const { data, width, height } = imageData;
+        const result = new Uint8ClampedArray(data);
+        const stripeCount = Math.floor(intensity * 15) + 5;
+        for (let i = 0; i < stripeCount; i++) {
+            if (Math.random() < intensity) {
+                const x = Math.floor(Math.random() * width);
+                const stripeWidth = Math.floor(Math.random() * 5) + 1;
+                const color = Math.random() < 0.5 ? 0 : 255;
+                for (let y = 0; y < height; y++) {
+                    for (let dx = 0; dx < stripeWidth && x + dx < width; dx++) {
+                        const index = (y * width + x + dx) * 4;
+                        result[index] = color;
+                        result[index + 1] = color;
+                        result[index + 2] = color;
+                    }
+                }
+            }
+        }
+        const corruptionCount = Math.floor(intensity * 20);
+        for (let i = 0; i < corruptionCount; i++) {
+            const blockX = Math.floor(Math.random() * width);
+            const blockY = Math.floor(Math.random() * height);
+            const blockW = Math.floor(Math.random() * 20) + 5;
+            const blockH = Math.floor(Math.random() * 10) + 2;
+            this.corruptBlock(result, width, height, blockX, blockY, blockW, blockH);
+        }
+        return new ImageData(result, width, height);
+    }
+    corruptBlock(data, width, height, x, y, w, h) {
+        for (let dy = 0; dy < h && y + dy < height; dy++) {
+            for (let dx = 0; dx < w && x + dx < width; dx++) {
+                const index = ((y + dy) * width + (x + dx)) * 4;
+                if (Math.random() < 0.7) {
+                    data[index] = Math.random() * 255;
+                    data[index + 1] = Math.random() * 255;
+                    data[index + 2] = Math.random() * 255;
+                }
+            }
+        }
+    }
+}
+
+class GaussianBlur extends AStageAnimate {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params);
+        this.blurConfig = {
+            blurRadius: ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.blurRadius) || 8,
+            useOptimizedBlur: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.useOptimizedBlur) !== undefined ? params.options.useOptimizedBlur : true
+        };
+    }
+    applyCSSBlur(canvas, radius) {
+        const c = vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vglobal.devicePixelRatio
+        });
+        const ctx = c.getContext('2d');
+        if (!ctx) {
+            return canvas;
+        }
+        ctx.filter = `blur(${radius}px)`;
+        ctx.drawImage(canvas, 0, 0);
+        ctx.filter = 'none';
+        return c;
+    }
+    applyDownsampleBlur(imageData, radius) {
+        const { width, height } = imageData;
+        const downsample = Math.max(1, Math.floor(radius / 2));
+        const smallWidth = Math.floor(width / downsample);
+        const smallHeight = Math.floor(height / downsample);
+        const tempCanvas = vglobal.createCanvas({
+            width: smallWidth,
+            height: smallHeight,
+            dpr: 1
+        });
+        const tempCtx = tempCanvas.getContext('2d');
+        if (!tempCtx) {
+            return imageData;
+        }
+        const originalCanvas = vglobal.createCanvas({
+            width: width,
+            height: height,
+            dpr: 1
+        });
+        const originalCtx = originalCanvas.getContext('2d');
+        if (!originalCtx) {
+            return imageData;
+        }
+        originalCtx.putImageData(imageData, 0, 0);
+        tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight);
+        tempCtx.filter = `blur(${radius / downsample}px)`;
+        tempCtx.drawImage(tempCanvas, 0, 0);
+        tempCtx.filter = 'none';
+        originalCtx.clearRect(0, 0, width, height);
+        originalCtx.drawImage(tempCanvas, 0, 0, width, height);
+        return originalCtx.getImageData(0, 0, width, height);
+    }
+    afterStageRender(stage, canvas) {
+        if (this.blurConfig.blurRadius <= 0) {
+            return canvas;
+        }
+        let result;
+        if (this.blurConfig.useOptimizedBlur) {
+            result = this.applyCSSBlur(canvas, this.blurConfig.blurRadius);
+        }
+        else {
+            const c = vglobal.createCanvas({
+                width: canvas.width,
+                height: canvas.height,
+                dpr: vglobal.devicePixelRatio
+            });
+            const ctx = c.getContext('2d');
+            if (!ctx) {
+                return false;
+            }
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(canvas, 0, 0);
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const blurredImageData = this.applyDownsampleBlur(imageData, this.blurConfig.blurRadius);
+            ctx.putImageData(blurredImageData, 0, 0);
+            result = c;
+        }
+        const ctx = result.getContext('2d');
+        if (ctx) {
+            ctx.globalCompositeOperation = 'overlay';
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+            ctx.fillRect(0, 0, result.width, result.height);
+            ctx.globalCompositeOperation = 'source-over';
+        }
+        return result;
+    }
+}
+
+class Pixelation extends DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        var _a, _b;
+        super(from, to, duration, easing, params);
+        this.pixelationConfig = {
+            maxPixelSize: ((_a = params === null || params === void 0 ? void 0 : params.options) === null || _a === void 0 ? void 0 : _a.maxPixelSize) || 20,
+            method: ((_b = params === null || params === void 0 ? void 0 : params.options) === null || _b === void 0 ? void 0 : _b.method) || 'out'
+        };
+    }
+    applyDownsamplePixelation(canvas, pixelSize) {
+        if (pixelSize <= 1) {
+            return canvas;
+        }
+        const { width, height } = canvas;
+        const smallWidth = Math.ceil(width / pixelSize);
+        const smallHeight = Math.ceil(height / pixelSize);
+        const smallCanvas = vglobal.createCanvas({
+            width: smallWidth,
+            height: smallHeight,
+            dpr: 1
+        });
+        const smallCtx = smallCanvas.getContext('2d');
+        if (!smallCtx) {
+            return canvas;
+        }
+        const outputCanvas = vglobal.createCanvas({
+            width: width,
+            height: height,
+            dpr: vglobal.devicePixelRatio
+        });
+        const outputCtx = outputCanvas.getContext('2d');
+        if (!outputCtx) {
+            return canvas;
+        }
+        smallCtx.imageSmoothingEnabled = false;
+        outputCtx.imageSmoothingEnabled = false;
+        smallCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight);
+        outputCtx.drawImage(smallCanvas, 0, 0, width, height);
+        return outputCanvas;
+    }
+    updateAnimationProgress() {
+        if (this.pixelationConfig.method === 'in') {
+            const currentPixelSize = this.pixelationConfig.maxPixelSize - this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
+            return currentPixelSize;
+        }
+        const currentPixelSize = 1 + this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
+        return currentPixelSize;
+    }
+    afterStageRender(stage, canvas) {
+        const currentPixelSize = this.updateAnimationProgress();
+        if (currentPixelSize <= 1) {
+            return canvas;
+        }
+        const result = this.applyDownsamplePixelation(canvas, currentPixelSize);
+        return result;
+    }
+}
+
 const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
     AnimateExecutor.registerBuiltInAnimate('fromTo', FromTo);
@@ -7211,6 +9451,13 @@ const registerCustomAnimate = () => {
     AnimateExecutor.registerBuiltInAnimate('pulse', PulseAnimate);
     AnimateExecutor.registerBuiltInAnimate('MotionPath', MotionPath);
     AnimateExecutor.registerBuiltInAnimate('streamLight', StreamLight);
+    AnimateExecutor.registerBuiltInAnimate('dissolve', Dissolve);
+    AnimateExecutor.registerBuiltInAnimate('grayscale', Grayscale);
+    AnimateExecutor.registerBuiltInAnimate('distortion', Distortion);
+    AnimateExecutor.registerBuiltInAnimate('particle', Particle);
+    AnimateExecutor.registerBuiltInAnimate('glitch', Glitch);
+    AnimateExecutor.registerBuiltInAnimate('gaussianBlur', GaussianBlur);
+    AnimateExecutor.registerBuiltInAnimate('pixelation', Pixelation);
 };
 
-export { AComponentAnimate, ACustomAnimate, AStageAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, Easing, FadeIn, FadeOut, FromTo, GraphicStateExtension, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MorphingPath, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, MultiToOneMorphingPath, OutputRichText, PoptipAppear, PoptipDisappear, PulseAnimate, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, StrokeIn, StrokeOut, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, morphPath, multiToOneMorph, oneToMultiMorph, registerAnimate, registerCustomAnimate, transitionRegistry };
+export { AComponentAnimate, ACustomAnimate, AStageAnimate, Animate, AnimateExecutor, Step as AnimateStep, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ComponentAnimator, DefaultTicker, DefaultTimeline, Dissolve, Distortion, Easing, FadeIn, FadeOut, FromTo, GaussianBlur, Glitch, GraphicStateExtension, Grayscale, GroupFadeIn, GroupFadeOut, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, IncreaseCount, InputRichText, InputText, LabelItemAppear, LabelItemDisappear, ManualTicker, MorphingPath, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, MultiToOneMorphingPath, OutputRichText, Particle, Pixelation, PoptipAppear, PoptipDisappear, PulseAnimate, RotateBySphereAnimate, RotateIn, RotateOut, ScaleIn, ScaleOut, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, State, StreamLight, StrokeIn, StrokeOut, TagPointsUpdate, Update, createComponentAnimator, generatorPathEasingFunc, morphPath, multiToOneMorph, oneToMultiMorph, registerAnimate, registerCustomAnimate, transitionRegistry };