FloatingActionButton图标动画（Android FAB src可绘制动画）

Question

我试图找到关于如何创建FAB（设计支持库）的图标动画的文档，在搜索了一段时间后我找不到任何关于它的信息，Android开发人员中的AnimationDrawable引用对FAB不起作用即使该类是ImageView的子级。

但设法得到一个工作正常的解决方法。

Answer 1

我使用的技术类似于DrawableAnimation文档中公开的技术，并使用Property Animation API文档。

首先，我使用ValueAnimator类，以及一个int数组，其中包含您将在动画中使用的drawable的id。

    final int[] ids = {R.drawable.main_button_1,R.drawable.main_button_2,R.drawable.main_button_3,R.drawable.main_button_4,R.drawable.main_button_5,R.drawable.main_button_6, R.drawable.main_button_7};
    fab = (FloatingActionButton) findViewById(R.id.yourFabID);
    valueAnimator = ValueAnimator.ofInt(0, ids.length - 1).setDuration(yourAnimationTime);
    valueAnimator.setInterpolator( new LinearInterpolator() /*your TimeInterpolator*/ );

然后设置一个AnimationUpdateListener，并使用方法FloatinActionButton.setImageDrawable（Drawable yourDrawable）定义图标行为的更改。

但ValueAnimator默认更新每个可用帧（取决于硬件中的负载），但如果已经绘制了图标，我们不需要重绘图标，这就是我使用变量“i”的原因;所以每个图标只绘制一次。 （时间取决于您定义的插补器）

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        int i = -1;
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int animatedValue = (int) animation.getAnimatedValue();
            if(i!=animatedValue) {
                fab.setImageDrawable(getResources().getDrawable(ids[animatedValue]));
                i = animatedValue;
            }
        }
    });

此实现允许您使用ValueAnimator.reverse();方法向后播放动画

我知道这不是一个专业的解决方案，但它是我唯一想到的所有支持PropertyAnimation的API。如果您知道更好的解决方案，请在此处发布，如果不是，我希望这篇文章有用

Answer 2

你可以像使用background for AnimationDrawable的其他视图一样，实现FAB的src drawable动画。

有关一般视图的背景可绘制动画，请参阅Use AnimationDrawable。

但是，你不能打电话给getBackground()来获得FAB的src。

相反，使用getDrawable()。

例：

        FloatingActionButton loginButton = findViewById(R.id.loginButton);
        loginAnimation = (AnimationDrawable) loginButton.getDrawable();

        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                loginAnimation.start();
            }
        });