详解Android Material Design自定义动画的编写

概述新的动画Api，让你在UI控件里能创建触摸反馈，改变View的状态，切换activity的一系列自定义动画

新的动画API，让你在UI控件里能创建触摸反馈，改变VIEw的状态，切换activity的一系列自定义动画
具体有：

响应VIEw的touch事件的触摸反馈动画 隐藏和显示VIEw的循环展示动画 两个Activity间的切换动画 更自然的曲线运动的动画 使用VIEw的状态更改动画，能改变一个或多个VIEw的属性 在VIEw的状态更改时显示状态列表动画

这些new animations API，已内置在标准Widget中，如button。在自定义view时也可使用这些API

动画在Material设计中，为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性。Material主题为buttons和Activity的过渡提供了一些默认的动画，在androID5.0(API21)及以上，允许自定义这些动画：

touch Feedback  触摸反馈 Circular Reveal  循环显示 Activity Transitions  活动过渡 Curved motion       曲线运动 VIEw state changes  视图状态变化 Customize touch Feedback  自定义触摸反馈动画

在Material设计中，触摸反馈提供了一种在用户与UI进行交互时 即时可视化的确认接触点。关于buttons默认的触摸反馈动画，使用了rippledrawable类，用一个波纹(涟漪)效果在两种不同的状态间过渡。

在多数情况下，你需要在vIEw的xml定义中，定义它的背景：

androID:attr/selectableItemBackground                              有界限的波纹    androID:attr/selectableItemBackgroundborderless             延伸到vIEw之外的波纹     note：该属性为API21添加

或者，你可以用xml定义一个rippledrawable类型的资源，并使用波纹属性。

你可以指定一个颜色给rippledrawable对象，以改变它的默认触摸反馈颜色，使用主题的androID:colorControlHighlight属性。
Use the Reveal Effect  使用展现效果
VIEwAnimationUtils.createCircularReveal()方法使您能够激活一个循环显示或隐藏一个视图。
显示：

// prevIoUsly invisible vIEwVIEw myVIEw = findVIEwByID(R.ID.my_vIEw);// get the center for the clipPing circleint cx = (myVIEw.getleft() + myVIEw.getRight()) / 2;int cy = (myVIEw.gettop() + myVIEw.getBottom()) / 2;// get the final radius for the clipPing circleint finalRadius = myVIEw.getWIDth();// create and start the animator for this vIEw// (the start radius is zero)Animator anim =  VIEwAnimationUtils.createCircularReveal(myVIEw,cx,cy,finalRadius);anim.start();隐藏// prevIoUsly visible vIEwfinal VIEw myVIEw = findVIEwByID(R.ID.my_vIEw);// get the center for the clipPing circleint cx = (myVIEw.getleft() + myVIEw.getRight()) / 2;int cy = (myVIEw.gettop() + myVIEw.getBottom()) / 2;// get the initial radius for the clipPing circleint initialRadius = myVIEw.getWIDth();// create the animation (the final radius is zero)Animator anim =  VIEwAnimationUtils.createCircularReveal(myVIEw,initialRadius,0);// make the vIEw invisible when the animation is doneanim.addListener(new AnimatorListenerAdapter() {  @OverrIDe  public voID onAnimationEnd(Animator animation) {    super.onAnimationEnd(animation);    myVIEw.setVisibility(VIEw.INVISIBLE);  }});// start the animationanim.start();

Customize Activity Transitions  定义Activity的过渡动画

一个enter Transition表示，Activity的进入场景。比如一个explode enter Transition，表示VIEws的进入场景：飞快的从外部向屏幕中心移动。 一个exit Transition表示，Activity的离开场景。比如一个explode exit Transition，表示VIEws的离开场景：从屏幕中心散开。 一个share Transition表示，在两个Activity间共享它们的activity transtion。比如，两个Activity有一个相同的图片，而位置和尺寸不同，使用changeImagetransform这个共享元素，能在Activity间平稳的转换和缩放图片。

