android自定义插值器_自定义缓动插值器，可在Android中实现有意义的动作

android自定义插值器

Interpolators are very useful to model movement for your UI elements. In this article, we’ll focus on how to create aesthetic motion by using two simple tools: animator and interpolator instances.

插值器对于UI元素的移动建模非常有用。 在本文中，我们将重点介绍如何通过使用两个简单的工具(动画器和插值器实例)来创建美学运动。

一些动画理论 (Some Animation Theory)

How do interpolators work? Well, when it comes to changing the property of an object over time, they take an initial and a final value and create a series of ‘middle values’ between them, according to a specific rule. This rule is a mathematical function. As an example, consider a simple geometric shape as an object of which properties can be animated. Let’s have a look at changing a property of this shape, namely, its horizontal position.

插补器如何工作？ 好吧，当涉及到随时间改变对象的属性时，它们会根据一个特定的规则获取一个初始值和一个最终值，并在它们之间创建一系列“中间值”。 这个规则是数学函数 。 例如，将简单的几何形状视为可以对其属性进行动画处理的对象。 让我们看一下更改此形状的属性，即其水平位置。

线性变化 (Linear change)

The simplest interpolator is the linear interpolator. Give this interpolator an initial and final position, and the interpolator will calculate a series of middle points, equally separated from each other, along which the shape will pass in order to get to the final position. Take a look at how the square moves. From the graph of position over time, you can see that the position value follows a linear path through the graph as the position of the square changes. This illustrates that, per unit of time, the position value changes in equal parts, with no variation in speed. In other words, the linear interpolator creates constant speed.

最简单的内插器是线性内插器。 给此插值器一个初始位置和最终位置，插值器将计算一系列彼此相等的中间点，形状将沿着这些中间点经过以到达最终位置。 看一下正方形如何移动。 从位置随时间变化的图表中，您可以看到，随着正方形位置的变化，位置值遵循通过该曲线的线性路径。 这说明，每单位时间位置值均等变化，而速度没有变化。 换句话说，线性内插器产生恒定速度 。

缓和 (Easing)

Easing refers to a value’s speed changing over time. In the case of an object’s position, for example, you’ll see that its rate of motion changes, by moving slow and then fast or vice versa. Look at an example of the same shape as before, but now the shape changes its speed during its motion:

缓动是指值的速度随时间变化 。 例如，以对象的位置为例，您会看到它的运动速率发生了变化，先缓慢然后快速移动，反之亦然。 看一个与以前相同形状的示例，但是现在该形状会在其运动过程中改变其速度：

As you can see from the graph of the shape’s position over time, the value now plots a curved path. It illustrates quite clearly what’s happening:

从图形随时间变化的位置图中可以看到，该值现在绘制了一条弯曲路径。 它清楚地说明了正在发生的事情：

• At first, as time passes, the value of position doesn’t change much; the shape has a slow movement.
  起初，随着时间的流逝，头寸的值变化不大； 形状移动缓慢。
• As we reach the middle of our animation, the shape accelerates steeply. The shape now moves much faster because the change in position per unit of time is greater.
  当我们到达动画的中间时，形状急剧加速。 现在，形状移动得更快，因为每单位时间的位置变化更大。
• Finally, it decelerates until it reaches zero speed; its motion finishes.
  最后，它减速直到达到零速度。 它的动作完成。

To create this kind of motion, we use easing interpolators, which create variable speed. This is the most appealing interpolator because of the characteristics it gives to objects that change. Usually, the kind of change that is more appealing to the eye is what is called an ease in-out, in which it accelerates at the start and decelerates at the end. It starts slow, becomes faster in the middle, and ends slow. Easing interpolators are perfect to animate objects in this way. So now, let’s look at how we can create them.

为了创建这种运动，我们使用缓动插值器 ，它们创建了可变速度 。 这是最吸引人的内插器，因为它为变化的对象赋予了特征。 通常，这种更吸引人的变化就是所谓的“ 缓入缓出” ，即从一开始就加速而在最后则减速。 它开始缓慢，中间变快，结束缓慢。 轻松的插值器非常适合以这种方式对对象进行动画处理。 现在，让我们看看如何创建它们。

贝塞尔曲线 (Bezier curves)

Bezier curves allow for graphical modeling of a numerical property changing over time, making them the de facto tool for creating the aesthetic motion we’ve talked about. The shape of an ease-in-out Bezier curve is modeled by four control points laid out in a graph of a certain value over time (the same kind as in our previous examples).

贝塞尔曲线允许对随时间变化的数值特性进行图形化建模，从而使它们成为创建我们已经讨论过的美学运动的实际工具。 缓入式贝塞尔曲线的形状由四个控制点建模，这些控制点以一定的值随时间变化(与我们之前的示例相同)。

The extreme points in this curve are fixed, and only the two middle points move. This is because the points in the extremes represent the start and end values, at the beginning and end of our animation’s time, respectively. Because of this, we only need two points in a graph to change the characteristics of the object’s movement. To modify this rate of acceleration and deceleration, the middle points, along with the fixed extreme points, create the path that is shown. This is done by De Casteljau’s algorithm, which provides a way of constructing Bezier curves using segments along control points.

该曲线中的极端点是固定的，只有两个中间点移动。 这是因为极端点分别代表动画时间的开始和结束时的开始和结束值。 因此，我们仅需要图形中的两个点即可更改对象运动的特征。 要修改加速和减速的速度，中间点以及固定的极限点将创建显示的路径。 这是由De Casteljau的算法完成的，该算法提供了一种使用沿控制点的线段构造贝塞尔曲线的方法。