Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pause in AnimatorSet played sequentially

I need to apply the following animation to an imageView:

1. alpha (0 -> 1) and scale (0 -> 1) in 500ms
2. pause for 1000ms
3. alpha (1 -> 0) and scale (1 -> 0) in 500ms

In my mind these are three Animators which may be played sequentially with an AnimatorSet.

I wrote this code, in which the three blocks have been clearly separated:

ObjectAnimator alpha1 = ObjectAnimator.ofFloat(imageView, View.ALPHA, 0f, 1f);
ObjectAnimator scaleX1 = ObjectAnimator.ofFloat(imageView, View.SCALE_X, 0f, 1f);
ObjectAnimator scaleY1 = ObjectAnimator.ofFloat(imageView, View.SCALE_Y, 0f, 1f);
AnimatorSet part1 = new AnimatorSet();
part1.setInterpolator(new OvershootInterpolator());
part1.setDuration(500);
part1.playTogether(alpha1, scaleX1, scaleY1);

ObjectAnimator pause = ObjectAnimator.ofFloat(imageView, View.ALPHA, 1f);
pause.setDuration(1000);

ObjectAnimator alpha0 = ObjectAnimator.ofFloat(imageView, View.ALPHA, 1f, 0f);
ObjectAnimator scaleX0 = ObjectAnimator.ofFloat(imageView, View.SCALE_X, 1f, 0f);
ObjectAnimator scaleY0 = ObjectAnimator.ofFloat(imageView, View.SCALE_Y, 1f, 0f);
AnimatorSet part2 = new AnimatorSet();
part2.setInterpolator(new AccelerateDecelerateInterpolator());
part2.setDuration(500);
part2.playTogether(alpha0, scaleX0, scaleY0);

In my opinion this code is clear, and better than having timers or listeners. The main question is, is there a kind of "PauseAnimator" which may be used in similar situations? (actually the second block of code does nothing, it animates alpha from 1 to 1 in 1000ms)

like image 392
Massimo Avatar asked Dec 10 '25 20:12

Massimo


1 Answers

setStartDelay() method can be used for this purpose. Also, PropertyValuesHolder can be used to animate different properties of a view simultaneously.

Here are the steps at a high level:

  1. Set up objectAnimator1 to animate raising alpha and upscaling x and y in parallel
  2. Set up objectAnimator2 to animate in parallel lowering alpha and downscaling x and y with a start delay
  3. Use AnimatorSet to animate objectAnimator1 and objectAnimator2 in a sequence.

Here is the Code: My view here is a text view named "mTextView"

// objectAnimator1 stuff
PropertyValuesHolder pvhToRaiseAlpha = PropertyValuesHolder.ofFloat("alpha", 0f, 1.0f);
PropertyValuesHolder pvhForxUpscale = PropertyValuesHolder.ofFloat("scaleX", 0f, 1.0f);
PropertyValuesHolder pvhForyUpscale = PropertyValuesHolder.ofFloat("scaleY", 0f, 1.0f);
ObjectAnimator objectAnimator1 = ObjectAnimator.ofPropertyValuesHolder(mTextView, pvhToRaiseAlpha, pvhForxUpscale, pvhForyUpscale);
objectAnimator1.setDuration(500);

// objectAnimator2 stuff
PropertyValuesHolder pvhToLowerAlpha = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f);
PropertyValuesHolder pvhForxDownscale = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0f);
PropertyValuesHolder pvhForyDownscale = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0f);
ObjectAnimator objectAnimator2 = ObjectAnimator.ofPropertyValuesHolder(mTextView, pvhToLowerAlpha, pvhForxDownscale, pvhForyDownscale);
objectAnimator2.setDuration(500);
objectAnimator2.setStartDelay(1000);

// AnimatorSet stuff
AnimatorSet sequenceAnimator = new AnimatorSet();
sequenceAnimator.playSequentially(objectAnimator1, objectAnimator2);
sequenceAnimator.start();
like image 125
zero_to_one Avatar answered Dec 13 '25 10:12

zero_to_one



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!