Material Design(五)

Animations

在材料设计的动画给用户的反馈意见对他们的行动，并提供视觉连续性，用户与应用程序进行交互。该材料的主题提供了一些默认的动画按钮和活动过渡，以及Android L开发者预览版提供了让你自定义这些动画和创造新的附加的API：

• 触摸反馈
• 显示效果
• 活动转变
• 曲线运动
• 视图状态更改

Touch Feedback触摸反馈

---

默认的触摸反馈的动画按钮使用新的 RippleDrawable类，不同状态之间的转换与产生连锁反应。

在大多数情况下，这个功能应该在你的视图的XML指定背景适用?android:attr/selectableItemBackground 为一个有界涟漪或  ?android:attr/selectableItemBackgroundBorderless 的纹波超出视图范围。您还可以创建一个RippleDrawable并将其设置为你的视图的背景。或者，你可以定义一个RippleDrawable 为使用XML资源波纹元素。而Android L开发者预览版的动画色彩的选择与产生连锁反应。

您可以将颜色分配给RippleDrawable对象。要更改默认的触摸反馈的颜色，使用的主题的android:colorControlHighlight属性。

Reveal Effect显示效果

---

该 ViewAnimationUtils.createCircularReveal 方法使你的动画剪切圈来显示或隐藏视图。

为了揭示利用这种效应以前看不见的看法：

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = myView.getWidth();

// create and start the animator for this view
// (the start radius is zero)
ValueAnimator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

若要隐藏使用这种效应以前可见视图：

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();

// create the animation (the final radius is zero)
ValueAnimator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();

Activity Transitions

---

您可以进入和退出的过渡和活动之间共享内容的转变指定自定义动画。

• 一进入过渡决定意见的活动如何进入现场。例如，在explode中输入过渡，意见从外面进入现场和飞在向屏幕的中心。
• 一个退出过渡决定在活动结束现场如何看法。例如，在explode出口过渡，并在视图退出场景远离中心。
• 一个共享的元素转换决定了意见，认为这些活动之间的两种活动之间的过渡共享。例如，如果有两个activity 具有相同的图像中的不同位置和大小，该moveImage共享元素的过渡转换和缩放顺利这些activity 之间的图像。

而Android L开发者预览版支持这些进入和退出的转换：

• explode -或从场景的中心移动的观点。
• slide -或从现场的其中一个边缘移动的观点。
• fade  -在现场或出移动的观点。

它扩展了任何过渡android.transition.Visibility类是支持作为进入或退出过渡。欲了解更多信息，请参阅API参考 android.transition.Transition类。

而Android L开发者预览版还支持这些共同元素转变：

• changeBounds -在动画中的变化的目标的看法布局界限。
• changeClipBounds -在动画中的变化的目标的看法夹界限。
• changeTransform -动画在规模和目标的意见旋转的变化。
• moveImage -为动画图像视图改变大小和规模型。

当您启用activity 转变在你的应用程序，默认的交叉渐变过渡的进入和退出activity 之间激活。

  图1 -使用一个共享的元素的场景转换。

Specify custom transitions指定自定义转换

首先，启用窗口内容转换与android:windowContentTransitions当你定义一个样式继承自 material theme属性。您也可以指定进入，退出，并在您的样式定义共享的元素转换：

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/move_image</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/move_image</item>
</style>

该move_image在这个例子中Transition 的定义如下：

<!-- res/transition/move_image.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <moveImage/>
</transitionSet>

该moveImage元素对应于android.transition.MoveImage 类。欲了解更多信息，请参阅API参考android.transition.Transition。

为了使窗口的内容转换在你的代码，而不是，调用 Window.requestFeature方法：

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

要指定在您的代码转换，调用这些方法有一个Transition  对象：

• Window.setEnterTransition
• Window.setExitTransition
• Window.setSharedElementEnterTransition
• Window.setSharedElementExitTransition

该setExitTransition和setSharedElementExitTransition方法定义为调用活动结束过渡。该setEnterTransition和 setSharedElementEnterTransition方法定义了所谓的活动进入过渡。

为了得到一个Transition 的完整效果，必须同时在主叫和被叫activity ，使窗口中的内容转换。否则，调用活动将启动退出过渡，但随后你会看到一个窗口的过渡（如规模或褪色）。

