• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

AnimatedIcons: Radio Button

Android cps12345 1年前 (2020-06-25) 321次浏览 0个评论

实现按钮动画效果

useanimations.com上有一个不错的微动画库,   其中包含一些有用的动画,这些动画特别适合动画按钮。

这些都是免费的,可以从Lottie动画中下载。对于已经使用Lottie的用户,他们可以按原样使用这些动画。

但是在没有使用Lottie的情况下,如何来进行操作勒?我们将研究如何将其中一些动画创建为Animated Vector Drawables,以显示一些有用的AVD技术

AnimatedIcons: Radio Button

 

 

 

 

 

 

 

我们这次要实现的是上面的单选按钮的设计,该按钮从处于未选中状态的简单圆圈变为选中框。最初有一个缩放效果,然后是圆圈部分的轮廓逐渐增大,勾可以扩展到圆圈之外。

让我们开始考虑外圆本身,通过操纵圆的笔划路径trimPathStarttrimPathEndk 可以实现圆的分离。

res/drawable/radio_button_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="64dp"
    android:height="64dp"
    android:viewportWidth="64"
    android:viewportHeight="64">

    <group
        android:name="group"
        android:rotation="45"
        android:pivotX="32"
        android:pivotY="32">

        <path
            android:name="circle"
            android:pathData="M32,8 A24,24 0 1 1 31.99,8 z"
            android:strokeWidth="5"
            android:strokeColor="@android:color/white"
            android:strokeLineCap="round"
            android:trimPathStart="0.125"
            android:trimPathEnd="0.95"/>

        <path
            android:name="tick"
            android:pathData="M26,36 L36,36 L38,4"
            android:strokeWidth="5"
            android:strokeColor="@android:color/white"
            android:strokeLineJoin="round"
            android:strokeLineCap="round" />
    </group>
</vector>

代码由3个部分组成,一个Group以及圆圈和对勾两个路径。实际上面的代码表现为:

AnimatedIcons: Radio Button

圆是从中心的最高点绘制的,非对称trimPathStarttrimPathEnd值将路径与顶部中心分开。勾几乎垂直呈现以穿过该间隙。

将Group围绕中心枢轴点旋转45º,完整的图像呈现如下:

AnimatedIcons: Radio Button

添加启动时候的动画代码:

res/animator/radio_button_push_start.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/radio_button_duration"
    android:repeatCount="0"
    android:repeatMode="restart"
    android:valueFrom="1.0"
    android:valueTo="1.0"
    android:valueType="floatType">

    <propertyValuesHolder android:propertyName="scaleX">
        <keyframe
            android:fraction="0"
            android:value="1.0" />
        <keyframe
            android:fraction="0.15"
            android:value="0.9" />
        <keyframe
            android:fraction="0.3"
            android:value="1.0" />
        <keyframe
            android:fraction="1.0"
            android:value="1.0" />
    </propertyValuesHolder>

    <propertyValuesHolder android:propertyName="scaleY">
        <keyframe
            android:fraction="0"
            android:value="1.0" />
        <keyframe
            android:fraction="0.15"
            android:value="0.9" />
        <keyframe
            android:fraction="0.3"
            android:value="1.0" />
        <keyframe
            android:fraction="1.0"
            android:value="1.0" />
    </propertyValuesHolder>
</objectAnimator>

动画代码实现scaleXscaleY 来实现初始时候的收缩

然后实现圆打开的动画:

res/animator/radio_button_circle_open.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/radio_button_duration"
    android:repeatCount="0"
    android:repeatMode="restart"
    android:valueFrom="1.0"
    android:valueTo="1.0"
    android:valueType="floatType">

    <propertyValuesHolder android:propertyName="trimPathStart">
        <keyframe
            android:fraction="0.0"
            android:value="0.0" />
        <keyframe
            android:fraction="0.5"
            android:value="0.0" />
        <keyframe
            android:fraction="0.8"
            android:value="0.125" />
        <keyframe
            android:fraction="1.0"
            android:value="0.125" />
    </propertyValuesHolder>

    <propertyValuesHolder android:propertyName="trimPathEnd">
        <keyframe
            android:fraction="0.0"
            android:value="1.0" />
        <keyframe
            android:fraction="0.5"
            android:value="1.0" />
        <keyframe
            android:fraction="0.8"
            android:value="0.95" />
        <keyframe
            android:fraction="1.0"
            android:value="0.95" />
    </propertyValuesHolder>

</objectAnimator>

 

然后添加上勾的动画:

res/animator/radio_button_tick_show.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/radio_button_duration"
    android:repeatCount="0"
    android:repeatMode="restart"
    android:valueFrom="1.0"
    android:valueTo="1.0"
    android:valueType="floatType">

    <propertyValuesHolder android:propertyName="trimPathEnd">
        <keyframe
            android:fraction="0.0"
            android:value="0.0" />
        <keyframe
            android:fraction="0.5"
            android:value="0.0" />
        <keyframe
            android:fraction="1.0"
            android:value="1.0" />
    </propertyValuesHolder>

</objectAnimator>

然后将动画进行关联:

res/drawable/radio_button_unchecked_to_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/radio_button_unchecked">

    <target
        android:name="group"
        android:animation="@animator/radio_button_push_start" />

    <target
        android:name="circle"
        android:animation="@animator/radio_button_circle_open" />

    <target
        android:name="tick"
        android:animation="@animator/radio_button_tick_show" />
</animated-vector>

最后添加animate-selector,实现完整动画

res/drawable/radio_button.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/unchecked"
        android:drawable="@drawable/radio_button_unchecked"
        android:state_checked="false" />
    <item
        android:id="@+id/checked"
        android:drawable="@drawable/radio_button_checked"
        android:state_checked="true" />

    <transition
        android:drawable="@drawable/radio_button_unchecked_to_checked"
        android:fromId="@id/unchecked"
        android:toId="@id/checked" />

    <transition
        android:drawable="@drawable/radio_button_checked_to_unchecked"
        android:fromId="@id/checked"
        android:toId="@id/unchecked" />
</animated-selector>

最终效果:

AnimatedIcons: Radio Button

 

文章源代码在此处

喜欢 (0)

您必须 登录 才能发表评论!