呼吸按鈕是我最早接觸到為view添加動畫效果的需求,剛剛參加安卓開發工作,要求設計一個好看的語音按鈕效果,就有了這個成果,但是后來又改方案了,所以我也就沒有對該按鈕進行封裝為一個自定義按鈕,本文主要是展示一種合理組合利用animation來實現一些好看的動畫效果,只是一種思路。
先上圖:

實現該效果,重要的是我們要如何實現這種動態的呼吸效果,因為是一種非線性運動,直接實現起來有些麻煩,特別是對于像我剛剛入行的菜鳥來說。但是幸好,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鏈接:BreathButton
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。