Android动画<第十篇>：视图状态动画

说到视图状态，很容易想到view状态有：点击状态、使能状态、选中状态等等，通常使用selector来实现View的状态。

【一】selector + shape实现按钮的点击效果

【第一步】 在drawable文件夹下新建一个背景布局

bg_select.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#D67B5E" />
            <stroke android:width="2dp" android:color="#FAF7F7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#966DDF" />
            <stroke android:width="2dp" android:color="#FAF7F7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

【第二步】 将布局当做背景设置

<Button
    android:id="@+id/stateList_button1"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/bg_select"
    android:text="按钮"
    android:textSize="20sp"/>

【第三步】 展示效果

35.gif

【二】selector + objectAnimator实现按钮的点击效果

【第一步】 在animator文件夹下新建一个stateListAnimator布局

假设View的Z轴默认是2，点击是Z轴数值是20（也就是阴影大小）

bg_state_ani.xml

<?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="translationZ"
                android:valueTo="20dp"
                android:valueType="floatType"/>
        </set>
    </item>

    <item
        android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="translationZ"
                android:valueTo="2dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

【第二步】 设置stateListAnimator布局

<Button
    android:id="@+id/stateList_button1"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:stateListAnimator="@animator/bg_state_ani"
    android:text="按钮"
    android:textSize="20sp"/>

【第三步】 展示效果

36.gif

从效果图上可以看出，这个只是添加按钮的点击动画，而不是设置背景。

【三】selector + shape + objectAnimator实现按钮的点击效果

该方案是前两种方案的结合，步骤一样。

将背景和视图状态动画都设置到按钮上

<Button
    android:id="@+id/stateList_button1"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/bg_select"
    android:stateListAnimator="@animator/bg_state_ani"
    android:text="按钮"
    android:textSize="20sp"/>

效果如下：

37.gif

在objectAnimator配置中，我们只对View的Z轴操作，那么如果对X轴或者Y轴操作之后效果又是怎样的呢？加入旋转动画、透明度动画又怎样呢？

【仅从X轴方向移动】

修改动画：

<?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="translationX"
                android:valueTo="20dp"
                android:valueType="floatType"/>
        </set>
    </item>

    <item
        android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="translationX"
                android:valueTo="0dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

效果如下：

38.gif

【仅从Y轴方向移动】

修改动画：

<?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="translationY"
                android:valueTo="20dp"
                android:valueType="floatType"/>
        </set>
    </item>

    <item
        android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="translationY"
                android:valueTo="0dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

效果如下：

39.gif

【从Z轴方向移动并X轴方向旋转】

修改动画：

<?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="translationZ"
                android:valueTo="20dp"
                android:valueType="floatType"/>

            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="rotationX"
                android:valueTo="20dp"
                android:valueType="floatType"/>
        </set>
    </item>

    <item
        android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="translationZ"
                android:valueTo="2dp"
                android:valueType="floatType"/>

            <objectAnimator
                android:duration="100"
                android:propertyName="rotationX"
                android:valueTo="0dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

效果如下：

40.gif

这种方案通过动画叠加的方式实现。

例子暂时就这么多，透明度的动画就不举例了，实现方式比较简单。

【四】animated-selector实现按钮的点击效果

上面我们提到过Z轴移动和X轴旋转的组合动画，如图：

40.gif

那么现在我给于这个效果继续优化。

在Android5.0之后，selector出现了一个扩展：animated-selector，为了保证兼容性，我在如图两个文件夹中分别访入bg_select.xml文件，这两个文件的内容是不一样的。

图片.png

drawable文件夹下的bg_select.xml是为了兼容5.0以上的手机（不包括5.0），布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#D67B5E" />
            <stroke android:width="2dp" android:color="#FAF7F7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#966DDF" />
            <stroke android:width="2dp" android:color="#FAF7F7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

效果如下：

40.gif

drawable-v21文件夹下的bg_select.xml只有在5.0以上的手机上有效（包括5.0），布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/pressed_false"
        android:drawable="@mipmap/bird1"
        android:state_pressed="false">
    </item>

    <item
        android:id="@+id/pressed_true"
        android:drawable="@mipmap/bird8"
        android:state_pressed="true">
    </item>

    <transition
        android:fromId="@+id/pressed_false"
        android:toId="@+id/pressed_true">
        <animation-list>
            <item
                android:drawable="@mipmap/bird1"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird2"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird3"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird4"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird5"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird6"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird7"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird8"
                android:duration="200"/>
        </animation-list>
    </transition>

    <transition
        android:fromId="@+id/pressed_true"
        android:toId="@+id/pressed_false">
        <animation-list>
            <item
                android:drawable="@mipmap/bird1"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird2"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird3"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird4"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird5"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird6"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird7"
                android:duration="200"/>
            <item
                android:drawable="@mipmap/bird8"
                android:duration="200"/>
        </animation-list>
    </transition>
</animated-selector>

代码中声明了两个过度动画（帧动画）

5.0以上手机的效果如下：

41.gif

[本章完...]

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

推荐阅读更多精彩内容

  • Android 动画
    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 6,230评论 1赞 38
  • [转]Android三种动画详解
    1 背景 不能只分析源码呀，分析的同时也要整理归纳基础知识，刚好有人微博私信让全面说说Android的动画，所以今...
    未聞椛洺阅读 2,746评论 0赞 10
  • Android动画下篇（属性动画）
    属性动画 属性动画出现的原因 属性动画（Property Animation）是在 Android 3.0（API...
    luoqiang108阅读 1,182评论 0赞 1
  • Android动画
    Animation Animation类是所有动画（scale、alpha、translate、rotate）的基...
    四月一号阅读 1,936评论 0赞 10
  • Android 动画
    动画基础概念 动画分类 Android 中动画分为两种，一种是 Tween 动画、还有一种是 Frame 动画。 ...
    Rtia阅读 1,256评论 0赞 6