Android 5.0自定义动画

材料设计中的动画对用户的操作给予了反馈,并且在与应用交互时提供了持续的可见性。材料主题提供了一些按钮动画和活动过渡,Android 5.0允许你自定义动画并且可以创建新的动画:

    Touch Feedback
    Circular Reveal
    Activity Transitions
    Curved Motion
    View State Changes

自定义触摸反馈

在用户与UI元素交互时,从接触的角度来看,材料设计中的触摸反馈提供了瞬间的视觉确认。按钮的默认触摸动画使用了新的RippleDrawable类,使得按钮采用涟漪效果在不同的状态之间过渡。

在大多数情况下,你应该像下面那样在xml中通过设置视图背景来应用这个功能:

  • ?android:attr/selectableItemBackground用于有界涟漪效果。
  • ?android:attr/selectableItemBackgroundBorderless用于拓展到视图外面的涟漪效果。这个效果将被绘制并局限于此视图具有非空背景的最近的你控件中。

注意:selectableItemBackgroundBorderless是API 21中的新属性。

另外,你也可以通过使用ripple元素的xml资源来定义RippleDrawable

你可能给RippleDrawable对象布置颜色。要想改变默认的触摸反馈颜色,得使用该主题的android:colorControlHighlight属性。

使用揭露效果

在你想要显示或者隐藏一组UI元素时,揭露动画向用户提供了持续地可见性。ViewAnimationUtils.createCircularReveal()方法使你在揭露或隐藏视图时产生一个裁剪圈似的动画。

使用如下效果来揭露之前不可见的视图:

 1 // previously invisible view
 2 View myView = findViewById(R.id.my_view);
 3 // get the center for the clipping circle
 4 int cx = (myView.getLeft() + myView.getRight()) / 2;
 5 int cy = (myView.getTop() + myView.getBottom()) / 2;
 6 // get the final radius for the clipping circle
 7 int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
 8 // create the animator for this view (the start radius is zero)
 9 Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
10 // make the view visible and start the animation
11 myView.setVisibility(View.VISIBLE);
12 anim.start();

使用如下效果来隐藏之前可见的视图:

 1 // previously visible view
 2 final View myView = findViewById(R.id.my_view);
 3 // get the center for the clipping circle
 4 int cx = (myView.getLeft() + myView.getRight()) / 2;
 5 int cy = (myView.getTop() + myView.getBottom()) / 2;
 6 // get the initial radius for the clipping circle
 7 int initialRadius = myView.getWidth();
 8 // create the animation (the final radius is zero)
 9 Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
10 // make the view invisible when the animation is done
11 anim.addListener(new AnimatorListenerAdapter() {
12     @Override
13     public void onAnimationEnd(Animator animation) {
14         super.onAnimationEnd(animation);
15         myView.setVisibility(View.INVISIBLE);
16     }
17 });
18 // start the animation
19 anim.start();

自定义Activity过渡效果

符合材料设计的应用中的Activity过渡效果,在不同状态之间,通过常用元素之间的动作和转换,提供了视觉连接。你可以为Activity之间出入过渡和共享元素过渡效果指定自定义动画。

进入过渡效果决定了activity中的视图组是如何进入屏幕的。例如,在explode进入过渡效果中,视图从外面进入屏幕,并飞入屏幕中心。

退出过渡效果决定了activity中的视图组是如何退出屏幕的。例如,在explode退出过渡效果中,视图是从中心位置退出屏幕的。

共享元素过渡效果决定了两个activity之间共享的视图在这些activity之间是如何过渡的。例如,如果两个activity拥有不同的位置和尺寸的相同的图片,共享元素的changeImageTransform过渡效果将在这些activity之间顺滑地平移和缩放这些图片。

Android 5.0(API 21)支持这些出入过渡效果:

  • explode—从屏幕中心位置移入移出视图;
  • slide—从屏幕地边缘位置移入移出视图;
  • fade—通过改变视图的透明度从屏幕中添加或删除视图;

任何继承了Visibility类的过渡效果都可以作为出入过渡效果。

Android 5.0(API 21)支持这些共享元素过渡效果:

  • changeBounds—使目标视图的布局边缘变化生成动画效果;
  • changeClipBounds—使目标视图的剪裁边缘变化生成动画效果;
  • changeTransform—使目标视图的缩放和旋转变化生成动画效果;
  • changeImageTransform—使目标视图的尺寸和缩放变化生成动画效果;

当你在应用中使用activity过渡效果时,在Activity的进入和退出之间默认的交错退色效果被激活。

指定自定义过渡效果

