Translate (curve path) + Scale animation Android

Question

I want to translate a imageview in a curve while scaling it as it translates.

Ive gone through Multiple posts like https://stackoverflow.com/a/30254927/3518278 where i cant figure out how to compute my path variable

also its mentioned here that android 5 provides basic curves in interpolars https://stackoverflow.com/a/26591870/3518278 but they seem to have no effect.

My current code is

View view;
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
        animator.setDuration(5000); // 5 seconds duration from 0 to 1
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
        {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = ((Float) (animation.getAnimatedValue()))
                        .floatValue();
                // Set translation of your view here. Position can be calculated
                // out of value. This code should move the view in a half circle.
                img_fullscreen_drone.setTranslationX((float)(150.0 * Math.sin(value*Math.PI)));
                img_fullscreen_drone.setTranslationY((float)(150.0 * Math.cos(value*Math.PI)));
                img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
                img_fullscreen_drone.animate().scaleX(0.5f).scaleY(0.5f).setDuration(5000).start();

            }
        });

        animator.start();

this translates my view in a arc but after translation is complete scale starts,i want scale and translate along curve to happen toghether.

Any help will be appreicated

Thanks in Advance

Answer 1

Your original code was restarting the scale animation every frame of the animation that translated the image. You just need to move the scale animation code out of the update block, as below.

Note that your using two slightly different methods of animation, for scale vs. translate, which is perhaps what confused you.

    View view;
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
    animator.setDuration(5000); // 5 seconds duration from 0 to 1
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
    {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value = ((Float) (animation.getAnimatedValue()))
                    .floatValue();
            // Set translation of your view here. Position can be calculated
            // out of value. This code should move the view in a half circle.
            img_fullscreen_drone.setTranslationX((float)(150.0 * Math.sin(value*Math.PI)));
            img_fullscreen_drone.setTranslationY((float)(150.0 * Math.cos(value*Math.PI)));
        }
    });

    animator.start();

    img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
    img_fullscreen_drone.animate().scaleX(0.5f).scaleY(0.5f).setDuration(5000).start();