AI 驱动的 CSS 动画参数搜索：贝叶斯优化在动效调参中的应用

一、动效调参的直觉困境：从"感觉不对"到"数据驱动"

CSS 动画的参数调优是一个高度依赖直觉的过程。一个弹性动画需要调整 stiffness、damping 和 mass 三个参数，每个参数的取值范围跨越数个数量级，组合空间巨大。设计师通常通过反复试错来寻找"感觉对"的参数组合，效率极低。

生产环境中，动效调参面临三个核心痛点：第一，参数空间大——一个 spring 动画有 3 个连续参数，每个参数取值范围 0.01-1000，组合空间约 10^9；第二，主观评价难以量化——"弹性不够"、"回弹太快"等主观感受无法直接映射到参数调整方向；第三，多动效协调——页面中多个动画需要协调时序和节奏，手动调参几乎不可能同时优化所有动画。

这个问题的本质是：动效参数优化是一个黑盒优化问题——目标函数（用户感知质量）不可微，且评估成本高（需要渲染+人工评价）。贝叶斯优化是解决这类问题的理想方法。

二、贝叶斯优化动效调参的底层机制

flowchart TB
    subgraph 参数空间["动画参数空间"]
        P1[stiffness: 50-1000]
        P2[damping: 5-50]
        P3[mass: 0.5-5]
    end

    P1 --> BAYES[贝叶斯优化器]
    P2 --> BAYES
    P3 --> BAYES

    BAYES --> GP[高斯过程<br/>代理模型]
    GP --> ACQ[采集函数<br/>EI/UCB]
    ACQ --> |下一组参数| RENDER[渲染动画]
    RENDER --> SCORE[评分<br/>自动/人工]
    SCORE --> |更新| GP

    subgraph 自动评分["自动评分维度"]
        SCORE --> S1[运动流畅度<br/>加速度变化]
        SCORE --> S2[视觉舒适度<br/>运动幅度]
        SCORE --> S3[时序协调度<br/>动画间延迟]
    end

关键机制解析：

1. 高斯过程代理模型：用高斯过程拟合参数-评分的映射关系。每次评估后更新模型，模型不仅预测评分，还给出不确定性估计。

2. 采集函数：平衡"探索"（尝试未知的参数区域）和"利用"（选择模型预测高分的区域）。Expected Improvement (EI) 是最常用的采集函数。

3. 自动评分：通过运动学指标（加速度变化率、运动幅度、时序偏差）自动评估动画质量，减少人工评价的负担。

三、贝叶斯优化动效调参的实现

3.1 动画参数优化器

import numpy as np
from scipy.stats import norm
from sklearn.gaussian_process import GaussianProcessRegressor
from sklearn.gaussian_process.kernels import Matern

class AnimationOptimizer:
    """
    基于贝叶斯优化的动画参数优化器
    """

    def __init__(
        self,
        param_bounds: dict,
        n_initial: int = 10,
        n_iterations: int = 50,
    ):
        self.param_names = list(param_bounds.keys())
        self.bounds = np.array([
            param_bounds[k] for k in self.param_names
        ])
        self.n_initial = n_initial
        self.n_iterations = n_iterations

        # 高斯过程代理模型
        kernel = Matern(nu=2.5)
        self.gp = GaussianProcessRegressor(
            kernel=kernel,
            n_restarts_optimizer=5,
            alpha=1e-6,
        )

        self.X_observed = []
        self.y_observed = []

    def optimize(self, score_fn) -> dict:
        """
        执行贝叶斯优化
        score_fn: 参数→评分的函数
        """
        # 初始随机采样
        for _ in range(self.n_initial):
            x = self._random_sample()
            y = score_fn(self._array_to_params(x))
            self.X_observed.append(x)
            self.y_observed.append(y)

        # 贝叶斯优化迭代
        for i in range(self.n_iterations):
            # 拟合高斯过程
            X = np.array(self.X_observed)
            y = np.array(self.y_observed)
            self.gp.fit(X, y)

            # 通过采集函数选择下一组参数
            x_next = self._acquire_next()

            # 评估
            y_next = score_fn(self._array_to_params(x_next))
            self.X_observed.append(x_next)
            self.y_observed.append(y_next)

        # 返回最优参数
        best_idx = np.argmax(self.y_observed)
        return self._array_to_params(self.X_observed[best_idx])

    def _acquire_next(self) -> np.ndarray:
        """Expected Improvement采集函数"""
        n_candidates = 1000
        candidates = np.random.uniform(
            self.bounds[:, 0], self.bounds[:, 1],
            size=(n_candidates, len(self.param_names))
        )

        mu, sigma = self.gp.predict(candidates, return_std=True)
        mu_best = max(self.y_observed)

        # EI计算
        xi = 0.01  # 探索-利用平衡参数
        improvement = mu - mu_best - xi
        Z = improvement / (sigma + 1e-8)
        ei = improvement * norm.cdf(Z) + sigma * norm.pdf(Z)
        ei[sigma == 0] = 0

        return candidates[np.argmax(ei)]

    def _random_sample(self) -> np.ndarray:
        return np.random.uniform(
            self.bounds[:, 0], self.bounds[:, 1]
        )

    def _array_to_params(self, x: np.ndarray) -> dict:
        return {
            name: float(val)
            for name, val in zip(self.param_names, x)
        }

