如何调试三次贝塞尔动画计时功能答案

【问题标题】：How to debug a cubic-bezier animation-timing-function如何调试三次贝塞尔动画计时功能
【发布时间】：2013-09-08 02:50:26
【问题描述】：

我正在尝试使用自定义 TimeInterpolator 编写与 CSS 三次贝塞尔动画计时函数等效的 Android。我的目标是在 Android 上重新创建我们的设计团队提供的动画效果，我已经非常接近了。设计师给了我们一个用 HTML 和 CSS 编写的例子，它使用了三次贝塞尔动画计时功能。我已经实现了一个贝塞尔曲线函数，我在 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 函数作用的文档，我可能会完全离开。

【问题讨论】：

标签： android android-animation css-animations

【解决方案1】：

关于您的第一个问题，请参阅question；特别是第二个答案。无论如何，我建议您使用单个浮点属性进行测试，而不是转换；这将为您提供更难以记录的矩阵。（因为你只对计时功能感兴趣）

另一方面，steps 函数需要一个 floor() 演算，类似于：

floor (currentTime * numSteps / totalTime)

在步骤(n, end)的情况下；并在步骤 (n, start) 的情况下增加 1

【讨论】：