androID5.0(API21)及以上，支持这些效果的Transition(过渡)：

爆炸――移动视图或从场景中心。class Explode 滑行――移动视图或从一个场景的边缘。class SlIDe 淡入淡出――添加或从场景中删除视图通过改变其透明度。 class Fade

也支持这些共享元素(都有对应的class)转换:

　　changeBounds ――VIEw的布局的边界变化。 　　changeClipBounds――VIEw的裁剪边界变化。 　　changetransform――VIEw的旋转、缩放边界变化 　　changeImagetransform――目标图像的尺寸和缩放变化。

　　当启用活动在你的应用程序转换,默认同时淡出淡入之间的过渡是激活进入和退出活动。

Specify custom Transitions 自定义过渡动画
首先需要在定义主题的style中，使用androID:windowContentTransitions属性，声明使用Transitions。也可以定义使用的Transitions：

<?xml version="1.0" enCoding="utf-8"?> <resources>   <style name="Mytheme" parent="@androID:style/theme.Material">     <!-- enable window content Transitions -->     <item name="androID:windowContentTransitions">true</item>     <!-- specify enter and exit Transitions -->     <item name="androID:windowEnterTransition">@androID:Transition/explode</item>     <item name="androID:windowExitTransition">@androID:Transition/explode</item>     <!-- specify shared element Transitions -->     <item name="androID:windowsharedElementEnterTransition">@androID:Transition/move</item>     <item name="androID:windowsharedElementExitTransition">@androID:Transition/slIDe_top</item>   </style> </resources> 

注：每个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 Transitiongetwindow().setExitTransition(new Explode());在代码中设置Transitions的方法还有Window.setEnterTransition()Window.setExitTransition()Window.setSharedElementEnterTransition()Window.setSharedElementExitTransition()

要想尽快进行Transitions过渡，可在Activity中调用Window.setAllowEnterTransitionOverlap()。
Start an activity using Transitions 使用过渡启动Activity
如果你要启用transtions并设置为一个Activity的结束exit transtion，当你以如下方式启动另一个Activity时，它将被激活：

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

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

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

Start an activity with a shared element  使用一个共享元素启动Acitvity

1.在主题中启用window content
2.在style中定义共享的过渡Transitions
3.定义Transitions的xml资源  res/Transition
4.在layout中调用androID:Transitionname="" 设置第3步中定义的名字
5.调用 ActivityOptions.makeSceneTransitionAnimation()生成相应的ActivityOptions对象。

// get the element that receives the click eventfinal VIEw imgContainerVIEw = findVIEwByID(R.ID.img_container);// get the common element for the Transition in this activityfinal VIEw androIDRobotVIEw = findVIEwByID(R.ID.image_small);// define a click ListenerimgContainerVIEw.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.finishAfterTransition()方法,而不是Activity.finish()。
Start an activity with multiple shared elements  用多共享元素启动Activity
若两个Activity拥有不只一个的共享元素，要在它们之间开始场景Transition动画，在它们的layout中都要使用 androID:Transitionname (或在Activity中代码中调用VIEw.setTransitionname() )来定义，并创建一个如下的 ActivityOptions 对象：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,Pair.create(vIEw1,"agreedname1"),Pair.create(vIEw2,"agreedname2"));

Use 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();

Animate 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定义动态的矢量图：

使用<vector>元素的矢量图，在res/drawable/ 一个动态矢量图，使用<animated-vector>元素，在res/drawable/ 一个或多个object animator，使用<objectAnimator>元素，在res/animator/

矢量图可以定义的属性元素有<group>和<path>，<group>定义了一个<path>的集合，或者子<group>，<path>定义绘制的路径。

定义矢量图时，可以给<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>

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

<!-- 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,0  -70,70z"    androID:valueto="M300,0 0,140 -70,0 z"    androID:valueType="pathType" /></set>

   
  

总结

以上是内存溢出为你收集整理的详解Android Material Design自定义动画的编写全部内容，希望文章能够帮你解决详解Android Material Design自定义动画的编写所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。