Question

我有一个带有标签式活动的Android应用。现在，如果我切换标签，我想更改浮动操作按钮的图标。它应该与材料设计指南中的内容相似：

我没有使用支持库中的FAB，但这个因为我还需要FAB菜单：

我查看了源代码，发现它基本上使用了图像按钮作为FAB的形状，另一个图像按钮作为图标。通过使用缩放动画，我已经设法创建按钮本身的缩小和缩放动画：

ScaleAnimation shrink =  new ScaleAnimation(1f, 0.2f, 1f, 0.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
shrink.setDuration(150);
shrink.setInterpolator(new DecelerateInterpolator());
shrink.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {}
    @Override
    public void onAnimationRepeat(Animation animation) {}

    @Override
    public void onAnimationEnd(Animation animation) {

        ScaleAnimation expand =  new ScaleAnimation(0.2f, 1f, 0.2f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        expand.setDuration(150);
        expand.setInterpolator(new AccelerateInterpolator());
        animBtn.startAnimation(expand);
    }
});

animBtn.startAnimation(shrink);

现在我想知道如何才能创造一个“揭露”。（我现在不怎么称呼它）动画就像在指南中一样。我不想为每个帧创建多个图标图像。这就是我的想法：

使用从中心开始的动画将图标的颜色从透明变为白色
在图标上放置一个圆弧并使用动画减小圆弧宽度
使用缩放动画

我无法找到第一个解决方案。第二个可能是可能的，但我认为必须有一个更好的解决方案。第三个还不够。

有人可以帮帮我吗？

编辑：我找到了第一种方法。请参阅下面的答案。

编辑2：我改进了我的方法。现在它看起来与指南中的动画非常相似。请参阅下面的编辑答案。你觉得怎么样？

Answer 1

好的，我现在离得很近了。在以慢动作观看视频后，我认为除了缩放之外还有一个旋转。感谢cYrixmorten，我现在有了这个：

ScaleAnimation btnAnim =  new ScaleAnimation (1f, 0.1f, 1f, 0.1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    btnAnim.setDuration(150);
    btnAnim.setInterpolator(new DecelerateInterpolator());
    btnAnim.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {}
        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {

            ScaleAnimation expand =  new ScaleAnimation(0.1f, 1f, 0.1f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            expand.setDuration(150);
            expand.setInterpolator(new AccelerateInterpolator());
            animBtn.startAnimation(expand);
        }
    });

    ScaleAnimation iconAnim =  new ScaleAnimation(1f, 0.1f, 1f, 0.1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    iconAnim.setDuration(150);
    iconAnim.setInterpolator(new DecelerateInterpolator());
    iconAnim.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {}
        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            animIcon.setImageResource(fabIconIntArray[position]);

            Animation expand = new Animation() {
                @Override
                protected void applyTransformation(float interpolatedTime, Transformation t) {
                    animIcon.setScaleX(0.1f + 0.9f * interpolatedTime);
                    animIcon.setScaleY(0.1f + 0.9f * interpolatedTime);
                    animIcon.setRotation(-20f + interpolatedTime * 20);
                    animIcon.setAlpha(0.5f + 0.5f * interpolatedTime);
                }
            };
            expand.setDuration(150);
            expand.setStartOffset(100);
            expand.setInterpolator(new AccelerateInterpolator());
            animIcon.startAnimation(expand);
        }
    });

    animBtn.startAnimation(btnAnim);
    animIcon.startAnimation(iconAnim);

看起来像this。

我尝试了很多变种，但我认为它在指南中看起来更平滑。有没有人建议如何改进它？

编辑：在完全分析指南中的视频后，我能够改进我的动画：

ScaleAnimation btnAnim =  new ScaleAnimation(1f, 0f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
btnAnim.setDuration(250);
btnAnim.setInterpolator(new AccelerateInterpolator());
btnAnim.setAnimationListener(new Animation.AnimationListener() {
     @Override
     public void onAnimationStart(Animation animation) {}
     @Override
     public void onAnimationRepeat(Animation animation) {}

     @Override
     public void onAnimationEnd(Animation animation) {

          ScaleAnimation expand =  new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
          expand.setDuration(195);
          expand.setInterpolator(new DecelerateInterpolator());
          animBtn.startAnimation(expand);
     }
});

ScaleAnimation iconAnim =  new ScaleAnimation(1f, 0f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
iconAnim.setDuration(250);
iconAnim.setInterpolator(new AccelerateInterpolator());
iconAnim.setAnimationListener(new Animation.AnimationListener() {
     @Override
     public void onAnimationStart(Animation animation) {}
     @Override
     public void onAnimationRepeat(Animation animation) {}

     @Override
     public void onAnimationEnd(Animation animation) {
          animIcon.setImageResource(fabIconIntArray[position]);
          Animation expand = new Animation() {
               @Override
               protected void applyTransformation(float interpolatedTime, Transformation t) {
                    animIcon.setScaleX(interpolatedTime);
                    animIcon.setScaleY(interpolatedTime);
                    animIcon.setRotation(-20f + interpolatedTime * 20);
               }
          };
          expand.setStartOffset(135);
          expand.setDuration(215);
          expand.setInterpolator(new DecelerateInterpolator());
          animIcon.startAnimation(expand);
     }
});

animBtn.startAnimation(btnAnim);
animIcon.startAnimation(iconAnim);

现在看起来像this。你觉得怎么样？

Android：在标签更改上动画FAB

1 个答案: