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

score 8 · Accepted Answer · answered May 12 '16 at 04:34

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

when I click on it, it takes it down and then up, how do I make it go the animation when the starting position is where it is right now — Lidor Eliyahu Shelef, Dec 29 '20 at 07:48

Bentaye · Answer 2 · 2017-12-04T20:47:31.137

After fiddling with Joel's answer, I found out you could also use a ViewPropertyAnimator and write it all at once this way:

img_fullscreen_drone.setScaleType(ImageView.ScaleType.CENTER);
img_fullscreen_drone.animate()
  .setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = ((Float) (animation.getAnimatedValue()));
        // 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)));
    }})
  .scaleX(0f).scaleY(0f)
  .setDuration(5000)
  .start();

Not tested by I think it should work just fine.

score -1 · Answer 3 · answered May 11 '16 at 21:01

Make an animator set first. So something like

AnimatorSet set = new AnimatorSet();

Then you have to separate your 2 animations which is translate and scale in form of an animator which you can do like

for translate use :

ObjectAnimator translateAnimator = ObjectAnimator.ofInt(view, "y", toValue);

same you you can do for scale. Then you can do play together

set.playTogether(translateAnimator, scaleAnimator);

That should scale and translate together.

Translate (curve path) + Scale animation Android

3 Answers3