3
我正在嘗試使用自定義TimeInterpolator來編寫CSS立方貝塞爾動畫定時功能的等效物。我的目標是重新設計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);
}
};
}
其中貝塞爾點實現如下：
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); }
我有腦屁，不能認爲過去這天真的實施安卓
private TimeInterpolator steps(int numSteps) {
return new TimeInterpolator() {
@Override
public float getInterpolation(float time) {
return time/numSteps;
}
};
}
這甚至接近？我只簡單地瀏覽了關於步驟功能的文檔，我可以完全關閉。