单击动画Fab（放大缩小）

单击动画Fab（放大/缩小）

此动画有两个阶段。第一个缩放X和Y轴，第二个缩小它。因此，我们可以将它们分为两个AnimatorSet并顺序播放。

动画的关键点是为第二个像素找到合适的插值器

AnimatorSet

，因为它不是标准的插值器。

看，我们希望晶圆厂超调，然后下冲，然后最终稳定到动画制作器中的指定值。

幸运的是，它非常方便

PathInterpolator

，它会为

provider

提供一个内插器

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

我们同时缩放x，y。另外，我们正在更改z平移以具有适当的阴影效果。动画结束时，我们要更改fab状态（心脏和fab背景的颜色）。

现在，让我们创建动画来解决：

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

看到这里，我们使用

pathInterpolator

了我们先前创建的。

我们想要

AnimatorSet

依次播放这两个：

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

另外，我们希望在制作动画时禁用对fab的点击。所以我们根据动画状态打开/关闭它。

最后，当发生点击时，我们启动动画：

fab.setonClickListener(new View.onClickListener() {    @Override    public void onClick(View v) {        set.start();    }});

Source pre at github