首先,在你定义一个继承自材料主题的风格时,通过android:windowContentTransitions属性激活窗口内容过渡效果。你也可以在风格定义中指定出入和共享元素过渡效果:

 1 <style name="BaseAppTheme" parent="android:Theme.Material">
 2   <!-- enable window content transitions -->
 3   <item name="android:windowContentTransitions">true</item>
 4
 5   <!-- specify enter and exit transitions -->
 6   <item name="android:windowEnterTransition">@transition/explode</item>
 7   <item name="android:windowExitTransition">@transition/explode</item>
 8
 9   <!-- specify shared element transitions -->
10   <item name="android:windowSharedElementEnterTransition">
11     @transition/change_image_transform</item>
12   <item name="android:windowSharedElementExitTransition">
13     @transition/change_image_transform</item>
14 </style>

这个例子子中的change_image_transform过渡效果定义如下:

1 <!-- res/transition/change_image_transform.xml -->
2 <!-- (see also Shared Transitions below) -->
3 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
4   <changeImageTransform/>
5 </transitionSet>

changeImageTransform元素对应于ChangeImageTransform类。

要想激活代码中的窗口内容过渡效果,得调用Window.requestFeature()方法:

1 // inside your activity (if you did not enable transitions in your theme)
2 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
3 // set an exit transition
4 getWindow().setExitTransition(new Explode());

要在代码中指定过渡效果,调用这些方法使用Transition类:

1 Window.setEnterTransition();Window.setExitTransition();Window.setSharedElementEnterTransition();Window.setSharedElementExitTransition();

方法setEnterTransition()setSharedElementExitTransition()给调用者Acivity定义了退出过渡效果,而方法setEnterTransition()setSharedElementEnterTransition()为被调用者定义了进入过渡效果。

为了获取过渡的全部效果,你必须激活调用和被调用Activity的窗口内容过渡效果。否则的话,否则的话,调用者Activity将会启动退出过渡效果,但是你会看到这个窗口过渡效果的(例如缩放或者褪色)。

为了尽可能早的启动进入过渡效果,得在被调用Activity中使用Window.setAllowEnterTransitionOverlap()。这将使你拥有更多戏剧般美妙的进入过渡效果。

启动使用过渡效果的Activity

如果你对Activity启动并设置了退出过渡效果,过渡效果将如下所示一样,在你启动另外一个Activity时被激活:
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
如果你对第二个Activity设置了进入过渡效果,这个过渡效果将会在该Activity启动时被激活。要想在启动另外一个Activity时取消过渡效果,你需要提供null的候选Bundle

启动拥有共享元素的Activity

为了在拥有共享元素的两个Activity之间的过渡产生动画效果:

    1,主题中支持窗口内容过渡效果。
    2,风格中指定共享元素过渡效果。
    3,在xml中定义过渡效果。
    4,在包含属性的两个布局文件中,给共享元素分配相同的名字。
    5,使用ActivityOptions.makeSceneTransitionAnimation() 方法。

 1 // get the element that receives the click event
 2 final View imgContainerView = findViewById(R.id.img_container);
 3 // get the common element for the transition in this activity
 4 final View androidRobotView = findViewById(R.id.image_small);
 5 // define a click listener
 6 imgContainerView.setOnClickListener(new View.OnClickListener() {
 7     @Override
 8     public void onClick(View view) {
 9         Intent intent = new Intent(this, Activity2.class);
10         // create the transition animation - the images in the layouts
11         // of both activities are defined with android:transitionName="robot"
12         ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, androidRobotView, "robot");
13         // start the new activity
14         startActivity(intent, options.toBundle());
15     }
16 });

对于代码中生成的动态共享视图而言,要在两个Activity中使用View.setTransitionName()方法指定共同的元素名字。

为了结束掉第二个Activity时逆转屏幕过渡效果动画,要调用Activity.finishAfterTransition()方法而非Activity.finish()

启动拥有多个共享元素的Activity

要使拥有多于一个共享元素的两个Activity的屏幕过渡产生动画效果,要在拥有android:transitionName属性(或者在两个Activity中使用View.setTransitionName()方法)的两个布局文件中定义共享元素,并且要按照如下所示创建ActivityOptions对象:

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

使用弧形运动

材料设计中的动画依赖于实现了时间加速和空间运动的弧形。Android 5.0(API 21)以上,你可以给动画自定义计时弧形和弧形运动模式。

PathInterpolator类是新的基于贝赛尔曲线或者Path类的加速器。这个加速器详细说明了在1x1方格中的动作曲线,它的锚头指在(0, 0)(1, 1)之间,并且控制点使用了构造函数中声明的值。你也可以在xml文件中定义路径加速器:

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

系统为材料设计中的三个基础弧线提供了xml资源:

