How to translate animation on an image diagonally?

Question

I want to animate an image diagonally like below picture. I have tried translate animation but I am only able to do it either parallel X-axis or parallel Y-axis.

But couldn't able to figure out how to do it diagonally. And I am also not sure it can be done by translate animation or some other kinda animation. So please suggest me how can I do it or if any one can give me a helpful link then also I will be obiliged.

Answer 1

One way is to use an AnimatorSet to play more ObjectAnimator together.

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();
}

Or you could use a custom View with a custom Property, but in this case you will need to compute translation on X and Y yourself:

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);
}

And use it to animate:

private void animateDiagonalPan(View v) {

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

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