如何在对角线上翻译图像上的动画？

Question

我想在对角线下为图片制作动画，如下图所示。我尝试过翻译动画，但我只能做平行的X轴或平行的Y轴。

但是无法弄清楚如何对角地做。而且我也不确定是否可以通过翻译动画或其他类型的动画来完成。所以请建议我怎么做，或者如果有人能给我一个有用的链接，那么我也会被瞄准。

Answer 1

一种方法是使用AnimatorSet一起播放更多ObjectAnimator。

private void animateDiagonalPan(View v) {
    AnimatorSet animSetXY = new AnimatorSet();

    ObjectAnimator y = ObjectAnimator.ofFloat(v,
                "translationY",v.getY(), targetY);

    ObjectAnimator x = ObjectAnimator.ofFloat(v,
                "translationX", v.getX(), targetX);

    animSetXY.playTogether(x, y);
    animSetXY.setInterpolator(new LinearInterpolator(1f));
    animSetXY.setDuration(300);
    animSetXY.start();
}

或者您可以将自定义View与自定义Property一起使用，但在这种情况下，您需要自己计算X和Y的翻译：

final Property<YourView, Float> transProperty = new Property<YourView, Float>(
        float.class, "translation") {
    @Override
    public Float get(YourView) {
        return object.getTranslation();
    }

    @Override
    public void set(YourView, Float value) {
        object.translate(value);
    }
};

private void translate(float value){
       setTranslationX(value);
       setTranslationY(value);
}

并使用它来制作动画：

private void animateDiagonalPan(View v) {

    ObjectAnimator xy = ObjectAnimator.ofFloat(v,
                transProperty, targetValue);

    xy.setInterpolator(new LinearInterpolator(1f));
    xy.setDuration(300);
    xy.start();
}

Answer 2

只需一个ObjectAnimator即可实现此目的。

ObjectAnimator centerChangeAnim = ObjectAnimator.ofObject(this, "centerpoint", new PointEvaluator(), fromPoint, toPoint);
centerChangeAnim.start()

在同一个类中添加回调函数。

public void setCenterpoint(Point centerPoint) {
    this.circleCenter = centerPoint;
  }

这是结合了X和Y的自定义类型赋值器。

public class PointEvaluator implements TypeEvaluator<Point> {
    @Override
    public Point evaluate(float t, Point startPoint, Point endPoint) {
        int x = (int) (startPoint.x + t * (endPoint.x - startPoint.x));
        int y = (int) (startPoint.y + t * (endPoint.y - startPoint.y));
        return new Point(x,y);
    }
}

享受！