我正试图编写一个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 函数的文档,我的理解可能完全错误。