6

I am trying to get familiar with the new design guidelines of Android Lollipop. So especially for animations, I try to achieve something like these detailed animations for icons or buttons: http://www.google.com/design/spec/animation/delightful-details.html

I was wondering how they did that?

In my special case, I have a floating action button, which is used to drop an item in a shopping cart. After the user presses the button, I want to animate the icon drawable inside that button. The animation shall have a sliding effect where the cart is moved out to the bottom of the button and the check mark is moved in from the top of the button.

enter image description here enter image description here

I found a ViewFlipper (http://www.inter-fuser.com/2009/07/android-transistions-slide-in-and-slide.html), however I want to keep the button in place and only animate the icon inside the button.

On the other hand I found AnimationDrawables (http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html) but there, I have to create each frame by hand, which is also odd.

What's the best way to achieve that?

4

2 回答 2

0

您可以使用帧动画：为要制作的动画创建 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();
于 2016-12-22T11:49:05.383 回答
0

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

创建包含图像视图的自定义线性布局。让它像工厂一样圆。然后您可以查看此动画示例

希望能帮助到你。快乐的编码。

于 2015-08-11T05:31:22.520 回答