您的位置：首页 > 移动开发 > Android开发

Android 5.0 动画-Ripple和RevealEffect

2016-03-20 15:54 597 查看


前言

Android5.0发布时，Google推出了material design，其中有几个比较实用、使用也非常简单的阴影和动画效果，使用这些效果能使能使你的app界面更加炫酷同时也能增强用户体验

在这里主要介绍其中的三个效果：

Elevation

Ripple

RevealEffect

注：以下效果测试代码编写使用的IDE为Android studio,sdk必须是5.0及以上


1.Elevation

Elevation是用来设置view的阴影的，这个属性只有在5.0及以上的系统才有

具体使用方法是在布局文件中直接添加这个属性

代码

?
1

2

3

4

5

6
<
TextView


        
android:id
=
"@+id/tv_test"


        
android:layout_width
=
"200dp"


        
android:layout_height
=
"200dp"


        
android:elevation
=
"10dp"


        
android:background
=
"#dddddd"
/>


效果





elevation 和 translationZ 经常配合使用以达到不一样的阴影效果

translationZ 用来设置view 在空间中z轴的高度，使用如下：

代码

?
1

2

3

4

5

6

7
<
TextView


        
android:id
=
"@+id/tv_test"


        
android:layout_width
=
"200dp"


        
android:layout_height
=
"200dp"


        
android:elevation
=
"10dp"


        
android:translationZ
=
"20dp"


        
android:background
=
"#dddddd"
/>


效果






2.Ripple

ripple 是在触摸 view 时提供触摸反馈的动画，5.0之前触摸反馈只是改变背景图片或颜色

5.0及以后你可以设置ripple来实现圆形动画扩散的动画反馈，并且点击可长按效果也不一样


使用方法一

直接在控件中给控件添加两个属性

有边界

android:background="?attr/selectableItemBackground"

android:clickable="true

无边界

android:background="?attr/selectableItemBackgroundBorderless"

android:clickable="true

代码：

有边界

?
1

2

3

4

5

6
<
TextView


        
android:id
=
"@+id/tv_test"


        
android:layout_width
=
"200dp"


        
android:layout_height
=
"200dp"


        
android:background
=
"?attr/selectableItemBackground"


        
android:clickable
=
"true"
/>


无边界

?
1

2

3

4

5

6
<
TextView


        
android:id
=
"@+id/tv_test"


        
android:layout_width
=
"200dp"


        
android:layout_height
=
"200dp"


        
android:background
=
"?attr/selectableItemBackgroundBorderless"


        
android:clickable
=
"true"
/>


效果(有边界)：





效果（无边界）：





说明: 这种方式只适用于不需要定义背景颜色的控件，定义北京颜色就无法使用了

如果要定义背景颜色，则需编写一个drawable


使用方法二

编写drawable

代码：

drawable ：bg.xml

?
1

2

3

4

5

6
<?xml
version=
"1.0"
encoding=
"utf-8"
?>


<ripple
xmlns:android=
"http://schemas.android.com/apk/res/android"


              
android:color=
"#33ff0000"
>


    
<item
android:drawable=
"@android:color/darker_gray"
/>


</ripple>


控件代码：

?
1

2

3

4

5

6
<TextView


        
android:id=
"@+id/tv_test"


        
android:layout_width=
"200dp"


        
android:layout_height=
"200dp"


        
android:background=
"@drawable/bg"


        
android:clickable=
"true"
/>


效果：





说明：

这种方式的好处是

不仅能定义控件背景（bg.xml中drawable属性），还可以定义ripple效果颜色（bg.xml中color 属性）

以及ripple效果的透明度（bg.xml中color 属性中8位颜色值前两位代表透明度）

但也存在问题，我们只能定义有边界的类型，无边界的那种效果我还没找到方法实现，那位大神知道教教我  →_→


3.Reveal Effect

RevealEffect是 view的一个动画效果，与普通动画效果有很大差别

它是由ViewAnimationUtils来单独创建的，并且也是圆形扩散效果

下面演示一个textview在gone和visible之间的切换效果（可见和不可见之间的切换效果）


使用方法

代码

布局文件

?
1

2

3

4

5

6

7

8
<
TextView


        
android:id
=
"@+id/tv_test"


        
android:layout_width
=
"200dp"


        
android:layout_height
=
"200dp"


        
android:elevation
=
"10dp"


        
android:translationZ
=
"20dp"


        
android:visibility
=
"gone"


        
android:background
=
"#dddddd"
/>


activity完整代码

package com.example.revealeffect;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.DecelerateInterpolator;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private TextView textView;
//flag
private boolean isFirst = true;
private int radius;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

textView = (TextView) findViewById(R.id.tv_test);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (isFirst) {
textView.setVisibility(View.VISIBLE);
createAnimation(textView, isFirst).start();
} else {
Animator animator = createAnimation(textView, isFirst);
//设置动画监听器，因为动画完了之后，我们才设置textview不可见
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
textView.setVisibility(View.GONE);
}
});
animator.start();
}
isFirst = !isFirst;
}
});
//将200dp转为像素，作为动画效果的半径
radius = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
200, getResources().getDisplayMetrics());
}
//创建动画的函数
public Animator createAnimation(View v,boolean isFirst) {
Animator animator;
if (isFirst) {
//从gone到visible动画
//5个参数作用分别是 操作的view  圆心x坐标 圆心y坐标 动画开始半径 动画结束半径
animator = ViewAnimationUtils.createCircularReveal(v, 0, 0,0, radius);
} else {
//从visible到动画gone
animator = ViewAnimationUtils.createCircularReveal( v, 0,0,radius,0);
}
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(1500);
return animator;
}
}


效果





说明

使用这个动画时，要注意半径设置是否正确，比如在onCreate()方法中获取控件宽高作为半径是不可取的

因为onCreate()方法中控件宽高还未进行测量，只是初始化了控件

还有如果view设置为 GONE 即隐藏时，也是无法获取宽高的，但设置为INVISIBLE时可以获取到宽高

具体原因可以搜索 GONE和INVISIBLE区别

上面默认的activity是通过android studio 创建的basic activity，有个FloatActionButton作为点击事件

附上build.gradle中dependencies

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
}


gradle在国内用好坑啊。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  android 动画 Ripple RevealEffect
相关文章推荐
新的分享
章节导航