使用Curtains.js在动画完成时运行函数_在react spring动画完成时更改状态，_在seek事件完成时运行函数 - 腾讯云开发者社区

Curtains.js 是一个用于创建高性能、触摸友好型 CSS 动画的 JavaScript 库。它允许开发者通过简单的配置来创建复杂的动画效果，并且可以在动画完成时执行特定的函数。

基础概念

Curtains.js 的核心概念是通过定义“幕布”（Curtain）和“层”（Layer）来创建动画。每个幕布可以包含多个层，每个层可以有自己的动画效果。

类型

Curtains.js 支持多种类型的动画，包括但不限于：

平移（Translation）
缩放（Scaling）
旋转（Rotation）
透明度变化（Opacity）

应用场景

Curtains.js 适用于各种需要高性能动画的场景，例如：

网页加载动画
图片轮播
数据可视化
游戏动画

如何在动画完成时运行函数

要在动画完成时运行函数，可以使用 Curtains.js 提供的 onComplete 回调函数。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curtains.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/curtainsjs@1.13.0/dist/curtains.min.js"></script>
    <style>
        .canvas {
            width: 100%;
            height: 100vh;
            position: relative;
        }
        .layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="canvas">
        <div class="layer"></div>
    </div>
    <script>
        const curtains = new Curtains({
            container: ".canvas",
            pixelRatio: window.devicePixelRatio || 1,
            autoResize: true
        });

        curtains.onRender(() => {
            console.log("Animation frame rendered");
        });

        curtains.onComplete(() => {
            console.log("Animation completed");
            // 在这里执行你想要在动画完成时运行的函数
            alert("Animation completed!");
        });

        curtains.addLayer({
            type: "2d",
            animation: {
                duration: 3000, // 动画持续时间，单位为毫秒
                easing: "ease-out", // 缓动函数
                start: {
                    opacity: 0,
                    scale: 0.5
                },
                end: {
                    opacity: 1,
                    scale: 1
                }
            },
            element: ".layer"
        });
    </script>
</body>
</html>