软件编程
位置:首页>> 软件编程>> Android编程>> Android仿google now效果的呼吸按钮

Android仿google now效果的呼吸按钮

作者:VitoZhangDeveloper  发布时间:2023-06-17 07:58:02 

标签:Android,google,now,呼吸按钮

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

先上图:

Android仿google now效果的呼吸按钮

实现该效果,重要的是我们要如何实现这种动态的呼吸效果,因为是一种非线性运动,直接实现起来有些麻烦,特别是对于像我刚刚入行的菜鸟来说。但是幸好,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) {

}
   });

来源:https://blog.csdn.net/Vi2Zhang/article/details/50359770

0
投稿

猜你喜欢

手机版 软件编程 asp之家 www.aspxhome.com