FloatingActionButton图标动画(Android FAB src可绘制动画)

Question

我试图找到关于如何创建FAB的图标动画(的设计支持库)的文档，搜索了一段时间后，我找不到任何关于它的信息和AnimationDrawable参考在android开发人员不工作的FAB的，即使类是ImageView的孩子。

，但设法找到一个工作很好的解决方案。

Answer 1

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

首先，我使用ValueAnimator类和一个int数组，其中包含您将在动画中使用的可绘制对象的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(可拉的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();

向后播放动画

我知道这不是一个专业的解决方案，但它是唯一一个我已经想出的工作在所有API的支持PropertyAnimation。如果你知道一个更好的解决方案，请贴在这里，如果没有，我希望这篇文章是有帮助的

Answer 2

你可以实现FAB的src可绘制动画非常类似于其他视图使用background为AnimationDrawable。

对于一般视图的背景可绘制动画，请参见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();
            }
        });