Material Design动画效果实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Wengwuhua/article/details/85208986

Material Design介绍

Material Design是Google官方在14年Google I/O上推出了全新的设计语言,一并推出了一系列实现Material Design效果的控件库Android Design Support Library。其中,有TabLayout, NavigationView(常和DrawerLayout配合使用实现抽屉效果), TextInputLayout(常用于用户名密码登录), FloatingActionButton(悬浮按钮), Snackbar(类似Toast), CoordinatorLayout, CollapsingToolbarLayout 等等控件.
要在项目中使用material design的特性,只需在Gradle文件中的dependency中添加’compile 'com.android.support:design:xx.x.x’依赖。

Material Design动画效果实现

常用Material Design动画:

  • 页面转换动画transitions
  • 共享元素动画shared element
  • 场景动画scene
  • 揭露效果reveal

要实现Material Design动画效果,首先需要在启动activity时要传入ActivityOptionsCompat.makeSceneTransitionAnimation(Activity, Pair<View, String> …sharedElement).toBundle()的Bundle参数

在这里插入图片描述

页面转换动画transitions

  1. transitions用于在不同页面之间跳转时的过度动画,有三种不同的效果:Fade(渐变)、Explode(分解)、Slide(滑动)
    页面切换过程中有以下几种状态:enter、exit、reenter、return,对应的动画设置如下:
    在这里插入图片描述

如果未定义Return或Reenter,Android将执行反向的Enter和Exit Transitions。但是,如果定义了它们,则可以使用不同的过渡来进入和退出活动。
在相应的activity中设置进入或离开页面的动画效果,比如从A activity跳到B activity可以在B设置进入动画为Explode用代码方式实现,也可以通过XML配置文件实现。
在这里插入图片描述
XML方式
在这里插入图片描述
在这里插入图片描述

共享元素动画shared element

在两个不同的界面中有两个不同的视图,由框架以某种方式将它们用动画链接,形成某个视图从一个界面到另一个界面的动画效果。
但是,视图并非真正的从一个界面移动到了另一界面,它们是独立的两个View。它们通过一个共同的属性transitionName连接。

  1. 先在应用的主题中将windowContentTransitions设为true:
    < style name = “MyAppTheme ” parent = “ @ style / Theme.AppCompat.Light.NoActionBar ” >

    < item name = “ android:windowContentTransitions ” > true </ item>

    </style
  2. 同时给要转换的原始元素和目标元素设置相同的transitionName属性
    在这里插入图片描述在这里插入图片描述
  3. 设置进入动画:setSharedElementEnterTransition(new ChangeBounds())
    这样就可以实现两个activity或fragment之间共享元素的动画了。

场景动画scene

scene动画由TransitionManager的go(Scene scene)或go(Scene scene, Transition transition)方法执行。
这里关键是不同scene中的view的id要一一对应,这样框架才能正确实现scene的过渡动画,并且要为scene指定一个rootView。

  1. 代码实现,先价值scene布局,然后设置动画属性,最后通过go方法执行动画。
    在这里插入图片描述

  2. XML实现
    在这里插入图片描述

揭露效果reveal

在Material Design支持库中专门加入了一个类ViewAnimationUtils来实现揭露效果(实际就是一个以某点为中心圆形向外扩展的动画效果),该类只有一个实现方法在这里插入图片描述
实现
创建一个Animator对象,然后给这个animator对象设置相关的属性之后调用start方法即可。
在这里插入图片描述

Shared Element动画原理

Transitions介绍

安卓5.0中Activity和Fragment 变换是建立在名叫Transitions的安卓新特性之上的。当一个
场景改变的时候,transition主要负责:
(1)捕捉每个View在开始场景和结束场景时的状态。
(2)根据两个场景(开始和结束)之间的区别创建一个Animator。

在共享元素变换开始之前,必须首先捕获每个共享元素的开始和结束状态(调用activity以及被调用activity中的位置、大小、外观),有了这些信息才能决定每个共享元素的入场动画。

共享元素动画绘制

共享元素默认其实是绘制在整个view树结构的最上层,在一个叫ViewOverlay的东西上面。它是4.3之后才有的一个新类,是view的最上面的一个透明的层,添加到ViewOverlay上面的Drawable和view可以被绘制到任何东西的上面,甚至是ViewGroup的子元素。
当Activity A 跳转到 Activity B ,发生的事件流如下:

  1. Activity A调用startActivity(), Activity B被创建,测量,同时初始化为半透明的窗口和透明的背景颜色。
  2. framework重新分配每个共享元素在B中的位置与大小,使其跟A中一模一样。之后,B的进入变换(enter transition)捕获到共享元素在B中的初始状态。
  3. framework重新分配每个共享元素在B中的位置与大小,使其跟B中的最终状态一致。之后,B的进入变换(enter transition)捕获到共享元素在B中的结束状态。
  4. B的进入变换(enter transition)比较共享元素的初始和结束状态,同时基于前后状态的区别创建一个Animator(属性动画对象)。
  5. framework 命令A隐藏其共享元素,动画开始运行。随着动画的进行,framework 逐渐将B的activity窗口显示出来,当动画完成,B的窗口才完全可见。

Shared Element动画无效原因:

  1. 共享元素存在于 Activity 托管的 Fragment 中:FragmentTransactions 在commit后不会被立即执行,它们被安排到 主线程等待执行,如果共享元素存在的 Fragment 的视图层和FragmentTransaction没有被及时执行,框架可能会在共享元素被正确测量大小和布局到屏幕前启动共享元素 Transition。
  2. 共享元素是一个高分辨率的图片:给 ImageView 设置一个超过其初始化边界的高分辨率图片, 最终可能会导致在这个视图层里额外的布局传递,由此增加在共享元素准备好前就 启动 Transition 的几率。
  3. 共享元素依赖于异步的数据加载:在它们最终返回数据前元素才能被确定,框架有可能在数据返回主线程前启动 Transition。

Shared Element动画无效解决办法:

  1. 在Activity中:
    在 Activity 的onCreate()中调用postponeEnterTransition() 方法来暂时阻止启动共享元素 Transition。之后,在共享元素准备好后调用 startPostponedEnterTransition() 来恢复过渡效果。 常见的方式是在一个OnPreDrawListener中启动延时 Transition, 它会在共享元素测量和布局完毕后被调用。
    在这里插入图片描述

  2. 在Fragment中:
    通过postponeEnterTransition()和startPostponedEnterTransition()只对 Activity Transition起作用,对Fragment无效,虽然Fragment中也有相应的方法。
    对于fragmen的问题我们可以在commit后getFragmentManager().executePendingTransactions();强制立即执行FragmentTransactions而不是异步来避开这个问题。

参考链接: https://blog.csdn.net/wuyuxing24/article/details/78857912
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html

猜你喜欢

转载自blog.csdn.net/Wengwuhua/article/details/85208986