Android:Material Design(一) 概述
Android:Material Design(二) Material主题
Android:Material Design(三) 动画
Android:Material Design(四) UI控件
Android:Material Design(五) 视图和阴影
Android:Material Design(六) 使用Drawable
Android:Material Design(七) 兼容性
Material Design包含了很多内容,今天跟大家分享一下Material新增的动画:
在Android L中新增了如下几种动画:
- Touch feedback(触摸反馈)
- Reveal effect(揭露效果)
- Activity transitions(Activity转换效果)
- Curved motion(曲线运动)
- View state changes (视图状态改变)
- Animate Vector Drawables(可绘矢量动画)
接下来我们一一讲解
Touch feedback(触摸反馈)
在Android 5.0中加入了触摸反馈动画。其中最明显,最具代表性的就是波纹动画,比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。关于buttons默认的触摸反馈动画,使用了RippleDrawable类,用一个波纹(涟漪)效果在两种不同的状态间过渡。
波纹效果(Ripple):
当你使用了Material主题后,波纹动画会自动应用在所有的控件上,我们当然可以来设置其属性来调整到我们需要的效果。
在xml里可以通过如下代码设置波纹的背景:
?android:attr/selectableItemBackground //有界限的波纹
?android:attr/selectableItemBackgroundBorderless //波纹超出边界
设置颜色
我们也可以通过设置xml属性来调节动画颜色,从而可以适应不同的主题:
android:colorControlHighlight:设置波纹颜色
android:colorAccent:设置checkbox等控件的选中颜色
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material">
<item name="android:colorControlHighlight">#00ff00</item>
</style>
</resources>
使用效果
B1是不设任何背景的按钮
B2设置了?android:attr/selectableItemBackground
B3设置了?android:attr/selectableItemBackgroundBorderless
设置checkbox等控件的选中颜色为红色
<item name="android:colorAccent" >#ff0000</item>
Reveal effect(揭露效果)
Circular Reveal是Android L新增的一个动画效果。
使用方法
应用ViewAnimationUtils.createCircularReveal()方法可以去创建一个RevealAnimator动画ViewAnimationUtils.createCircularReveal源码如下:
public static Animator createCircularReveal(View view,
int centerX, int centerY, float startRadius, float endRadius) {
return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
}
源码非常简单,就是通过createCircularReveal方法根据5个参数来创建一个RevealAnimator动画对象。这5个参数分别是:
1. view 操作的视图
2. centerX 动画开始的中心点X
3. centerY 动画开始的中心点Y
4. startRadius 动画开始半径
5. startRadius 动画结束半径
根据下面的效果图和代码可以很容易的了解这几个参数的作用:
final View oval = this.findViewById(R.id.oval);
oval.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animator animator = ViewAnimationUtils.createCircularReveal(
oval,
oval.getWidth()/2,
oval.getHeight()/2,
oval.getWidth(),
0);
animator.setInterpo