高仿google now效果的呼吸按钮简单实现

       该按钮是我最早接触到为view添加动画效果的需求,刚刚参加安卓开发工作,要求设计一个好看的语音按钮效果,就有了这个成果,但是后来又改方案了,所以我也就没有对该按钮进行封装为一个自定义按钮,本文主要是展示一种合理组合利用animation来实现一些好看的动画效果,只是一种思路。
     先上图:
image

     实现该效果,重要的是我们要如何实现这种动态的呼吸效果,因为是一种非线性运动,直接实现起来有些麻烦,特别是对于像我刚刚入行的菜鸟来说。但是幸好,android的SDK提供了一种叫interpolator属性,通过设置该属性为accelerate_decelerate_interpolato可以实现加速效果,使动画看起来更丰满,更具活力。
     首先,我们需要三个anim文件。
进入效果anim:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true">
    <scale 
        android:fromXScale="0.0"
        android:toXScale="0.9"
        android:fromYScale="0.0"
        android:toYScale="0.9"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
    </set>

呼吸效果anim:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:shareInterpolator="true">
    <scale
        android:fromXScale="0.9"
        android:toXScale="1.0"
        android:fromYScale="0.9"
        android:toYScale="1.0"
        android:duration="1500"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"/>
    </set>

退出效果anim:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">
    <scale 
        android:fromXScale="0.95"
        android:toXScale="0.0"
        android:fromYScale="0.95"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
    </set>

    然后是Java代码,代码很简单,在MainActivity中,对按钮设置点击事件,唤起开始动画->执行呼吸动画->唤起结束对话。同时对开始和接收的动画进行监听,执行完毕后完成显示和隐藏背景的设置。部分代码:

    private void initView() {
        voice.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!isVisible) {
                    back.startAnimation(animationIn);
                    isVisible = true;
                } else {
                    back.startAnimation(animationExit);
                    isVisible = false;
                }

            }
        });

    }

Animtion动画相关部分代码

    //动画监听
    animationIn.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                back.startAnimation(animationVoice);    //开始呼吸动画
                back.setVisibility(View.VISIBLE);
            }
        });

        animationExit.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                back.clearAnimation();  //清除动画
                back.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

  好了,一个呼吸按钮就成了,有兴趣的可以把呼吸按钮封装一下,做成一个自定义按钮来使用。最后附上github链接:https://github.com/Vi2Zhang/BreathButton

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值