Android：浮动操作按钮内的细节动画答案

【问题标题】：Android: Detail animation inside Floating Action ButtonAndroid：浮动操作按钮内的细节动画
【发布时间】：2015-03-28 19:59:56
【问题描述】：

我正在尝试熟悉 Android Lollipop 的新设计指南。所以特别是对于动画，我尝试为图标或按钮实现这些详细的动画：http://www.google.com/design/spec/animation/delightful-details.html

我想知道他们是怎么做到的？

在我的特殊情况下，我有一个浮动操作按钮，用于将商品放入购物车。用户按下按钮后，我想为该按钮内的可绘制图标设置动画。动画应具有滑动效果，即购物车移出到按钮底部，复选标记从按钮顶部移入。

我找到了一个 ViewFlipper (http://www.inter-fuser.com/2009/07/android-transistions-slide-in-and-slide.html)，但是我想保留按钮并只为按钮内的图标设置动画。

另一方面，我找到了 AnimationDrawables (http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html)，但在那里，我必须手动创建每一帧，这也很奇怪。

实现这一目标的最佳方法是什么？

【问题讨论】：

你已经有布局了吗？
更适合您创建自己的 fab 按钮。使用 CardView，通过角属性使其圆形。确保它具有相等的宽度和高度。然后给 cardElevetion 现在你的 cardview 将浮动。添加一个 ImageView 然后给 CardView 一些填充，这样你就可以看到类似于 FAB 的东西。现在您可以在 CardView 中根据您的需要为您的 ImageView 设置动画。在动画结束时，您可以更改 ImageView 的图标。

标签： android animation android-5.0-lollipop floating-action-button

【解决方案1】：

您可以使用帧动画：您为要制作的动画创建 15-20 帧。您创建一个可绘制的动画列表，例如 animation_list.xml：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item
    android:duration="50"
    android:drawable="@drawable/frame_01"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_02"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_03"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_04"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_05"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_06"/></animation-list>

然后你把这个drawable作为一个src放在你的自定义FAB中。现在您可以开始逐帧动画了（当 FAB 动画结束时）：

ImageView mImageViewFilling = (ImageView) findViewById(R.id.animated_imageview);
((AnimationDrawable) mImageViewFilling.getBackground()).start();

【讨论】：

【解决方案2】：

我想知道 fab 现在是否支持它，但是，您始终可以创建自己的。

创建包含图像视图的自定义线性布局。让它round 像工厂一样。然后你可以看看这个动画examples

希望对您有所帮助。快乐的编码。

【讨论】：