Button按下放大放小的阴影效果实现


  1. Button按下的阴影效果——StateListAnimator
  2. 关于StateListAnimator

回顾之前的做法

Button按下 Pressed的效果一般用selector实现。(需要3个文件 比较繁琐)1. pressed_xml 2.unpress 3 selector.今天我给大家介绍的是一种新的实现方法:可以实现动画、放大放小、按压效果,并且符合:Material Design 的风格.

我们平时处理TextView或Button的点击效果,通常会改变控件的颜色来区分是否按下,但是这并不符合MD的规范。因此 Material Design 对组件有了 z 轴这个概念,也就是高度。z 值越大,组件离界面底层(水平面)越远,投影越重。那我们怎么来实现组件在 z 轴(高度)上的变化效果呢?这就需要用到今天讲到的 StateListAnimator 了。

实现的效果:

buttonSelector.gif

备注:至于Button按下放大多少可以根据设计要求自己调整(可调整)

具体实现过程:

   <Button android:layout_width="match_parent" android:layout_height="wrap_content"
            android:stateListAnimator="@animator/selector_animator"
            android:text="重新定位"
    />

这里重点说一下@animator/selector_animator"。这个文件在res/animator文件夹下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="scaleX" android:valueTo="1.625"
                            android:valueType="floatType"/>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="scaleY" android:valueTo="1.625"
                            android:valueType="floatType"/>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="translationZ" android:valueTo="20dp"
                            android:valueType="floatType"/>
            
        </set>
    </item>
    <item>
        <set>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="scaleX" android:valueTo="1.0"
                            android:valueType="floatType"/>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="scaleY" android:valueTo="1.0"
                            android:valueType="floatType"/>
            <objectAnimator android:duration="@android:integer/config_shortAnimTime"
                            android:propertyName="translationZ" android:valueTo="0dp"
                            android:valueType="floatType"/>
        </set>
    </item>
</selector>

简单解释和说明:

我们可以看到objectAnimator 定义了两个set一个pressed状态和一种默认状态,其中pressed状态定义了scaleX scaleY(拉伸 也就是变大 按压效果)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容