创建Material Design风格的Android应用--使用自定义动画

摘要

动画在Material Design设计中给用户反馈放用户点击时，并且在程序用户界面中提供连贯的视觉。Material主题为按钮（Button）和activity的转换提供了一些默认的动画，在android5.0（api 21）和更高的版本，你可以自定义这些动画和创建一个新动画,本文介绍如何使用和自定义动画。
android Material Design animation java

动画在Material Design设计中给用户反馈放用户点击时，并且在程序用户界面中提供连贯的视觉。Material主题为按钮（Button）和activity的转换提供了一些默认的动画，在android5.0（api 21）和更高的版本，你可以自定义这些动画和创建一个新动画：

  1. Touch feedback（触摸反馈）
  2. Circular Reveal（循环揭露效果）
  3. Activity transitions（Activity转换效果）
  4. Curved motion（曲线运动）
  5. View state changes （视图状态改变）

自定义触摸反馈

触摸反馈在Material Design中在触摸点提供了一个即时视觉确认当用户作用在UI元素。按钮的默认触摸反馈动画是使用了新的RippleDrawable类，它会是波纹效果在不同状态间变换。

大多数情况下，我们可以使用这个功能通过在xml文件中定义背景：

?android:attr/selectableItemBackground 有界限的波纹
?android:attr/selectableItemBackgroundBorderless 可以超出视图区域的波纹
?android:attr/selectableItemBackgroundBorderless 是21新添加的api

另外，还以使用ripple元素定义RippleDrawable作为一个xml资源。

你可以给RippleDrawable对象分配一个颜色。使用主题的android:colorControlHighlight属性可以改变默认的触摸反馈颜色。

更多信息，查看RippleDrawable类的api指南。

使用揭露效果

揭露动画为用户提供视觉上的持续性挡显示或者隐藏一组界面元素。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 = Math.max(myView.getWidth(), myView.getHeight());

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

// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
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)
Animator 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转换效果

activity间转换在Material Design程序中提供不同状态间的视觉连接通过在公用元素上动作或者转换。你可以为进入或退出的转换自定义动画，共享元素在不同的activity之间的转换效果。
进入过渡决定activity中的视图怎样进入场景。比如在爆裂进入过渡效果中，视图从屏幕外面飞向屏幕中间进入场景。

退出过渡决定activity中的视图怎样退出场景。比如，在爆裂退出过渡效果中，视图从中间向远处退出场景。
共享元素过渡决定两个activity之间共享的视图怎么在两个activity之间过渡。比如，两个activity有一个相同的图片，在不同的位置和不同的大小，changeImageTransform(图片变换变化)让共享元素平滑的平移和缩放图片在两个activity之间。

android 5.0(api 21)提供以下进入和退出效果：

  • explode(爆裂) - 从场景中间移动视图进入或者退出
  • slide(滑动) - 视图从场景的一个边缘进入或者退出
  • fade(淡入淡出) - 从场景添加或者移除一个视图通过改变他的透明
    所有过渡效果都继承Visibility类，因此支持作为一个进入或者退出过渡效果。

更多细节，看Transition类的api指南。

Android5.0(api 21)也支持共享元素过渡效果：

  • changeBounds - 改变目标视图的布局边界
  • changeClipBounds - 裁剪目标视图边界
  • changeTransform - 改变目标视图的缩放比例和旋转角度
  • changeImageTransform - 改变目标图片的大小和缩放比例
    当你在程序中开启activity间的过渡动画时，默认的交叉淡入淡出效果会在两个activity之间激活。

一个共享元素过渡效果

指定过渡效果

首先，使用在从material theme继承的样式中，使用android:windowContentTransitions属性开启窗口内内容过渡效果。也可以在样式定义中第一进入，退出，共享元素的效果：

<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/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>```

示例中的过渡change_image_transform定义如下：



<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>```

changeImageTransform元素对应ChangeImageTransform类。更多信息，查看Transition的api指南。

在代码中启用窗口内容过渡效果，使用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()方法为调用的activity定义退出过渡效果，setEnterTransition()和setSharedElementEnterTransition()方法为调用的activity定义进入过渡效果。

为了达到完整的过渡效果，必须在进入的和退出的两个activity上都启用window内容过渡。否则，正调用的activity会开始退出过渡，你就会看到窗口过渡效果（比如缩放，或者淡出）。

更快的开始一个进入过渡，使用Window.setAllowEnterTransitionOverlap()方法在被调用的activity。这让你有更加激动人心的进入过渡效果。

#####打开activity使用过渡
如果你为一个activity开启过渡并且设置了一个退出过渡效果，过渡效果会在你打开其他activity的时候激活，像这样：

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

如果你给第二个activity设置了进入过渡动画，过渡也会在第二个activity启动的时候激活。当你启动其他的activity时，如果需要禁用过渡效果，提供一个为null的bundle选项。

打开一个activity包含一个共享元素

