單擊時動畫 Fab（放大/縮小）

Question

我正在嘗試模仿以下浮動操作按鈕的動畫和顏色變化。

浮動操作按鈕的工作方式是白色關閉，藍色打開。

但是，我在動畫和更改顏色方面沒有成功。

這些是我嘗試這樣做的，正如你所看到的，我已經注釋掉了我嘗試這樣做的所有不同方式。

這是我的代碼：

    @SuppressWarnings("unused")
    @OnClick(R.id.fabMovieFavourite)
    public void addMovieFavourite(View view) {
 /*       final Animator animator = AnimatorInflater.loadAnimator(getActivity(), R.animator.add_favourite_movie);
        animator.setTarget(view);)
        animator.start();
 */
/*
        AnimatorSet animatorSet = new AnimatorSet();
        PropertyValuesHolder propertyValuesHolderX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1.1f);
        PropertyValuesHolder propertyValuesHolderY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1.1f);
        ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX, propertyValuesHolderY);
        objectAnimator.setDuration(300);
        objectAnimator.setInterpolator(new OvershootInterpolator(10f));
*/

        /*
        objectAnimator.setRepeatCount(1);
        objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
*/

/*
        PropertyValuesHolder propertyValuesHolderX2 = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.9f);
        PropertyValuesHolder propertyValuesHolderY2 = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.9f);
        ObjectAnimator objectAnimator2 = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX2, propertyValuesHolderY2);
        objectAnimator.setDuration(300);
        objectAnimator2.setInterpolator(new OvershootInterpolator(10f));

        animatorSet.playSequentially(objectAnimator, objectAnimator2);
        objectAnimator.start();
*/

      //  view.BackgroundTintList(ContextCompat.getColorStateList(getContext(), R.color.primary));
        //view.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.primary));

        if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
            Timber.d("start translationZ");
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, View.TRANSLATION_Z, 12f);
            objectAnimator.setDuration(300);
            objectAnimator.setInterpolator(new OvershootInterpolator(10f));
            objectAnimator.setTarget(view);
            objectAnimator.start();
        }
    }

非常感謝您的任何建議。

Answer 1

這個動畫有兩個階段。 第一個縮放 X 和 Y 軸，第二個縮小它。 因此，我們可以將它們分成兩個AnimatorSet並按順序播放它們。

動畫的關鍵點是為第二個AnimatorSet找到合適的插值器，因為它不是標准的。

看，我們希望 fab 過沖，然后下沖，最后穩定到動畫器中的指定值。

幸運的是，有非常方便的PathInterpolator ，它將為我們提供一個內插器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);

所以，讓我們創建第一個動畫：

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順序播放這兩個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();
    }
});

結果：

github上的源代碼