Material Design 中动画实现的技巧及在 RecyclerView 中的应用-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及，越来越多的用户开始重视应用程序的体验。Material Design 作为 Google 设计的全新 UI 设计规范，提供了全新的设计语言和设计思路，它强调界面的物理化与动效，为用户提供更加生动、更具可视化的应用体验。

在 Material Design 中，动画是非常重要的一部分。下面将介绍如何在 Android 中使用 Material Design 的动画技巧，以及如何将它运用到 RecyclerView 中。

动画实现的技巧

布局动画

在 Android 中实现布局动画时，我们可以使用 LayoutTransition 类。LayoutTransition 有四个动画监听器：

start
end
cancel
repeat

它们分别在动画开始、结束、取消和重复时被调用。我们可以通过它们来对布局动画进行更加精细的控制。

下面是一个实现布局动画的示例：

// javascriptcn.com 代码示例
<Button
    android:id="@+id/btn_add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Add"
    android:onClick="onAddButtonClick"/>

<LinearLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

private void onAddButtonClick(View view) {
    View newItem = getLayoutInflater().inflate(R.layout.item, null);
    container.addView(newItem);
}

当我们点击 Add 按钮时，一个新的 item 将被添加到 container 中，下面是实现的动画效果：

// javascriptcn.com 代码示例
LayoutTransition transition = new LayoutTransition();

PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);
PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);
Animator changeAppearAnimator = ObjectAnimator.ofPropertyValuesHolder(null, scaleX, scaleY);
Animator changeDisappearAnimator = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
Animator changingAppearingAnimator = ObjectAnimator.ofFloat(null, "alpha", 0f, 1f);
Animator changingDisappearingAnimator = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);

transition.setAnimator(LayoutTransition.CHANGE_APPEARING, changingAppearingAnimator);
transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changingDisappearingAnimator);
transition.setAnimator(LayoutTransition.APPEARING, changeAppearAnimator);
transition.setAnimator(LayoutTransition.DISAPPEARING, changeDisappearAnimator);

container.setLayoutTransition(transition);

在这个例子中，我们创建了一个 LayoutTransition 对象，并定义了四个属性动画，分别是：

changeAppearAnimator：changeAppearing 动画
changeDisappearAnimator：changeDisappearing 动画
changingAppearingAnimator：appearing 动画
changingDisappearingAnimator：disappearing 动画

然后将这些动画分别绑定到 LayoutTransition 的四个对应事件上。

属性动画

属性动画可以让我们方便地定义动画效果，同时也可以支持复杂的自定义动画效果。

在 Material Design 中，我们可以使用 ObjectAnimator 类来实现属性动画。

下面是一个简单的实现属性动画的示例：

// javascriptcn.com 代码示例
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);

animator.setDuration(300);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
        view.setAlpha(value);
    }
});

animator.start();

在这个例子中，我们创建了一个 ValueAnimator 对象，并将其设置从 0 到 1 的动画值，动画时长为 300 毫秒，并使用加速减速插值器。然后我们添加了一个动画更新监听器，以在动画运行期间更新 View 的透明度，最后启动动画。

分层动画

分层动画也是 Material Design 中常用的一种动画实现方式。它可以将动画效果分层处理，从而达到更好的动画效果。

在 Android 中，我们可以使用 AnimationSet 对象来实现分层动画。

下面是一个实现分层动画的示例：

// javascriptcn.com 代码示例
AnimationSet set = new AnimationSet(false);

AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
alphaAnimation.setDuration(200);
alphaAnimation.setRepeatCount(1);
alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);

RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(1000);

set.addAnimation(alphaAnimation);
set.addAnimation(rotateAnimation);

view.startAnimation(set);

在这个例子中，我们创建了一个 AnimationSet 对象，并将两个动画效果添加到其中。第一个动画是透明度变化动画，它的时长为 200 毫秒，重复 1 次，并使用倒放重复模式实现闪烁效果。第二个动画是旋转动画，它的时长为 1000 毫秒，绕中心点旋转 360 度。最后我们将 AnimationSet 应用到 View 上启动动画。

在 RecyclerView 中的应用

RecyclerView 是一个比较新的控件，它提供了强大的列表展示功能。在 Material Design 中，由于动画效果的重要性，RecyclerView 也提供了很多内置的动画效果。

LayoutAnimationController 动画

LayoutAnimationController 可以应用于 RecyclerView，以为 RecyclerView 项添加动画效果。我们可以通过 LayoutAnimationController 类来实现这个功能。

下面是一个实现 LayoutAnimationController 动画的示例：

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutAnimation="@anim/layout_animation_fall_down"/>

在这个例子中，我们为 RecyclerView 设置了一个 layoutAnimation，然后我们定义了一个 layout_animation_fall_down.xml 动画资源文件来实现动画效果：

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/item_animation_fall_down"
    android:delay="15%" />

但是，这种方式不能很好地控制动画效果的精度。因此，LayoutAnimationController 不是最好的 RecyclerView 动画实现方式。

ItemAnimator 动画

ItemAnimator 动画可以在 RecyclerView 中的单个列表项上实现动画效果，它提供了更细粒度的控制功能。

通过实现 RecyclerView.ItemAnimator 类，我们可以自定义 RecyclerView 的动画，下面是一个自定义 ItemAnimator 的示例：

public class CustomItemAnimator extends DefaultItemAnimator {
    @Override
    public void onRemoveFinished(RecyclerView.ViewHolder viewHolder) {
        super.onRemoveFinished(viewHolder);
        viewHolder.itemView.setAlpha(0f);
    }
}

在这个例子中，我们继承了 DefaultItemAnimator，重写了 onRemoveFinished 方法，并在其中定义了一个透明度变化动画效果。

然后我们在 RecyclerView 中应用这个自定义 ItemAnimator：

recyclerView.setItemAnimator(new CustomItemAnimator());

这个自定义 ItemAnimator 会为 RecyclerView 的每个项提供透明度变化的动画效果。

总结

Material Design 的动画设计思路是让用户像和物理对象进行交互一样与应用程序进行交互，从而提供更加生动、更具可视化的应用体验。在 Android 中，我们可以使用多种方法实现 Material Design 的动画效果，并将其应用到 RecyclerView 中。这些动画技巧不仅可以提升应用程序的实用性和用户体验，也可以为我们的开发提供更多的想象空间。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545fbbe7d4982a6ebfb9ae3