There're two phases in this animation. First one scales X and Y axis, and second one downscales it. So, we can divide them into two AnimatorSet
s and play them sequentially.
The key point of the animation is to find appropriate interpolator for the second AnimatorSet
, because it's not standard one.
See, we want fab to overshoot, then undershoot and then finally settle up to the specified value in the animator.
Luckily, there's very handy PathInterpolator
, which will create an interpolator for us with provided Path
.
Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.lineTo(0.5f, 1.3f);
path.lineTo(0.75f, 0.8f);
path.lineTo(1.0f, 1.0f);
PathInterpolator pathInterpolator = new PathInterpolator(path);
So, let's create the first animation:
final float from = 1.0f;
final float to = 1.3f;
ObjectAnimator scaleX = ObjectAnimator.ofFloat(fab, View.SCALE_X, from, to);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(fab, View.SCALE_Y, from, to);
ObjectAnimator translationZ = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, from, to);
AnimatorSet set1 = new AnimatorSet();
set1.playTogether(scaleX, scaleY, translationZ);
set1.setDuration(100);
set1.setInterpolator(new AccelerateInterpolator());
set1.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
fab.setImageResource(isActive ? R.drawable.heart_active : R.drawable.heart_passive);
fab.setBackgroundTintList(ColorStateList.valueOf(isActive ? colorActive : colorPassive));
isActive = !isActive;
}
});
We are scaling both x, y. Also, we are changing z translation to have appropriate shadow effect. When animation ends, we want to change fab state (color of heart and fab background).
Now let's create the animation to settle back:
ObjectAnimator scaleXBack = ObjectAnimator.ofFloat(fab, View.SCALE_X, to, from);
ObjectAnimator scaleYBack = ObjectAnimator.ofFloat(fab, View.SCALE_Y, to, from);
ObjectAnimator translationZBack = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, to, from);
AnimatorSet set2 = new AnimatorSet();
set2.playTogether(scaleXBack, scaleYBack, translationZBack);
set2.setDuration(300);
set2.setInterpolator(pathInterpolator);
See here, we used pathInterpolator
that we created earlier.
We want to play those two AnimatorSet
s sequentially:
final AnimatorSet set = new AnimatorSet();
set.playSequentially(set1, set2);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
fab.setClickable(true);
}
@Override
public void onAnimationStart(Animator animation) {
fab.setClickable(false);
}
});
Also, we want to disable clicks on fab whilst animating it. So we are turning it on/off depending on animation state.
Finally, we launch the animation when a click happens:
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
set.start();
}
});
Result:
Source code at github