Android:Material Design(三) 动画

最新推荐文章于 2023-03-05 14:02:07 发布

BAOLIANG196

最新推荐文章于 2023-03-05 14:02:07 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 动画

本文链接：https://blog.youkuaiyun.com/wangyanguiyiyang/article/details/48917915

Android 专栏收录该内容

95 篇文章

订阅专栏

本文详细介绍了Android L中Material Design引入的动画特性，包括触摸反馈、揭露效果、Activity转换效果、曲线运动、视图状态改变和可绘矢量动画。通过代码示例展示了如何实现波纹效果、圆形揭露动画、Activity转换动画以及如何使用StateListAnimator和AnimatedVectorDrawable。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android:Material Design(一) 概述
 Android:Material Design(二) Material主题
 Android:Material Design(三) 动画
 Android:Material Design(四) UI控件
 Android:Material Design(五) 视图和阴影
 Android:Material Design(六) 使用Drawable
Android:Material Design(七) 兼容性

Material Design包含了很多内容，今天跟大家分享一下Material新增的动画：
在Android L中新增了如下几种动画：

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

接下来我们一一讲解

Touch feedback（触摸反馈）

在Android 5.0中加入了触摸反馈动画。其中最明显，最具代表性的就是波纹动画，比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。关于buttons默认的触摸反馈动画，使用了RippleDrawable类，用一个波纹(涟漪)效果在两种不同的状态间过渡。
波纹效果（Ripple）：
当你使用了Material主题后，波纹动画会自动应用在所有的控件上，我们当然可以来设置其属性来调整到我们需要的效果。
在xml里可以通过如下代码设置波纹的背景：

?android:attr/selectableItemBackground //有界限的波纹                                 
?android:attr/selectableItemBackgroundBorderless  //波纹超出边界

设置颜色
我们也可以通过设置xml属性来调节动画颜色，从而可以适应不同的主题：
android:colorControlHighlight：设置波纹颜色
android:colorAccent：设置checkbox等控件的选中颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material">    
        <item name="android:colorControlHighlight">#00ff00</item>
    </style>
</resources>

使用效果
B1是不设任何背景的按钮
B2设置了?android:attr/selectableItemBackground
B3设置了?android:attr/selectableItemBackgroundBorderless
这里写图片描述

设置checkbox等控件的选中颜色为红色

<item name="android:colorAccent" >#ff0000</item>

这里写图片描述

Reveal effect（揭露效果）

Circular Reveal是Android L新增的一个动画效果。
使用方法
应用ViewAnimationUtils.createCircularReveal()方法可以去创建一个RevealAnimator动画ViewAnimationUtils.createCircularReveal源码如下：

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

源码非常简单，就是通过createCircularReveal方法根据5个参数来创建一个RevealAnimator动画对象。这5个参数分别是：
1. view 操作的视图
2. centerX 动画开始的中心点X
3. centerY 动画开始的中心点Y
4. startRadius 动画开始半径
5. startRadius 动画结束半径
根据下面的效果图和代码可以很容易的了解这几个参数的作用：

final View oval = this.findViewById(R.id.oval);  
oval.setOnClickListener(new View.OnClickListener() {  
    @Override  
    public void onClick(View v) {  
        Animator animator = ViewAnimationUtils.createCircularReveal(  
                oval,  
                oval.getWidth()/2,  
                oval.getHeight()/2,  
                oval.getWidth(),  
                0);  
        animator.setInterpolator(new AccelerateDecelerateInterpolator());  
        animator.setDuration(2000);  
        animator.start();  
    }  
});  

final View rect = this.findViewById(R.id.rect);  

rect.setOnClickListener(new View.OnClickListener() {  
    @Override  
    public void onClick(View v) {  
        Animator animator = ViewAnimationUtils.createCircularReveal(  
                rect,  
                0,  
                0,  
                0,  
                (float) Math.hypot(rect.getWidth(), rect.getHeight()));  
        animator.setInterpolator(new AccelerateInterpolator());  
        animator.setDuration(2000);  
        animator.start();  
    }  
});

这里写图片描述
总结
RevealAnimator和之前的动画使用没什么区别，同样可以设置监听器和加速器来实现各种各样的特效。这些效果常用在视图的添加，删除，状态，大小改变的时候。

Activity transitions（Activity转换效果）

