android - 通过点数组的动画

Question

我确信有一种简单的方法可以做到这一点，但我被卡住了。假设我有一个点列表:

Point[] list = {pointA, pointB, pointC, ...}

我想通过每个点为 ImageView 设置动画所以我尝试了这个:

id = 0;
AnimatorListenerAdapter animEnd = new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        id++;
        if(id != list.length) {
            iv.animate()
                .translationX(list[id].getX())
                .translationY(list[id].getY())
                .setDuration(200)
                .setListener(this);
        }
    }
};

iv.animate()
    .translationX(list[id].getX()).translationY(list[id].getY())
    .setDuration(200).setListener(animEnd);

它可以工作，但每个动画之间有轻微的延迟。

有什么想法吗？谢谢!

Answer 1

您可能会在动画步骤之间遇到延迟，因为您总是在从一个步骤到另一个步骤的每个过渡时开始一个新的动画。要克服这种情况，您有多种选择。

关键帧

Here您可以找到一种称为关键帧动画的技术，这是一种非常常见的动画技术，可能正是您想要的。

A Keyframe object consists of a time/value pair that lets you define a specific state at a specific time of an animation. Each keyframe can also have its own interpolator to control the behavior of the animation in the interval between the previous keyframe's time and the time of this keyframe.

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation)
rotationAnim.setDuration(5000ms);

在您的情况下，您可以将 list 中的点映射到 Keyframe 实例列表，并且...

Point[] list = {pointA, pointB, pointC, ...}
List<Keyframe> kfs = new ArrayList<Keyframe>();
foreach (Point p : points) {
  Keyframe kf = new Keyframe.ofFloat(p.x); // or what ever
  kfs.add(kf);
}

...稍后将这些关键帧传递给一些工厂方法以创建一些PropertyValuesHolder，例如ofFloat具有以下签名:

public static PropertyValuesHolder ofFloat (
    Property<?, Float> property, 
    float... values
)

第二个参数是可变参数列表，它也接受数组作为输入。因此，应该可以将您的 kfs 作为第二个参数以某种方式传递给该方法。

在你的情况下，我会制作以下方法，因为你正在为 dalvik VM 开发你不能使用 java8 lambda 表达式:

// maps points to X/Y float values
List<Float> toArrayX(Point[] points) { ... }
List<Float> toArrayY(Point[] points) { ... }
// maps float values to Keyframes
List<Keyframe> toKeyframes(List<Float> floats) { ... }
void createAnimation(Point[] points) {
  List<Keyframe> xs = toKeyframes(toArrayX(points));
  PropertyValuesHolder phvX = PropertyValuesHolder
    .ofKeyframe("translationX", xs);

  List<Keyframe> ys = toKeyframes(toArrayY(points));
  PropertyValuesHolder phvY = PropertyValuesHolder
    .ofKeyframe("translationY", ys);

  linkPropertyValuesHolder(phvX);
  linkPropertyValuesHolder(phvY);
}
void linkPropertyValuesHolder(PropertyValuesHolder phv) {
  // setup target
  ObjectAnimator anim = ObjectAnimator
    .ofPropertyValuesHolder(target, phv)
  anim.setDuration(5000ms);
}

插值器

或者，您可以通过 Interpolator 指定由点给出的转换实例。

An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc.

插值器将 0.0 和 1.0 之间的小数 float 映射到 0.0 和 1.0 之间的另一个小数 float 。像下面三个； LinearInterpolator , AccelerateDecelerateInterpolator和 BounceInterpolator :

图片来自 here

路径插值器

与 PathInterpolator s 可以使用 Path 实例绘制任意插值器。绘制的路径将用于驱动动画。在您的情况下，您可以创建两条路径，一条用于 x，另一条用于 y 翻译。

但是，从路径构建插值器时要小心，因为

... the Path must conform to a function y = f(x).

The Path must not have gaps in the x direction and must not loop back on itself such that there can be two points sharing the same x coordinate. It is alright to have a disjoint line in the vertical direction:

因此请看一下从此处获取的以下代码 fragment ，它创建了一个有效路径并可用作 PathInterpolator 构造函数的输入。

Path path = new Path();
path.lineTo(0.25f, 0.25f);
path.moveTo(0.25f, 0.5f);
path.lineTo(1f, 1f);

自定义插值器

当给定的插值器不够灵活时，您也可以只实现 Interpolator 接口(interface)，然后从中创建一个新实例。接口(interface)非常狭窄，它只提供一个名为 getInterpolation 的方法。具有以下签名。

public abstract float getInterpolation (float input)    

代码与 XML

最后一个选项是将所有动画配置移动到 XML 中，而不是将这些细节直接烘焙到代码的二进制分发中。但是，如果可能的话，每个给定的选项都需要不同的设置才能通过 XML 进行管理。

希望这对您有所帮助，但这只是伪代码。我没有测试代码...所以不保证正确性。