如何调试cubic-bezier动画时间函数

Question

我正试图编写一个Android版本的CSS cubic-bezier动画计时函数，使用自定义的TimeInterpolator。我的目标是在Android上重新创建设计团队提供的动画效果，我已经接近成功。设计师们给了我们一个用HTML和CSS编写的示例，其中使用了cubic-bezier动画计时函数。我实现了一个贝塞尔曲线函数，并在TimeInterpolator中使用它来计算我的时间轴的插值，但感觉几乎像是在倒着运行。我想将我的插值与HTML/CSS中的插值进行比较，以查看我哪里出了差错。

我试图模仿的CSS代码（删除了一些代码）如下：

                    @keyframes svgPulse {
                    0% { transform: scale(1.0) translate(22px, 22px); animation-timing-function: cubic-bezier(0.33,0.00,0.00,1.00); }
                }

我这样调用方法：

cubicBezier(0.33, 0.00, 0.00, 1.00)

调用此方法的是：

    private TimeInterpolator cubicBezier(final double p1, final double p2, final double p3, final double p4) {
    return new TimeInterpolator() {
        @Override
        public float getInterpolation(float time) {
            return (float) Arcs.bezierPoint(p1, p2, p3, p4, time);
        }
    };
}

bezierPoint的实现如下：

    public static double bezierPoint(double point1, double point2, double point3, double point4, double time) {
    double t1 = 1.0f - time;
    return point1*t1*t1*t1 + 3*point2*time*t1*t1 + 3*point3*time*time*t1 + point4*time*time*time;
}

我可以设置断点或添加日志语句来转储插值值，但我不知道如何在HTML动画中断点或记录插值值以进行比较。最后，我想要了解步进动画时间函数的清晰度。CSS大量使用：

50% { transform: scale(1.0); animation-timing-function: steps(1); }

我正在经历脑部突发短路，无法超越这个 Android 的朴素实现：

    private TimeInterpolator steps(int numSteps) {
    return new TimeInterpolator() {
        @Override
        public float getInterpolation(float time) {
            return time/numSteps;
        }
    };
}

这个翻译是否接近？我只是粗略地浏览了一下有关 steps 函数的文档，我的理解可能完全错误。

- Malcolm Winslow

Answer 1

关于你的第一个问题，请参考这个question，特别是第二个答案。无论如何，我建议你使用单个浮点属性进行测试，而不是变换；这将给你更难以记录的矩阵。（因为你只关心时间函数）

另一方面，步进函数需要进行floor()计算，类似于：

floor (currentTime * numSteps / totalTime)

在步骤 (n, end) 的情况下，将其增加 1 在步骤 (n, start) 的情况下。

- vals