Question

我正在尝试使用自定义TimeInterpolator编写一个类似于CSS cubic-bezier动画计时功能的Android。我的目标是重新创建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;
        }
    };
}

这是否接近？我只是简单地浏览了关于步骤功能的文档，我可以完全关闭。

Answer 1

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

另一方面，steps函数需要一个floor（）演算，其中包含以下内容：

floor (currentTime * numSteps / totalTime)

在步骤（n，结束）的情况下;并且在步骤（n，开始）的情况下将1递增到

如何调试cubic-bezier动画定时功能

1 个答案: