[转]ANDROID L——Material Design详解(动画篇)

时间:2022-09-19 08:20:02

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!

转自:http://blog.csdn.net/a396901990/article/details/40187203

Android L:

Google已经确认Android L就是Android Lollipop(5.0)。

前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市。

所以是时候开始学习Android L了!

关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章:

Android L——模拟器配置及创建项目

 
 

Material Design:

Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。

Material Design包含了很多内容,我大致把它分为四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影——ANDROID L——Material Design详解(视图和阴影)

UI控件——ANDROID L——Material Design详解(UI控件)

动画——ANDROID L——Material Design详解(动画篇)

今天就先来说说第四部分——Material新增的动画:

在Android L中新增了如下几种动画:

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

这篇文章先介绍上面6种中比较常用前三种,由于后三种现在资料不多,而且好像不是特别常用,等我研究明白了再给补上。

触摸反馈:

在Android L5.0中加入了触摸反馈动画。

其中最明显,最具代表性的就是波纹动画,比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。

波纹效果(Ripple):

当你使用了Material主题后,波纹动画会自动应用在所有的控件上,我们当然可以来设置其属性来调整到我们需要的效果。

可以通过如下代码设置波纹的背景:

android:background="?android:attr/selectableItemBackground"波纹有边界

android:background="?android:attr/selectableItemBackgroundBorderless"波纹超出边界

使用效果如下:

B1是不设任何背景的按钮

B2设置了?android:attr/selectableItemBackground

B3设置了?android:attr/selectableItemBackgroundBorderless

[转]ANDROID L——Material Design详解(动画篇)

设置颜色

我们也可以通过设置xml属性来调节动画颜色,从而可以适应不同的主题:

android:colorControlHighlight:设置波纹颜色

android:colorAccent:设置checkbox等控件的选中颜色

比如下面这个比较粉嫩的主题,就需要修改动画颜色来匹配(如何设置主题颜色请参考该系列第一篇文章):

[转]ANDROID L——Material Design详解(动画篇)

Circular Reveal:

Circular Reveal是一个Android L新增的动画效果,但我始终不知道如何翻译这个名字,圆形揭示?
 

使用方法:

应用ViewAnimationUtils.createCircularReveal()方法可以去创建一个RevealAnimator动画

ViewAnimationUtils.createCircularReveal源码如下:

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

源码非常简单,就是通过createCircularReveal方法根据5个参数来创建一个RevealAnimator动画对象。

 
这五个参数分别是:
view 操作的视图
centerX 动画开始的中心点X
centerY 动画开始的中心点Y
startRadius 动画开始半径
startRadius 动画结束半径
 
根据下面的效果图和代码可以很容易的了解这几个参数的作用:
[转]ANDROID L——Material Design详解(动画篇)
  1. final View oval = this.findViewById(R.id.oval);
  2. oval.setOnClickListener(new View.OnClickListener() {
  3. @Override
  4. public void onClick(View v) {
  5. Animator animator = ViewAnimationUtils.createCircularReveal(
  6. oval,
  7. oval.getWidth()/2,
  8. oval.getHeight()/2,
  9. oval.getWidth(),
  10. 0);
  11. animator.setInterpolator(new AccelerateDecelerateInterpolator());
  12. animator.setDuration(2000);
  13. animator.start();
  14. }
  15. });
  16. final View rect = this.findViewById(R.id.rect);
  17. rect.setOnClickListener(new View.OnClickListener() {
  18. @Override
  19. public void onClick(View v) {
  20. Animator animator = ViewAnimationUtils.createCircularReveal(
  21. rect,
  22. 0,
  23. 0,
  24. 0,
  25. (float) Math.hypot(rect.getWidth(), rect.getHeight()));
  26. animator.setInterpolator(new AccelerateInterpolator());
  27. animator.setDuration(2000);
  28. animator.start();
  29. }
  30. });

总结:

RevealAnimator和之前的动画使用没什么区别,同样可以设置监听器和加速器来实现各种各样的特效。

这些效果常用在视图的添加,删除,状态,大小改变的时候,以后我会写一个更直观详细的例子。

Activity Transition:

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

简介:

Activity Transition提供了两种Transition类型:

Enter(进入):进入一个Activity的效果
Exit(退出):退出一个Activity的效果

而这每种类型又分为普通Transition和共享元素Transition:

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

 

Shared Elements Transition 共享元素转换:

它的作用就是共享两个acitivity种共同的元素,在Android 5.0下支持如下效果:

changeBounds -  改变目标视图的布局边界

changeClipBounds - 裁剪目标视图边界

changeTransform - 改变目标视图的缩放比例和旋转角度

changeImageTransform - 改变目标图片的大小和缩放比例

下面是我写的一个小演示Demo,相信大家看后就知道这几个动画是如何工作的了:

[转]ANDROID L——Material Design详解(动画篇)

 

Activity Transition使用 :

 

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

步骤一:设置允许使用transition,并且设置transition

 

xml:

首先,如果要使用transition需要先修改style文件,在继承了material主题的style.xml中添加如下属性:

  1. <style name="myTheme" parent="android:Theme.Material">
  2. <!-- 允许使用transitions -->
  3. <item name="android:windowContentTransitions">true</item>
  4. <!-- 指定进入和退出transitions -->
  5. <item name="android:windowEnterTransition">@transition/explode</item>
  6. <item name="android:windowExitTransition">@transition/explode</item>
  7. <!-- 指定shared element transitions -->
  8. <item name="android:windowSharedElementEnterTransition">
  9. @transition/change_image_transform</item>
  10. <item name="android:windowSharedElementExitTransition">
  11. @transition/change_image_transform</item>
  12. </style>

下面再来看看如何定义transition动画:

  1. <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  2. <explode/>
  3. <changeBounds/>
  4. <changeTransform/>
  5. <changeClipBounds/>
  6. <changeImageTransform/>
  7. </transitionSet>

transition里面的元素就是之前介绍过的,使用方法和以前的AnimationSet差不多,具体如何使用大家可以参考官方文档。

代码:

在代码中同样可以完成对于transition的设置:

  1. // 允许使用transitions
  2. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
  3. // 设置一个exit transition
  4. getWindow().setExitTransition(new Explode());

可以通过如下方法在代码总设置transition效果:

Window.setEnterTransition():普通transition的进入效果

Window.setExitTransition():普通transition的退出效果

Window.setSharedElementEnterTransition():共享元素transition的进入效果

Window.setSharedElementExitTransition():共享元素transition的退出效果

 

 

步骤二:启动Activity:

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

启用普通的Transition:

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

启用共享元素Transition:

启动shared element transition和普通的transition稍有不同

在所有需要共享视图的Activity中,使用android:transitionName属性对于需要共享的元素分配一个通用的名字。

  1. Intent intent = new Intent(this, Activity2.class);
  2. // shareView: 需要共享的视图
  3. // "shareName": 设置的android:transitionName="shareName"
  4. ActivityOptions options = ActivityOptions
  5. .makeSceneTransitionAnimation(this, shareView, "shareName");
  6. startActivity(intent, options.toBundle());</span>

如果有多个View需要共享,则通过Pair.create()方法创建多个匹配对然后传入ActivityOptions.makeSceneTransitionAnimation。代码如下:

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

如果不想使用transition可以设置options bundle为null。

当需要结束当前Activity并回退这个动画时调用Activity.finishAfterTransition()方法

兼容性:

上面介绍的几个新动画的APIs只允许在Android L中使用:

  • Activity transitions
  • Touch feedback
  • Reveal animations

所以为了兼容早期版本,则需要在调用这些api的时候先进行检查系统版本。

写在最后:

我将Material Design分为如下四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影——ANDROID L——Material Design详解(视图和阴影)

UI控件——ANDROID L——Material Design详解(UI控件)

动画——ANDROID L——Material Design详解(动画篇)

 

十一放假回来开始学习Android L,连更了6篇文章终于把Material Design中大部分特性介绍完毕(动画篇还剩几个小内容,过几天研究明白了再给补上)

接下来准备写几个小例子,把视图阴影,动画和新增的UI控件充分结合起来。

ANDROID L——Material Design综合应用(Demo)

Android 5.0真的做出了很大的变化,有一种脱胎换骨的感觉,但说实话模拟器用的真心不爽,啥时候Genymotion可以支持5.0啊。。。

[转]ANDROID L——Material Design详解(动画篇)的更多相关文章

  1. ANDROID L——Material Design详解(UI控件)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  2. ANDROID L——Material Design具体解释(动画篇)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  3. ANDROID L——Material Design综合应用(Demo)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

  4. ANDROID L——Material Design详细解释(UI控制)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  5. &lbrack;转&rsqb;Android 5&period;0——Material Design详解(动画篇)

    Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Andr ...

  6. android Material Design详解

    原文地址:http://blog.csdn.net/jdsjlzx/article/details/41441083/ 前言 我们都知道Marterial Design是Google推出的全新UI设计 ...

  7. ANDROID L——Material Design具体解释(主题和布局)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  8. Android之Material Dialogs详解

    文章大纲 一.什么是Material Dialogs二.Material Dialogs实战三.项目源码下载   一.什么是Material Dialogs   Material Dialogs是一个 ...

  9. 转:android Support 兼容包详解

    本文转自stormzhang的ANDROID SUPPORT兼容包详解 背景 来自于知乎上邀请回答的一个问题Android中AppCompat和Holo的一个问题?, 看来很多人还是对这些兼容包搞不清 ...

随机推荐

  1. 粗略读完opengl

    清明节前粗略读完了opengl编程指南第七版,对opengl有了一个大体的了解,并且了解的也很肤浅.有了计算机图形学,线性代数的基础,读起来也不像以前那么吃力了.从简单的绘制点,直线,多边形,到视图变 ...

  2. Sharepoint学习笔记—习题系列--70-576习题解析 -&lpar;Q95-Q98&rpar;

    Question  95  Your development team has asked you to help them determine the cause of an error in a ...

  3. MySQL中MyISAM引擎及InnoDB引擎的缓存优化设计

    MyISAM引擎中,为了提高io效率以及读取效率,将对磁盘频繁读取的索引数据加载至内存中操作. MyISAM设计了一个在存放在内存中的索引缓冲池Key Cache.Key Cache只缓存索引数据,通 ...

  4. 关于html5

    html5   是用来  将 js  和 css  结合起来 从而实现 各种功能 javascript 用来定义 html5   页面的逻辑 css 来定义 html5 中的显示样式

  5. Android Intent的几种用法总结【转】

    Intent应该算是Android中特有的东西.你可以在Intent中指定程序要执行的动作(比如:view,edit,dial),以及程序执行到该动作时所需要的资料.都指定好后,只要调用startAc ...

  6. 怎样批量把excel中已显示的科学计数法取消

    作者:iamlaosong 把一文本文档拷贝到EXCEL中时,当中一列数字所有变成科学计数法,这些数事实上是条码号,不需进行运算,怎样能够取消科学计算法,将数字显示成原来的样子呢?一般方法例如以下: ...

  7. 对象转字典 iOS

    最近在开发SDK,我开放给客户model类设置信息后,对象转字典,POST给后台. 思路:通过Runtime访问属性列表,快速转换成字典. FRObjectToDictionary.h类 p.p1 { ...

  8. &num;ifndef&comma; &num;define&comma; &num;endif 作用

    #ifndef, #define, #endif 作用 https://www.cnblogs.com/challenger-vip/p/3386819.html

  9. Django使用jsonp和cors解决跨域请求问题

    1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...

  10. 1&lowbar;Utilities&lowbar;&lowbar;bandwidthTest

    使用三种模式(QUICK_MODE,RANGE_MODE,SHMOO_MODE),测试三种拷贝情况下的显存带宽(HostToDevice,DeviceToHost,DeviceToDevice) ▶ ...