3.2 自动评分函数

class AnimationScorer:
    """
    动画质量自动评分器
    基于运动学指标评估动画质量
    """

    def score_spring_animation(
        self, params: dict, duration: float = 1.0
    ) -> float:
        """
        评估spring动画质量
        通过模拟动画轨迹计算运动学指标
        """
        stiffness = params["stiffness"]
        damping = params["damping"]
        mass = params.get("mass", 1.0)

        # 模拟spring动画轨迹
        trajectory = self._simulate_spring(
            stiffness, damping, mass, duration
        )

        # 计算运动学指标
        velocity = np.gradient(trajectory)
        acceleration = np.gradient(velocity)
        jerk = np.gradient(acceleration)  # 加速度变化率

        # 指标1: 平滑度（jerk越小越好）
        smoothness = 1.0 / (1.0 + np.mean(np.abs(jerk)))

        # 指标2: 收敛性（是否在合理时间内稳定）
        settled = np.abs(trajectory[-1] - 1.0) < 0.01
        settle_time = self._find_settle_time(trajectory)
        convergence = 1.0 if settled else max(0, 1.0 - settle_time / duration)

        # 指标3: 过冲控制（过冲不超过10%）
        overshoot = max(0, np.max(trajectory) - 1.0)
        overshoot_score = max(0, 1.0 - overshoot * 10)

        # 综合评分
        total = (
            smoothness * 0.3
            + convergence * 0.4
            + overshoot_score * 0.3
        )

        return total

    def _simulate_spring(
        self, k: float, c: float, m: float, t: float
    ) -> np.ndarray:
        """模拟spring动画轨迹"""
        dt = 0.001
        steps = int(t / dt)
        x = np.zeros(steps)
        v = 0.0
        x[0] = 0.0

        for i in range(1, steps):
            # 阻尼弹簧方程: ma = -kx - cv
            a = (-k * x[i-1] - c * v) / m
            v += a * dt
            x[i] = x[i-1] + v * dt

        return x

四、贝叶斯优化动效调参的边界分析

评分函数的主观性

自动评分基于运动学指标，但用户对动画的"感觉"还受品牌调性、使用场景等主观因素影响。建议自动评分+人工微调结合。

高斯过程的维度限制

高斯过程在高维空间（>10维）的效率下降。动画参数通常不超过5维，贝叶斯优化适用。

适用边界：贝叶斯优化适合参数空间大、评估成本高的动效调参场景。对于简单的线性动画（如简单的淡入淡出），手动调参更直接。

五、总结

贝叶斯优化将动效调参从"直觉试错"升级为"数据驱动搜索"。落地路线建议：

1. 起步阶段：定义动画参数空间和评分维度，建立自动评分函数。
2. 优化阶段：实现贝叶斯优化器，自动搜索最优参数组合。
3. 强化阶段：结合自动评分和人工评价，提升评分函数与用户感知的一致性。
4. 精细化阶段：建立动画参数库，积累各场景的最优参数，新动画可从相近场景初始化。