android meterdesign 动画 (二)

Material 新增动画 ：

Touch feedback（触摸反馈）
Reveal effect（揭露效果）
Activity transitions（Activity转换效果）
Curved motion（曲线运动）
View state changes （视图状态改变）
Animate Vector Drawables（可绘矢量动画）

触摸反馈（波纹效果Ripple）

常用效果就是波纹动画，例如点击按钮时会从点击位置产生类似于波纹的扩散效果

<Button
android:text="button1"
android:id="@+id/button1"
...
android:background="@drawable/ripple_bg"
/>

<Button
android:text="button2"
android:id="@+id/button2"
...
android:background="?android:attr/selectableItemBackground"
/>

<Button
android:text="button3"
android:id="@+id/button3"
...
android:background="?android:attr/selectableItemBackgroundBorderless"
/>

<Button
android:text="button4"
android:id="@+id/button4"
.../>

button1:自定义按钮的ripple效果背景色(ripple_bg.xml)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000"><!--波纹颜色-->
<item>
<shape android:shape="rectangle">
<solid android:color="#00FFFF" /> <!--按键背景色-->
<corners android:radius="4dp" />
</shape>
</item>
</ripple>

button2: ?android:attr/selectableItemBackground (有界波纹)

button3: ?android:attr/selectableItemBackgroundBorderless (无界波纹)

你可以给RippleDrawable对象指定一种颜色。要更改默认的触摸反馈颜色，使用主题的android:colorControlHighlight属性。

<span style="font-size:18px;">  <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"></style>
<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#673AB7</item>
<item name="colorPrimaryDark">#512DA8</item>
<item name="colorAccent">#FF4081</item>
<item name="android:colorControlHighlight">#ff00ff</item>
<item name="android:windowBackground">@color/window_background</item>
</style></span>

Reveal effect（揭露效果）

使用ViewAnimationUtils.createCircularReveal()方法去创建一个RevealAnimator动画

该方法源码

public static Animator createCircularReveal(View view,
int centerX,  int centerY, float startRadius, float endRadius) {
return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
}

这五个参数分别是：

view 操作的视图

centerX 动画开始的中心点X

centerY 动画开始的中心点Y

startRadius 动画开始半径

endRadius 动画结束半径

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animator animator;
if (isFirst) {
animator = ViewAnimationUtils.createCircularReveal( //以图片中心为起始点，隐藏imageview
imageView,// 操作的视图
imageView.getWidth()/2,// 动画开始的中心点X
imageView.getHeight()/2,// 动画开始的中心点Y
imageView.getWidth(),// 动画开始半径
0);// 动画结束半径
} else {
animator = ViewAnimationUtils.createCircularReveal( //以（0,0）点为起始点，显示imageview
imageView,// 操作的视图
0,// 动画开始的中心点X
0,// 动画开始的中心点Y
0,// 动画开始半径
(float)Math.hypot(imageView.getWidth(),imageView.getHeight()));// 动画结束半径
}

animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(2000);
animator.start();
if (!isFirst) {
imageView.setVisibility(View.VISIBLE);
}
isFirst=!isFirst;

}
});

Activity transitions（Activity过渡效果）

Activity Transition提供了两种Transition类型：

Enter（进入）：进入一个Activity的效果

Exit（退出）：退出一个Activity的效果

而这每种类型又分为普通Transition和共享元素Transition，一个共享元素过渡(动画)决定两个activities之间的过渡，怎么共享(它们)的视图。

普通Transition：

explode：从场景的中心移入或移出

slide：从场景的边缘移入或移出

fade：调整透明度产生渐变效果

Shared Elements Transition 共享元素转换：

它的作用就是共享两个acitivity中共同的元素，在Android 5.0下支持如下效果：

changeBounds - 改变目标视图的布局边界

changeClipBounds - 裁剪目标视图边界

changeTransform - 改变目标视图的缩放比例和旋转角度

changeImageTransform - 改变目标图片的大小和缩放比例

自定义过渡动画

首先，如果要使用transition需要先修改style文件，在继承了material主题的style.xml中添加如下属性：

<style name="myTheme" parent="android:Theme.Material">
<!-- 允许使用transitions -->
<item name="android:windowContentTransitions">true</item>

<!-- 指定进入和退出transitions -->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>

<!-- 指定shared element transitions -->
<item name="android:windowSharedElementEnterTransition">
@transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
@transition/change_image_transform</item>
</style>

下面再来看看如何定义transition动画：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode/>
<changeBounds/>
<changeTransform/>
<changeClipBounds/>
<changeImageTransform/>
</transitionSet>

注：每个transition的xml中定义的就是一组change的元素

在代码中启用transitions：

// 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().setDuration(1000));

在代码中设置transitions的方法还有

Window.setEnterTransition()：普通transition的进入效果

Window.setExitTransition()：普通transition的退出效果

Window.setSharedElementEnterTransition()：共享元素transition的进入效果

Window.setSharedElementExitTransition()：共享元素transition的退出效果

要想尽快进行transitions过渡，可在Activity中调用Window.setAllowEnterTransitionOverlap()

注意：该设置一定要在setContentView之前调用

使用过渡启动Activity：

当你已经设置了允许使用Transition并设置了Transition动画，你就可以通过ActivityOptions.makeSceneTransitionAnimation()方法启动一个新的Activity来激活这个Transition：

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

当你在另一个Activity中设置了enter transtion，在其启动时，它将被激活。想要disable transitions，那么在启动另一个Activity时：

startActivity(intent,null); //传递null 的options bundle

启用共享元素Transition：

启动shared element transition和普通的transition稍有不同

在所有需要共享视图的Activity中，使用android:transitionName属性对于需要共享的元素分配一个通用的名字。

Intent intent = new Intent(this, Activity2.class);  
// shareView: 需要共享的视图  
// "shareName": 设置的android:transitionName="shareName"  
ActivityOptions options = ActivityOptions  
        .makeSceneTransitionAnimation(this, shareView, "shareName");  
startActivity(intent, options.toBundle());

如果有多个View需要共享，则通过Pair.create()方法创建多个匹配对然后传入ActivityOptions.makeSceneTransitionAnimation。代码如下：

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

当需要结束当前Activity并回退这个动画时调用Activity.finishAfterTransition()方法

Curved motion（曲线运动）

Material design中的动画依靠曲线，这个曲线适用于时间插值器和控件运动模式。

PathInterpolator类是一个基于贝塞尔曲线(Bézier curve)或路径(Path)对象上的新的插值器。

在materialdesign规范中，系统提供了三个基本的曲线：

@interpolator/fast_out_linear_in.xml

@interpolator/fast_out_slow_in.xml

@interpolator/linear_out_slow_in.xml

你可以传递一个PathInterpolator对象给Animator.setInterpolator()方法。

ObjectAnimator类有了新的构造方法，使你能够一次能同时使用两个或多个属性去绘制动画的路径。例如，下面的动画使用一个Path对象进行视图X和Y属性的动画绘制：

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