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()
方法使你在揭露或隐藏视图时产生一个裁剪圈似的动画。
使用如下效果来揭露之前不可见的视图:
// 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
过渡效果,在不同状态之间,通过常用元素之间的动作和转换,提供了视觉连接。你可以为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
属性激活窗口内容过渡效果。你也可以在风格定义中指定出入和共享元素过渡效果:
<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
过渡效果定义如下:
<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>
changeImageTransform
元素对应于ChangeImageTransform
类。
要想激活代码中的窗口内容过渡效果,得调用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();
方法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() 方法。
// 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());
}
});
对于代码中生成的动态共享视图而言,要在两个Activity
中使用View.setTransitionName()
方法指定共同的元素名字。
为了结束掉第二个Activity
时逆转屏幕过渡效果动画,要调用Activity.finishAfterTransition()
方法而非Activity.finish()
。
启动拥有多个共享元素的Activity
要使拥有多于一个共享元素的两个Activity
的屏幕过渡产生动画效果,要在拥有android:transitionName
属性(或者在两个Activity
中使用View.setTransitionName()
方法)的两个布局文件中定义共享元素,并且要按照如下所示创建ActivityOptions
对象:
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
文件中定义路径加速器:
<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
对象使得视图的X
和Y
属性产生动画效果:
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
将视图的状态变化产生动画效果
StateListAnimator
对象让你定义在视图状态变化时运行的动画。下面的例子向你展示如何将StateListAnimator
定义成xml
资源:
<!-- 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>
要将自定义的视图状态动画添加到视图上,要像上述例子一样,将一个动画使用xml
资源文件中的selector
元素定义出来,而且把它通过android:stateListAnimator
属性分配到你的视图上。要在代码中把状态列表动画分配到视图中,要使用AnimationInflater.loadStateListAnimator()
方法,并且使用View.setStateListAnimator()
方法把动画分配到你的视图中。
当你的主题继承自材料主题时,按钮在默认情况下有Z
动画。要在你的按钮中避免这种行为,需要把android:stateListAnimator
属性设置成@null
。
AnimatorStateListDrawable
类让你创建相关联状态变化时展示动画的drawable
。Android 5.0
中的某些系统控件默认使用这些动画。下面的例子展示了如何使用xml
资源定义AnimatedStateListDrawable
类:
<!-- 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>
使矢量Drawable
产生动画
矢量图可缩放但却不损失精度。AnimatedVectorDrawable
类让你将矢量图的属性产生动画。
你通常情况下在下面三个xml
文件中定义动画矢量图:
- 在res/drawable/目录下定义拥有元素的矢量图;
- 在res/drawable/目录下定义拥有元素的可动画矢量图;
- 在res/anim/目录下定义拥有元素的一个或者多个对象动画。
可动画矢量图能够将和
等元素的属性产生动画。元素定义了一系列的
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>
可动画矢量图定义通过他们的名字引用了group
和path
:
<!-- 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
或AnimatorSet
对象。这个例子中的第一个动画器将目标group
旋转了360度:
<!-- res/anim/rotation.xml -->
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
例子中的第二个动画器使矢量图的路径从一种形状变化为另外一种。两个路径必须兼容于产生形变:它们必须拥有相同数量的命令,每个命令必须有相同数量的参数:
<!-- 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>
Android 5.0自定义动画的更多相关文章
- Android学习之Android 5.0分享动画实现微信点击全屏效果
Android5.0过渡动画,请看 http://blog.csdn.net/qq_16131393/article/details/51112772 今天用分享动画实现微信点击全屏效果 本文源代码下 ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- Android 5.0 技术新趋势
由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 ...
- Android(Lollipop/5.0) Material Design(六) 自定义动画
官网地址:https://developer.android.com/intl/zh-tw/training/material/animations.html 动画在Material设计中,为用户与a ...
- android 自定义动画
android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...
- Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析
这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...
- Android 5.0 全新的动画
触摸反馈 ripple 触摸反馈是指用户在触摸控件时的一种可视化交互,在Android L之前,通常是通过press色变来凸显,但是因为是瞬间变化的效果,不如动画生动. 在Android L 中定义了 ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- android自定义动画
前一篇说了实现过程,这次来写一个自己简单实现的3d动画 先来属性声明配置,方便使用xml 文件来定制动画 <!-- 有些类型其实是没必要的,只是实例代码,为了更具有代表性 --> < ...
随机推荐
- JSCover+WebDriver/Selenium获得JS
代码覆盖
我们看JSCover(http://tntim96.github.io/JSCover/manual/manual.xml)介绍及使用说明的时候,往往被图形界面所吸引.这样的方式比較适合手工操作,点击 ...
- Spring MVC异常处理详解(转)
下图中,我画出了Spring MVC中,跟异常处理相关的主要类和接口. 在Spring MVC中,所有用于处理在请求映射和请求处理过程中抛出的异常的类,都要实现HandlerExceptionReso ...
- [LeetCode] 032. Longest Valid Parentheses (Hard) (C++)
指数:[LeetCode] Leetcode 指标解释 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 032. Lon ...
- 【C++】智能指针auto_ptr简单的实现
//[C++]智能指针auto_ptr简单的实现 #include <iostream> using namespace std; template <class _Ty> c ...
- 控制执行流程——(Java学习笔记三)
if-else 控制程序流程最基本的形式 格式: if(boolean - expresion){ statement } 或 if(boolean - expresion){ stateme ...
- hdu 统计难题(map)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1251 map的强大之处,但是运行时间太长. 代码: #include <stdio.h> ...
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- (二)spring MVC配置
使用Maven添加依赖的jar包 <!-- 自动扫描的包名 --> <mvc:reso ...
- crawler_解析之_jquery_语法选择器使用方法
爬虫解析一般使用 正则或者给予样式的 jquery语法选择器 正则是根本,类比jsoup基于dom,底层也有部分是基于正则实现的,linux操作系统 文本处理也是借助强大的正则体现的 .关于正则 请参 ...
- 【C++实现】HeadFirst策略模式设计模式
策略模式定义了算法家族.分别封装起来.让它们之间能够相互替换,此模式让算法的变化独立于使用算法的客户. Head First设计模式中介绍策略模式时以Duck类作为样例.当中用flyBehavior和 ...