使用一个场景过渡动画在两个activity之间包括一个共享元素：

  1. 在theme中开启窗口内容过渡效果
  2. 在style中指定一个共享元素过渡效果
  3. 在xml中定义过渡样式
  4. 在两个activity的样式文件中给共享元素分配一个相同的名字使用android:transitionName属性
  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:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});```

对于在代码中生成的动态共享视图，使用`View.setTransitionName()方法在两个activity中给指定相同的名字。
当完成第二个activity的时候，如果需要逆转该过渡动画，使用Activity.finishAfterTransition()方法代替Activity.finish()

#####打开一个activity包含多个共享元素
使用一个场景过渡动画在两个activity之间包括多于一个共享元素，在两个activity中定义所有的的共享元素使用android:transitionName属性（或使用View.setTransitionName()方法在所有的activity中）,并且创建一个像下面这样的ActivityOptions对象：

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

使用曲线运动

Material Design中，动画依赖时间插值和空间移动模式曲线。在android5.0(api 21)和更高版本，你可以为动画自定义时间曲线和移动曲线。

PathInterpolator类是一个新的基于贝塞尔曲线或Path对象的插值器。这个插值器在1*1的正方形上定义了曲线运动，以（0，0）和（1，1）点作为锚点，根据够照参数控制点。你也可以使用xml文件的定义一个路径插值器，如：

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

Material Design设计规范中，系统提供了三个基本曲线的xml资源:

* @interpolator/fast_out_linear_in.xml 
* @interpolator/fast_out_slow_in.xml 
* @interpolator/linear_out_slow_in.xml 

我们可以给Animator.setInterpolator()传一个PathInterpolator对象来设置。

ObjectAnimator类有新的构造方法，你可以一次使用两个或者属性使用path独立于坐标动画。比如，下面的动画使用一个Path对象去动作一个视图的x和y属性：

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

视图状态改变动画

StateListAnimator定义动画当视图的状态改变的时候运行，下面的例子是怎么在xml中定义一个StateListAnimator动画：

<!-- 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="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        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="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>```

给视图附加自定义的视图状态动画，使用selector元素在xml文件中定义一个动画祥例子中这样，给视图分配动画使用android:stateListAnimator属性。在代码中使用，使用AnimationInflater.loadStateListAnimator()方法，并且使用View.setStateListAnimator()方法。

当你的主题是继承的Material主题，按钮默认有一个Z动画。如果需要避免这个动画，设置android:stateListAnimator属性为@null 即可。

AnimatedStateListDrawable类让你创建可绘制图在相关联的视图状态改变。android5.0的一些系统组件默认使用这些动画。下面的例子是如何在xml文件中定义一个AnimatedStateListDrawable:


<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>```

可绘矢量动画

可绘制矢量图在拉伸时不会失真。AnimatedVectorDrawable类让你可以在可绘制矢量图上面作用动画。

通常需要在三个xml文件中定义可动的矢量图：

一个矢量图使用<vector>元素,放在res/drawable/下。
一个可动的矢量图使用<animated-vector>元素，放在res/drawable/下。
一个或更多个动画对象使用<objectAnimator>元素，放在res/anim/下。

可动矢量图可以使用<group>和<path>元素。<group>元素定义一系列路径或者子组，<path>元素定义可绘图的路径。

当你定义了一个想要作用动画的矢量可绘制图，使用android:name属性给每个group和path指定一个唯一的名字，这样你可以从动画的定义中找到他们。比如：

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>```

可动的矢量绘制通过刚刚说到定义的名字，来找到这些path和group：


<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@anim/rotation" />
<target
android:name="v"
android:animation="@anim/path_morph" />
</animated-vector>```

动画的定义表现在ObjectAnimator和AnimatorSet对象中。第一个动画在这个例子中是让目标组旋转360度：

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />```

第二个动画例子是把矢量可绘图从一个形状变成另一种。所有的路径必须兼容变换：他们必须有相同数量的命令，每个命令要有相同的参数。


<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>```

更多的信息，看AnimatedVectorDrawable的api指南。

PS后记

这个系列终于写完了，说实话基本上大部分都是翻译的谷歌的官方文档。因为时间问题，再加上自己的英语够烂，最近越来慢。不过，这样一下来，加上自己的一些代码练习，对于Material设计算是能够基本使用了。可惜，大部分的style还都不能向下兼容，只好等５了。

网上有一些大神进来已经开源了一些开源组件，大家可以借此曲线救国，下次有空在专门整理一下。

本文参考： http://developer.android.com/training/material/animations.html
原文地址：http://blog.isming.me/2014/11/13/creating-app-with-material-design-five-animations/，转载请注明出处。
原文地址：http://my.oschina.net/sammy1990/blog/344184，转载请注明出处。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,835评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,598评论 1赞 295
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,569评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,159评论 0赞 213
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,533评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,710评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,923评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,674评论 0赞 203
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,421评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,428评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,114评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2赞 271

推荐阅读更多精彩内容