美文网首页
Touch feedback(触摸反馈)和 Reveal eff

Touch feedback(触摸反馈)和 Reveal eff

作者: yyg | 来源:发表于2017-09-29 16:29 被阅读141次

    触摸反馈:

    在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.pngImage.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();  
        }  
    });  
    

    相关文章

      网友评论

          本文标题:Touch feedback(触摸反馈)和 Reveal eff

          本文链接:https://www.haomeiwen.com/subject/mqqzsxtx.html