1 @interpolator/fast_out_linear_in.xml
2 @interpolator/fast_out_slow_in.xml
3 @interpolator/linear_out_slow_in.xml

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

ObjectAnimator对象拥有新的构造器,使得你能够坐标沿着一个一次使用两个或者多个属性的路径。例如,下面的动画使用了Path对象使得视图的XY属性产生动画效果:

1 ObjectAnimator mAnimator;
2 mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
3 ...
4 mAnimator.start();

将视图的状态变化产生动画效果

StateListAnimator对象让你定义在视图状态变化时运行的动画。下面的例子向你展示如何将StateListAnimator定义成xml资源:

 1 <!-- animate the translationZ property of a view when pressed -->
 2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 3   <item android:state_pressed="true">
 4     <set>
 5       <objectAnimator android:propertyName="translationZ"
 6         android:duration="@android:integer/config_shortAnimTime"
 7         android:valueTo="2dp"
 8         android:valueType="floatType"/>
 9         <!-- you could have other objectAnimator elements
10              here for "x" and "y", or other properties -->
11     </set>
12   </item>
13   <item android:state_enabled="true"
14     android:state_pressed="false"
15     android:state_focused="true">
16     <set>
17       <objectAnimator android:propertyName="translationZ"
18         android:duration="100"
19         android:valueTo="0"
20         android:valueType="floatType"/>
21     </set>
22   </item>
23 </selector>

要将自定义的视图状态动画添加到视图上,要像上述例子一样,将一个动画使用xml资源文件中的selector元素定义出来,而且把它通过android:stateListAnimator属性分配到你的视图上。要在代码中把状态列表动画分配到视图中,要使用AnimationInflater.loadStateListAnimator()方法,并且使用View.setStateListAnimator()方法把动画分配到你的视图中。

当你的主题继承自材料主题时,按钮在默认情况下有Z动画。要在你的按钮中避免这种行为,需要把android:stateListAnimator属性设置成@null

AnimatorStateListDrawable类让你创建相关联状态变化时展示动画的drawableAndroid 5.0中的某些系统控件默认使用这些动画。下面的例子展示了如何使用xml资源定义AnimatedStateListDrawable类:

 1 <!-- res/drawable/myanimstatedrawable.xml -->
 2 <animated-selector
 3     xmlns:android="http://schemas.android.com/apk/res/android">
 4
 5     <!-- provide a different drawable for each state-->
 6     <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
 7         android:state_pressed="true"/>
 8     <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
 9         android:state_focused="true"/>
10     <item android:id="@id/default"
11         android:drawable="@drawable/drawableD"/>
12
13     <!-- specify a transition -->
14     <transition android:fromId="@+id/default" android:toId="@+id/pressed">
15         <animation-list>
16             <item android:duration="15" android:drawable="@drawable/dt1"/>
17             <item android:duration="15" android:drawable="@drawable/dt2"/>
18             ...
19         </animation-list>
20     </transition>
21     ...
22 </animated-selector>

 

使矢量Drawable产生动画

矢量图可缩放但却不损失精度。AnimatedVectorDrawable类让你将矢量图的属性产生动画。

你通常情况下在下面三个xml文件中定义动画矢量图:

  • 在res/drawable/目录下定义拥有元素的矢量图;
  • 在res/drawable/目录下定义拥有元素的可动画矢量图;
  • 在res/anim/目录下定义拥有元素的一个或者多个对象动画。

可动画矢量图能够将 等元素的属性产生动画。元素定义了一系列的pathgroup,而 元素定义了要被绘制的path

当你定义想要产生动画的矢量图时,要使用android:name属性对grouppath分配唯一的名字。由此,你可以用从你的动画定义中引用它们,例如:

 1 !-- res/drawable/vectordrawable.xml -->
 2 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:height="64dp"
 4     android:width="64dp"
 5     android:viewportHeight="600"
 6     android:viewportWidth="600">
 7     <group
 8         android:name="rotationGroup"
 9         android:pivotX="300.0"
10         android:pivotY="300.0"
11         android:rotation="45.0" >
12         <path
13             android:name="v"
14             android:fillColor="#000000"
15             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
16     </group>
17 </vector>

可动画矢量图定义通过他们的名字引用了grouppath

 1 <!-- res/drawable/animvectordrawable.xml -->
 2 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
 3   android:drawable="@drawable/vectordrawable" >
 4     <target
 5         android:name="rotationGroup"
 6         android:animation="@anim/rotation" />
 7     <target
 8         android:name="v"
 9         android:animation="@anim/path_morph" />
10 </animated-vector>

这些动画定义表示ObjectAnimatorAnimatorSet对象。这个例子中的第一个动画器将目标group旋转了360度:

1 <!-- res/anim/rotation.xml -->
2 <objectAnimator
3     android:duration="6000"
4     android:propertyName="rotation"
5     android:valueFrom="0"
6     android:valueTo="360" />

例子中的第二个动画器使矢量图的路径从一种形状变化为另外一种。两个路径必须兼容于产生形变:它们必须拥有相同数量的命令,每个命令必须有相同数量的参数:

1 <!-- res/anim/path_morph.xml -->
2 <set xmlns:android="http://schemas.android.com/apk/res/android">
3     <objectAnimator
4         android:duration="3000"
5         android:propertyName="pathData"
6         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
7         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
8         android:valueType="pathType" />
9 </set>

 

时间: 2024-10-11 11:49:03

Android 5.0自定义动画的相关文章

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

动画在Material Design设计中给用户反馈放用户点击时,并且在程序用户界面中提供连贯的视觉.Material主题为按钮(Button)和activity的转换提供了一些默认的动画,在android5.0(api 21)和更高的版本,你可以自定义这些动画和创建一个新动画: Touch feedback(触摸反馈) Circular Reveal(循环揭露效果) Activity transitions(Activity转换效果) Curved motion(曲线运动) View stat

Android开发之自定义动画

自定义动画,需要新建一个类,继承Animation类. 重写applyTransformation()方法和initialize()方法. applyTransformation(float interpolatedTime, Transformation t)方法中 第一个参数:interpolatedTime代表动画的时间进行比.不管动画实际的持续时间如何,当动画播放时,该参数总是自动从0变化到1. 第二个参数:Transformation t代表了补间动画在不同时刻对图形或组件的变形程度.

Android 5.0+高级动画开发 矢量图动画 轨迹动画 路径变换

第1章 课程介绍为了成就更多高逼格的人才,我专门整理了Android5.0以后主推的实现酷炫动画的新技术,教你掌握实现动画的高逼格技巧.课程中我会详细讲解每个动画效果实现的原理和所用的技术,并带你一步一步的实现每个动画效果,让你在学完本次课程后,能够举一反三,再也不必担心设计MM的设计你没法实现了,也再也不用担心,老板的脑洞无... 第2章 矢量图VectorDrawable打造新时代酷炫动画本章讲解Android5.0以后主推的技术之一-矢量图VectorDrawable在Android中的使

Android 5.0 技术新趋势

由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 的应用又很少,如果开发者能捕捉这个机会,从这些用户那里得到更好的反馈,或者更好的证明机会,都是非常有价值的. 在 Android 5.0 发布之后,我认为有几个地方可以让开发者做得更好,比如可以建立一个更好看的应用,或者能够解决在应用中最大的性能问题——电量消耗的问题,等等.同时 Android 5

android中设置Animation 动画效果

在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation 画面转换动画,接下来eoe进行讲解. tweened animation 渐变动画有以下两种类型: 1.alpha   渐变透明度动画效果 2.scale   渐变尺寸伸缩动画效果 frame by frame animation 画面转换动画有以下两种类型: 1.translate  画面转换位置

Android开发之自定义View-可动画展开收缩View的实现

有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果,这样就可以直接自定义View来实现. 本例中,采用继承FrameLayout来实现自定义的ExpandView.下面将详细介绍各个部分来实现该类以及如何使用该自定义视图. 效果图如下: 未展开效果: 正在向上折叠收缩中的效果: 已经展开效果: 自定义展开类:ExpandView的实现: package com.czm.customview; import android.content.Context; import and

Android Material Design-Defining Custom Animations(自定义动画)-(六)

用户跟你的app进行交互时,material design中的动画给予用户动作的反馈和提供视觉的一致性(感受).Material主题提供了一些默认的按钮和activity过渡的动画效果,而在 Android 5.0(API级别21)或以上的系统版本中你可以自定义这些动画,还可以创建新的动画: l  Touch feedback(触摸反馈) l  Circular Reveal(循环显示) l  Activity transitions(Activity过渡) l  Curved motion(曲

android 动画(4)自定义动画

动画(4)自定义动画 使用监听事件对animation 进行状态的变化 large.xml <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXScale="0.2&qu

Android自定义动画类——实现3D旋转动画

Android中的补间动画分为下面几种: (1)AlphaAnimation :透明度改变的动画. (2)ScaleAnimation:大小缩放的动画. (3)TranslateAnimation:位移变化的动画. (4)RotateAnimation:旋转动画. 然而在实际项目中透明度.缩放.位移.旋转这几种动画并不能满足我们的需求,比如我们需要一个类似下面的3D旋转动画. 这时候就需要用到自定义动画,自定义动画需要继承Animation,并重写applyTransformation(floa