Easing 曲线 easings.net

介绍个库给大家认识：缓动函数速查表，形象地介绍了各种缓动函数，而且开源的->缓动函数

定义速率：动画参数随着时间变化。作用是：模拟出更自然、更真实的运动效果。

比如说：easeInSine。特点是：一开始慢，后面快一点。

一个缓动函数通常接受一个从0到1的输入（代表动画的进度，0是开始，1是结束）。并返回一个通常也是从 0 到 1 的输出（代表属性的当前值，例如位置、透明度等）。

输入 (t): 时间进度 (0 -> 1)

输出 (v): 属性变化值 (0 -> 1)

easeInSine 的数学公式是： 1 - cos( (t * π) / 2 )

这个公式产生的曲线是：开始时斜率（变化率）很小，然后斜率逐渐增大。对应到动画上，就是起步很慢，然后速度越来越快，直到结束。

如何使用 Easing Functions

使用方法取决于你是在写 CSS、JavaScript 还是使用特定的动画库。

在 CSS 中使用在 CSS 中，你通常直接在 transition 或 animation 属性中指定一个缓动函数的名字。

easeInSine 在 CSS 中的等价物是 cubic-bezier(0.12, 0, 0.39, 0)。但 CSS 标准没有直接叫 ease-in-sine 的关键词，所以你需要使用 cubic-bezier 函数。

示例：一个方块，鼠标悬停时向右移动，使用 easeInSine 效果。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: salmon;
            /* 应用过渡效果：所有属性，持续1秒，使用easeInSine曲线 */
            transition: all 1s cubic-bezier(0.12, 0, 0.39, 0);
        }

        .container:hover .box {
            /* 当鼠标悬停在容器上时，方块移动到300px的位置 */
            transform: translateX(300px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

easings.net/

点进去可以看仔细看详细：

easings.net/#easeInSine

在 JavaScript 中使用（无库）

在纯 JavaScript 中，你需要自己实现缓动函数，并在每一帧动画中计算当前值。

示例：使用 requestAnimationFrame 和 easeInSine 函数移动一个方块。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: salmon;
            position: relative;
        }
    </style>
</head>
<body>
    <button onclick="startAnimation()">开始动画</button>
    <div id="box"></div>

    <script>
        // 定义 easeInSine 函数
        function easeInSine(t) {
            return 1 - Math.cos((t * Math.PI) / 2);
        }

        function startAnimation() {
            const box = document.getElementById('box');
            const duration = 1000; // 动画总时长（毫秒）
            const startX = 0; // 起始位置
            const distance = 300; // 要移动的总距离
            const startTime = performance.now(); // 动画开始时间

            function animate(currentTime) {
                const elapsed = currentTime - startTime; // 已经过去的时间
                let progress = elapsed / duration; // 进度 (0 到 1)

                // 确保进度不超过1
                if (progress > 1) progress = 1;

                // 使用缓动函数计算当前进度对应的"已完成的百分比"
                const easedProgress = easeInSine(progress);

                // 根据缓动后的进度计算当前值
                const currentX = startX + (distance * easedProgress);

                // 应用样式
                box.style.transform = `translateX(${currentX}px)`;

                // 如果动画未结束，继续请求下一帧
                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            // 启动动画循环
            requestAnimationFrame(animate);
        }
    </script>
</body>
</html>

用库

大多数现代动画库都内置了丰富的缓动函数，包括 easeInSine，使用起来非常简单。

使用 GreenSock (GSAP) 的示例：

html 复制代码

<!-- 首先在HTML中引入GSAP库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
    // 使用GSAP动画
    gsap.to("#box", {
        duration: 1,
        x: 300,
        ease: "sine.in" // 这就是 GSAP 中 easeInSine 的写法
    });
</script>

用Anime.js

html 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<script>
    anime({
        targets: '#box',
        translateX: 300,
        duration: 1000,
        easing: 'easeInSine' // Anime.js 中直接使用这个名字
    });
</script>

使用库的好处是语法简洁、性能优化、兼容性好，并且提供了非常多的缓动函数。

何时使用 easeInSine？

根据你的描述，easeInSine 这种"由慢到快"的曲线非常适合模拟：

一个物体开始下落时的加速过程（虽然更精确的物理模拟可能用 easeInQuad 或 easeInCubic，但感觉类似）。

一个动作的"启动"阶段，比如汽车从静止开始加速。

任何需要强调"开始发力"或"积聚能量"的动画。

总结

概念：Easing 函数控制动画的变化速率，使其更自然。

easeInSine：属于"缓入"类，起步慢，然后加速。

使用方法：

CSS: 使用 cubic-bezier(0.12, 0, 0.39, 0)。

原生JS：自己实现 easeInSine 函数，并在 requestAnimationFrame 循环中计算值。

动画库：直接使用库中定义好的关键字，如 GSAP 的 "sine.in" 或 Anime.js 的 'easeInSine'。

对于初学者，强烈推荐从 CSS 或成熟的动画库开始，它们能让你更专注于设计动画效果，而不是复杂的数学计算。