android 三阶曲线动画,安卓动画插值器之三次贝塞尔曲线

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

文章目录

安卓平台实现动画效果的时候，往往为了需要实现一个平滑的，酷的效果去自定义一个动画插值器，即Interpolator。下面介绍一种可视化的方法创建一个基于三次贝塞尔曲线的插值器。

关于动画插值器

关于安卓动画插值器，即Interpolator。实际上即是一个横轴为时间，纵轴为变化量的函数曲线。

动画的快慢按照曲线的斜率去改变。

但由于一个动画过程，动画的总时间往往是不定的，变化量也不定，单位也不同，可能是缩放动画，变化量就是缩放的倍数，可能是平移的动画，变化量就是位移大小。

那么安卓的动画插值器，实际上横轴则是动画总时间的比例，设定总时长为1个单位，纵轴实际上则是动画的结束点相对于开始点的变化量设定为1个单位(注意这里并不是变化过程中的最大变化量作为1个单位，因为变化过程中是可以越过1个单位的变化量的，常见的有回弹的效果就是这样)

那么插值器的函数曲线的范围就确定下来了，总是在

0 <= x <= 1, -∞ <= y <= +∞

的范围内变化。

原理 - 三次贝塞尔曲线公式

p0、p1、p2、p3四个点在平面或三维控件中定义了三次方贝塞尔曲线。曲线起始于p0走向p1，并从p2的方向来到p3。一般不会经过p1或p2；这两个点只是在那里提供方向资讯。p0和p1之间的间距，决定了曲线在转而趋进p3之前，走向p2方向的“长度有多长”。

曲线的参数形式为：

现代的成像系统，很多运用了贝塞尔样条组成的三次贝塞尔曲线，用来描绘曲线轮廓。

可视化工具

这里提供一个网站，可以通过可视化的操作来生成一个贝塞尔曲线。

可以简单的通过拖动鼠标来生成一个曲线

实现安卓平台的三次贝塞尔曲线插值器

那么剩下的工作就是使用上面的网站给出的贝塞尔曲线的参数来生成插值器。

需要实现一个安卓平台上可以使用的三次贝塞尔插值器。这里直接给出已经写好的插值器源码。

EaseCubicInterpolator.java1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73public class implements Interpolator{

private final static int ACCURACY = 4096;

private int mLastI = 0;

private final PointF mControlPoint1 = new PointF();

private final PointF mControlPoint2 = new PointF();

* 设置中间两个控制点.

*

* @param x1

* @param y1

* @param x2

* @param y2

*/

public (float x1, float y1, float x2, float y2){

mControlPoint1.x = x1;

mControlPoint1.y = y1;

mControlPoint2.x = x2;

mControlPoint2.y = y2;

}

public float getInterpolation(float input){

float t = input;

// 近似求解t的值[0,1]

for (int i = mLastI; i < ACCURACY; i++) {

t = 1.0f * i / ACCURACY;

double x = cubicCurves(t, 0, mControlPoint1.x, mControlPoint2.x, 1);

if (x >= input) {

mLastI = i;

break;

}

}

double value = cubicCurves(t, 0, mControlPoint1.y, mControlPoint2.y, 1);

if (value > 0.999d) {

value = 1;

mLastI = 0;

}

return (float) value;

}

* 求三次贝塞尔曲线(四个控制点)一个点某个维度的值.

*

* @param t

* 取值[0, 1]

* @param value0

* @param value1

* @param value2

* @param value3

* @return

*/

public static double cubicCurves(double t, double value0, double value1, double value2, double value3){

double value;

double u = 1 - t;

double tt = t * t;

double uu = u * u;

double uuu = uu * u;

double ttt = tt * t;

value = uuu * value0;

value += 3 * uu * t * value1;

value += 3 * u * tt * value2;

value += ttt * value3;

return value;

}

}

使用方法

很简单，这里给出一个代码示例。animation对象为目标动画。a，b，c，d为网站上给出的四个参数。注意类型为float型。

例如给出的是.17,.67,.83,.67

那么a，b，c，d应写为0.17f，0.67f，0.83f，0.67f1animation.setInterpolator(new EaseCubicInterpolator(a, b, c, d));