Activity Transition是Material Design中提供的一种动画效果。它通过运动和切换不同状态之间的元素来产生各种动画效果。

简介

Activity Transition提供了两种Transition类型：
Enter（进入）：进入一个Activity的效果
Exit（退出）：退出一个Activity的效果
而这每种类型又分为普通和共享元素Transition。

普通Transition

explode：从场景的中心移入或移出
slide：从场景的边缘移入或移出
fade：调整透明度产生渐变效果

Shared Elements Transition 共享元素转换

它的作用就是共享两个acitivity中共同的元素，在Android 5.0下支持如下效果：
1. changeBounds - 改变目标视图的布局边界
2. changeClipBounds - 裁剪目标视图边界
3. changeTransform - 改变目标视图的缩放比例和旋转角度
4. changeImageTransform - 改变目标图片的大小和缩放比例

Activity Transition使用

使用Activity Transition十分简单，只需要如下两个步骤：

步骤一：设置允许使用transition，并且设置transition

xml方式：
首先，如果要使用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里面的元素就是之前介绍过的，使用方法和以前的AnimationSet差不多，具体如何使用大家可以参考官方文档。

代码方式：
在代码中同样可以完成对于transition的设置：
// 允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// 设置一个exit transition
getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());

可以通过如下方法在代码总设置transition效果：
Window.setEnterTransition()：普通transition的进入效果
Window.setExitTransition()：普通transition的退出效果
Window.setSharedElementEnterTransition()：共享元素transition的进入效果
Window.setSharedElementExitTransition()：共享元素transition的退出效果

步骤二：启动Activity

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

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

启用共享元素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"));

如果不想使用transition可以设置options bundle为null。
当需要结束当前Activity并回退这个动画时调用Activity.finishAfterTransition()方法

效果展示

ActivityTransition源代码下载（Android Studio）
这里写图片描述

Curved motion（曲线运动）

在Material设计中的动画，依赖于曲线的时间插入值和空间运动模式。在android5.0(api21)及以上，可以自定义动画时间曲线和曲线运动模式。
PathInterpolator类是一个新的基于贝塞尔曲线或路径对象的插入器。这个插入器指定了一个1 x1正方形运动曲线，它使用(0,0)为锚点，(1,1)为控制点，作为构造函数的参数。你也可以定义一个path interpolator的xml资源：

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

系统提供了三种基本的曲线，XML资源：

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

您可以用PathInterpolator对象作Animator.setInterpolator()方法的参数。
ObjectAnimator类有新构造函数使您能够激活坐标沿着一个path同时使用两种或两种以上的属性。比如，如下的animator就使用了一个path 对象，来同时操作View的x和y属性：

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

View state changes （视图状态改变）

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>

在上例中，为一个View添加视图状态动画，定义了一个使用selector元素的xml资源，并赋给view的android:stateListAnimator属性。如要在代码中为View指定视图状态动画，可使用AnimationInflater.loadStateListAnimator()加载xml资源，并使用View.setStateListAnimator()将其指定给View。
当你的主题继承了Material主题，按钮默认拥有了z动画。为了避免这种行为在你的按钮，设置android:stateListAnimator属性值为null。
AnimatedStateListDrawable类允许您创建图片以显示关联View的状态改变动画。一些系统的Widget，在5.0上默认使用这些动画。下面的例子显示了如何定义一个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>

Animate Vector Drawables（可绘矢量动画）

矢量图片是可伸缩而不失真的。AnimatedVectorDrawable类让你能使一个矢量图动起来。
通常在三种xml定义动态的矢量图：
·使用元素的矢量图，在res/drawable/
·一个动态矢量图，使用元素，在res/drawable/
·一个或多个object animator，使用元素，在res/animator/
矢量图可以定义的属性元素有和，定义了一个的集合，或者子，定义绘制的路径。
定义矢量图时，可以给和指定一个名字，示例如下：

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

在矢量动画中，引用矢量图定义的名字：

<!-- res/drawable/animvectordrawable.xml -->
<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 or AnimatorSet 对象：动作为旋转360度

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

下面的例子表示矢量图path从一个图形到另一个。两种渐变路径必须一致:他们必须具有相同数量的命令和相同数量的每个命令的参数：

<!-- res/anim/path_morph.xml -->
<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>