要尽快启动进入转型期，使用 Window.setAllowEnterTransitionOverlap上称为活性的方法。这让你有更多戏剧性的输入转换。这同样适用于呼叫的活性和出口过渡与Window.setAllowExitTransitionOverlap方法。

Start an activity using transitions

如果您启用转换并设置为Activity退出 transitions ，transition您启动另一个Activity与激活的startActivity方法。如果已经设置了第二个Activity的进 ​​入 transitions，亦是Activity开始时激活。

Shared elements transitions

为了使两项Activity有一个共同的元素之间的画面转换动画：

1. 让你的style窗口内容的转换。
2. 指定你的style的共享元素过渡。
3. 定义你的转换为XML资源。
4. 指定一个共同的名字在两个布局与共享元素android:viewName 属性。
5. 使用ActivityOptions.makeSceneTransitionAnimation方法。

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:viewName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

对于您在您的代码生成共享动态视图，使用View.setViewName 方法在两个Activity指定一个共同的元素名称。

为了扭转场景过渡动画，当你完成了第二个Activity，叫 Activity.finishAfterTransition方法，而不是Activity.finish。

Multiple shared elements多个共享元素

为了使两项Activity有多个共享的元素之间的场景过渡动画，定义了两种布局方式共享元素与安卓的viewName 属性（或使用View.setViewName在这两个活动），并创建一个 ActivityOptions对象，如下所示：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Curved Motion曲线运动

---

在材料设计动画依靠曲线插补时间和空间的运动模式。而Android L开发者预览版提供了新的API，使您能够为动画定义自定义定时曲线和曲线运动模式。

该PathInterpolator类是基于贝塞尔曲线或一个新的插补 Path 对象。该插补器指定一个1x1的正方形运动曲线，用（0,0）锚点和（1,1）和控制点作为使用构造函数的参数指定。您也可以定义一个PathInterpolator为XML资源：

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

而Android L开发者预览版提供了XML资源在材料设计规范的三个基本曲线：

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml  你可以传递一个PathInterpolator对象的 Animator.setInterpolation方法。

该ObjectAnimator类有新的构造函数，使您能够同时使用两个或多个属性在一次路径动画的坐标。例如，下面的动画师使用路径对象进行动画视图的X和Y属性：

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

Animating View State Changes动画视图状态更改

---

新StateListAnimator类可以让你定义动画运行时的视图状态发生改变。下面的示例演示如何定义一个StateListAnimator为XML资源：

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

注意：有一个在需要valueFrom值将在StateListAnimator动画提供，以获得正确的行为升开发者预览版本中的已知问题。

新AnimatedStateListDrawable类，您可以创建显示相关的视图状态更改之间的动画可绘。默认情况下，一些在Android L开发者预览版的系统部件的使用这些动画。下面的示例演示如何定义一个AnimatedStateListDrawable为XML资源：

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Drawable Tinting绘制着色

---

而Android L开发者预览版，可以定义位图或九补丁阿尔法口罩，并使用解析为一个颜色资源（例如，颜色资源或主题属性着色他们?android:attr/colorPrimary）。您可以一次创建这些资产并自动将它们上色，以配合你的主题。

若要套用色调为位图，使用setTint方法或android:tint 的属性BitmapDrawable和NinePatchDrawable。

该setTint方法也可以让你设置用于混合色调颜色Porter-Duff模式NinePatchDrawable和BitmapDrawable在代码中的对象。要设置色调模式在布局中，使用的android：tintMode属性。

Extracting Prominent Colors from an Image从图像中提取颜色突出

---

而Android L开发者预览版支持库包含调色板类，它允许您从图像中提取突出的颜色。这个类提取以下突出的颜色：

• Vibrant  
• Vibrant dark
• Vibrant light
• Muted
• Muted dark
• Muted light

• 充满活力
• 充满活力的黑暗
• 充满活力的光
• 静音
• 柔和的暗
• 柔和的光线

要提取这些颜色，一传位图对象的 Palette.generate您加载图像静态方法在后台线程。如果您无法使用该线程，调用Palette.generateAsync方法，而不是提供一个监听器。

从图像中提取的突出颜色，使用getter方法在 面板类，如Palette.getVibrantColor。

欲了解更多信息，请参阅API参考 android.support.v7.graphics.Palette类。