Touch feedback(触摸反馈)和 Reveal effect(揭露效果)

触摸反馈:

在Android L5.0中加入了触摸反馈动画。
其中最明显,最具代表性的就是波纹动画,比如当点击按钮或条目时会从点击的位置产生类似于波纹的扩散效果。

波纹效果(Ripple):

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

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

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

使用效果如下:

  • B1是不设任何背景的按钮
  • B2设置了?android:attr/selectableItemBackground
  • B3设置了?android:attr/selectableItemBackgroundBorderless
效果图
效果图

设置颜色

我们也可以通过设置xml属性来调节动画颜色,从而可以适应不同的主题:
android:colorControlHighlight:设置波纹颜色
android:colorAccent:设置checkbox等控件的选中颜色

比如下面这个比较粉嫩的主题,就需要修改动画颜色来匹配:

效果图
效果图

Circular Reveal:

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动画对象。

这五个参数分别是:

  • view 操作的视图
  • centerX 动画开始的中心点X
  • centerY 动画开始的中心点Y
  • startRadius 动画开始半径
  • startRadius 动画结束半径

根据下面的效果图和代码可以很容易的了解这几个参数的作用:

Image.png
Image.png
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.setInterpolator(new AccelerateDecelerateInterpolator());  
        animator.setDuration(2000);  
        animator.start();  
    }  
});  
  
final View rect = this.findViewById(R.id.rect);  
  
rect.setOnClickListener(new View.OnClickListener() {  
    @Override  
    public void onClick(View v) {  
        Animator animator = ViewAnimationUtils.createCircularReveal(  
                rect,  
                0,  
                0,  
                0,  
                (float) Math.hypot(rect.getWidth(), rect.getHeight()));  
        animator.setInterpolator(new AccelerateInterpolator());  
        animator.setDuration(2000);  
        animator.start();  
    }  
});  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 我的生活大致分为几个板块:一个版块是在无形中去犯蠢,总是做出一些愚不可及的事情;第二板块就是在在做完这些蠢事情后,...
    麦科雷迪阅读 194评论 0 0
  • 在学习古筝的过程中,有些人学筝感到越学越有意思,越学越有兴趣,越学越爱学.即便遇到点困难,也越发的兴奋.而有些人学...
    弘扬古筝阅读 738评论 0 5
  • -01- 准备两个瓶子,把瓶口剪掉,瓶身拼接在一起,可以装面条,这样面条就不会在袋子里散出来了。 -02-把瓶盖剪...
    千惠酱呀阅读 1,180评论 5 15