天天看点

Android 5.0 动画-Ripple和RevealEffect

前言

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

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

  1. Elevation
  2. Ripple
  3. 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"

/>

  • 效果
Android 5.0 动画-Ripple和RevealEffect

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"

/>

  • 效果
Android 5.0 动画-Ripple和RevealEffect

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"

/>

效果(有边界):

Android 5.0 动画-Ripple和RevealEffect

效果(无边界):

Android 5.0 动画-Ripple和RevealEffect

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

如果要定义背景颜色,则需编写一个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"

/>

效果:

Android 5.0 动画-Ripple和RevealEffect

说明:

这种方式的好处是

不仅能定义控件背景(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;
    }
}
           

效果

Android 5.0 动画-Ripple和RevealEffect
  • 说明

使用这个动画时,要注意半径设置是否正确,比如在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在国内用好坑啊。。。