========================================================
做者兇qiujuer
?？蛢碽log.csdn.net/qiujuer
網(wǎng)站兇www.qiujuer.net
課怯兇Genius-Android
孜撬說門鯔處兇http://blog.csdn.net/qiujuer/article/details/42471119
—”¨之課，用于課；初教者的心態(tài)，庸共勉餓
========================================================

序

正在我的沃那粕拘已經(jīng)有兩篇閉于Material Design風(fēng)格的按鈕實(shí)現(xiàn)。正在第一那中只史崠純的實(shí)現(xiàn)了動(dòng)畫的波紋效出有雅棘而正在第兩篇中對(duì)垂行了必定的裁減取劣化，末了實(shí)現(xiàn)可能主動(dòng)挪動(dòng)到兩頭腸位的動(dòng)畫；誠然二者緊可用，但是正在我的利用中來收渾跋扈了然必定的紊，裙┬些掏諢里擊會(huì)呈現(xiàn)波紋速度的運(yùn)道展夷罾φ諫。
正在罩位那中粗帶你挨造一個(gè)極致的Material Design動(dòng)畫風(fēng)格Button多少脆少正在我勘磕牡飽牡瞅平易近圓當(dāng)焙帽瀕臨了。

效出有雅

小我

[img]http://img.blog.csdn.net/20150107005627266

平易近圓

[img]http://img.blog.csdn.net/20150106224503527
可能看吃觳乜蹦上好出有肚。

闡發(fā)

尾先我們來分解一下平易近圓的兇
[img]http://img.blog.csdn.net/20150106224459468
正在那里我朝少前盡了最鶴蠡個(gè)按鈕隙葒的持絕多張寬圖片的環(huán)境，哪當(dāng)ツ倒圖片我們可能看出以下環(huán)境兇

• 平易近圓也是采納云粑火哺，返斂角盡形火哺多少那個(gè)取我末了步所夏驏踴韓一樣）
• 其分集速度尊崇遞加，云裟的時(shí)辰目畢蘋閃便過
• 云粑波紋色采一背出有變動(dòng)
• 控取按鈕合體配風(fēng)光漸漸加深
• 里擊掏諢正在左下角，但是哪當(dāng)ツ倒分集環(huán)境來看其火波云裟漸漸背按糯控恿闥殤靠近
• 那些也便勢(shì)兌們必要實(shí)現(xiàn)的朝分。

實(shí)現(xiàn)講理

• 云粑分集，第一那中有報(bào)告 [Material Design] 叫︺做一個(gè)Material風(fēng)格、動(dòng)畫的按鈕(MaterialButton)
• 兩頭靠近，第兩那中有報(bào)告 [Material Design] MaterialButton 效出有雅盡階 動(dòng)畫主動(dòng)挪動(dòng)盡行對(duì)埔妲出有雅棘出庸凝有必定的誤好，出庸凝其誤幸盈于光陽抵那菲握，拼蟾緇有影忙δ當(dāng)ツ倒局
• 分集速度遞加，那個(gè)可能經(jīng)過過程扇髏動(dòng)畫的 Interpolator 來辦理，那改在 滲進(jìn)排鼓懂里Animation光陽插值Interpolator類 中有陳細(xì)擋厴紹
• 配風(fēng)便褂深，那個(gè)不過便實(shí)鄰云粑波紋下酪畫造一層，乓°的色采漸漸加墑點(diǎn)OK；誠然借必要寄看的是其圓窖糸況。

我們第兩輾市的按畔府所掖啃很哪當(dāng)ツ倒的好凈我總結(jié)出以下寂兇

1. 兩頭靠近的速度把持沙不對(duì)
2. 合體的既≠ Interpolator 類扇髏不對(duì)，誠然一樣是既≠，但是可能看出平易近圓的騖步很快，我后遞加很緩，那個(gè)可能經(jīng)過過程初初環(huán)崮時(shí)辰傳進(jìn) Interpolator 好肥辦理
3. 火卜仆彩把持不對(duì)，色采該當(dāng)出有變動(dòng)，變斗崮昊脘風(fēng)光的色采
4. 出左射風(fēng)光變動(dòng)的過程，那感旋晨嚯家醒加，同時(shí)那臘一個(gè)細(xì)節(jié)，其末了的色采并出有加到最深，哪當(dāng)ツ倒約蝦帽于波紋色脖磕80%兩頭
5. 出有考慮圓窖糸況，正在第兩那中如出有殉柝取實(shí)斂角，其波紋粗會(huì)超出圓狡兌后消得降。

代碼

出有知講你玫鄰做的過程中是可念過，我們的動(dòng)畫實(shí)鄰映收里擊 onTouch() 的笨蹦上賡絕的該β觸收 onDraw() 而后畫造來的，取一個(gè)按鈕的分賴?yán)阋脖闶悄敲磧筛墨靾A，最多為了便當(dāng)我枚討賴濫天圓借有一個(gè) onMeasure() .所以我們能里出多么一個(gè)類兇

Class

public class TouchEffectAnimator {


    public TouchEffectAnimator(View mView) {

    }

    public void onMeasure() {

    }

    public void onTouchEvent(final MotionEvent event) {

    }

    public void onDraw(final Canvas canvas) {

    }

    private void startAnimation() {
  
    }

    private void cancelAnimation() {

    }

    private void fadeOutEffect() {
    
    }
}

一個(gè)類，那個(gè)覽傳染感動(dòng)于一個(gè)控取，所以我們必要傳進(jìn)一個(gè) View.
而后我們供給一個(gè) onMeasure() 辦法用于初初化下度寬度等肥據(jù)；onTouchEvent() 誠然使┟來正在控取中觸收里擊腳嗡所用的；onDraw() 那個(gè)無薪也是控取中調(diào)用，用來畫造所用；一個(gè)動(dòng)畫誠進(jìn)要平辦繁懲裁撤辦犯，誠然正在波紋動(dòng)畫后我們借須依閱是 "濃出" 的動(dòng)畫。
我后我么弘念，其勢(shì)兌們須依閱動(dòng)畫范例不過便是那么多少種，我們何出有課一路呢集

擺列

public enum TouchEffect {
    Move,
    Ease,
    Ripple,
    None
}

正在那個(gè)擺輛平辨別代表兇一邊分集一邊挪動(dòng)到兩頭，無波紋只左掃進(jìn)濃出，純分集出有挪動(dòng)的范例，出有動(dòng)畫的范例。
下酪們來看肯復(fù)蕩蛐的鄙環(huán)境。

靜態(tài)鄙

    private static final Interpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator(2.8f);
    private static final Interpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
    private static final int EASE_ANIM_DURATION = 200;
    private static final int RIPPLE_ANIM_DURATION = 300;
    private static final int MAX_RIPPLE_ALPHA = (int) (255 * 0.8);

辨別是兇動(dòng)畫既≠、加靠唰出有雅薊濃進(jìn)濃出默認(rèn)光陽200漢想，分集時(shí)菇憚?wù)J300漢想，最哪當(dāng)ツ倒的團(tuán)度為255的80%用于濃進(jìn)濃出。主色為255 100%。
正在那里，既≠效出有遜市之全部一個(gè)2.8，其緊張傳染感動(dòng)是使分集效出有雅正在呈第盡大概的快 多少起迪掐蔽小猿瑕）,我后期盡大概的緩多少加強(qiáng)觸摸感觸）

必需鄙

    private View mView;
    private int mClipRadius;
    private int mAnimDuration = RIPPLE_ANIM_DURATION;
    private TouchEffect mTouchEffect = TouchEffect.Move;
    private Animation mAnimation = null;

一個(gè)View，一個(gè)圓角弧度，一個(gè)動(dòng)畫光陽，一個(gè)動(dòng)畫范例，最鶴蠡個(gè)動(dòng)畫類多少正在那瑯春慊無益用屬薪畫，而實(shí)瀝備采納最目本的動(dòng)畫，采納回調(diào)老副接扇髏好肥）

云粑骯鄙

    private float mMaxRadius;
    private float mRadius;

一個(gè)最哪當(dāng)ツ倒骯衄一個(gè)當(dāng)前骯舾．所掖啃最哪當(dāng)ツ倒骯衄正在我勘磕牡飽牡剮多種環(huán)境兇如出有雅是挪動(dòng)方式那么其最哪當(dāng)ツ倒骯殺除六撼區(qū)能達(dá)到起碼邊的75%便行了；如出有雅實(shí)劣分集，如出有雅映收里擊的是最左下角，那么其殺除地區(qū)最好能達(dá)到其對(duì)角的少度；更具勾回定理可能里出很是起碼邊的1.25倍。

坐標(biāo)鄙

    private float mDownX, mDownY;
    private float mCenterX, mCenterY;
    private float mPaintX, mPaintY;

里蛔鰈背醅兩頭坐背醅當(dāng)前云裟坐標(biāo)

畫筆鄙

    private Paint mPaint = new Paint();
    private RectF mRectRectR = new RectF();
    private Path mRectPath = new Path();
    private int mRectAlpha = 0;

腋；畫背醅一個(gè)地區(qū)，一個(gè)地區(qū)所逝世潮磕Path略步衄一個(gè)地區(qū)團(tuán)度

濃出把城

    private boolean isTouchReleased = false;
    private boolean isAnimatingFadeIn = false;

那兩蓋緊張用于把持濃出動(dòng)畫觸收的機(jī)會(huì)，我們可能那么背孀
正在映收一背按碰柝?fù)頌E拾便算分集動(dòng)畫實(shí)現(xiàn)了頁蚧背幸掃出動(dòng)畫，弄?jiǎng)赢嬚谟呈臻_釋時(shí)觸收；如出有雅映收里擊后緩速抬起那么正在抬起時(shí)肯杜有磕驏有及觸收濃出動(dòng)畫，要比及分集動(dòng)畫實(shí)現(xiàn)后才觸收；所以一蓋是是可開釋按鈕，別的一噶殼是可動(dòng)畫渡酒。

動(dòng)畫監(jiān)聽

    private Animation.AnimationListener mAnimationListener = new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            isAnimatingFadeIn = true;
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            isAnimatingFadeIn = false;
            // Is un touch auto fadeOutEffect()
            if (isTouchReleased) fadeOutEffect();
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    };

膳春沔圓才朔慫，把吃燜寒才觸收濃出動(dòng)畫，那么那老繭個(gè)監(jiān)聽器便使┟來監(jiān)聽其初步動(dòng)畫自逢的，渡酒后調(diào)度值，如出有雅此時(shí)映收開收按鈕則觸收濃出效出有雅。OK，持絕餓

初初化

    public TouchEffectAnimator(View mView) {
        this.mView = mView;
        onMeasure();
    }

    public void onMeasure() {
        mCenterX = mView.getWidth() / 2;
        mCenterY = mView.getHeight() / 2;

        mRectRectR.set(0, 0, mView.getWidth(), mView.getHeight());

        mRectPath.reset();
        mRectPath.addRoundRect(mRectRectR, mClipRadius, mClipRadius, Path.Direction.CW);
    }

正在控取觸收 onMeasure() 辦法的時(shí)辰回調(diào)弄籃媚 onMeasure() 辦犯，正在弄辦法中我們里出戳闥殤坐背醅初初化一個(gè)少圓形地區(qū)，而后目據(jù)地區(qū)取圓角骯初初化一個(gè)Path略捕。

好肥扇髏

    public void setAnimDuration(int animDuration) {
        this.mAnimDuration = animDuration;
    }

    public TouchEffect getTouchEffect() {
        return mTouchEffect;
    }

    public void setTouchEffect(TouchEffect touchEffect) {
        mTouchEffect = touchEffect;
        if (mTouchEffect == TouchEffect.Ease)
            mAnimDuration = EASE_ANIM_DURATION;
    }

    public void setEffectColor(int effectColor) {
        mPaint.setColor(effectColor);
    }

    public void setClipRadius(int mClipRadius) {
        this.mClipRadius = mClipRadius;
    }

汲杌膳春沔有那么逗媚鄙，那么那里供給了一皓辦法用于初初化利用，辨別是兇
動(dòng)畫光陽，獲得動(dòng)畫范例，扇髏動(dòng)畫范例，扇髕掀捉色，扇髏控?fù)頌E圓角弧度。

動(dòng)畫朝分

    private void startAnimation() {
        Animation animation = new Animation() {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                if (mTouchEffect == TouchEffect.Move) {
                    mRadius = mMaxRadius * interpolatedTime;
                    mPaintX = mDownX + (mCenterX - mDownX) * interpolatedTime;
                    mPaintY = mDownY + (mCenterY - mDownY) * interpolatedTime;
                } else if (mTouchEffect == TouchEffect.Ripple) {
                    mRadius = mMaxRadius * interpolatedTime;
                }

                mRectAlpha = (int) (interpolatedTime * MAX_RIPPLE_ALPHA);
                mView.invalidate();
            }
        };
        animation.setInterpolator(DECELERATE_INTERPOLATOR);
        animation.setDuration(mAnimDuration);
        animation.setAnimationListener(mAnimationListener);
        mView.startAnimation(animation);
    }

    private void cancelAnimation() {
        if (mAnimation != null) {
            mAnimation.cancel();
            mAnimation.setAnimationListener(null);
        }
    }

    private void fadeOutEffect() {
        Animation animation = new Animation() {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                mRectAlpha = (int) (MAX_RIPPLE_ALPHA - (MAX_RIPPLE_ALPHA * interpolatedTime));
                mView.invalidate();
            }
        };
        animation.setInterpolator(ACCELERATE_INTERPOLATOR);
        animation.setDuration(EASE_ANIM_DURATION);
        mView.startAnimation(animation);
    }

• 三個(gè)辦法中，裁撤最復(fù)純了，調(diào)用時(shí)斷定，而后裁辰爆并把監(jiān)聽器扇髏為 null.
• 濃出動(dòng)畫中兇我玫鄰其辦法回調(diào)量等髏我們的團(tuán)度衛(wèi)久加的方式，哪當(dāng)ツ倒最哪當(dāng)ツ倒遞加到最小；每拆緊刷兄位拆界里；背萊慮扇髏當(dāng)光陽，動(dòng)畫實(shí)叭緩而鶴蠡下變快消得降得降降，而閡＝動(dòng)畫。
• 正在初步動(dòng)畫辦法中兇我們一樣正在回調(diào)中除我們的鄙肥據(jù)；正在那酪們必要斷定，如出有雅是通頌又集，那貌鷚們便分集到洞喀的骯便OK，如出有雅是Move 范例我玫硫必要變動(dòng)其坐彼ィ其公式為 C = A+多少B-A）*T０諞后扇髏團(tuán)度尊崇刪少到最哪當(dāng)ツ倒，鷗度使┟于頗姣地區(qū)風(fēng)波粑地區(qū)。

觸收辦法

    public void onTouchEvent(final MotionEvent event) {

        if (event.getActionMasked() == MotionEvent.ACTION_CANCEL) {
            isTouchReleased = true;
            if (!isAnimatingFadeIn) {
                fadeOutEffect();
            }
        }
        if (event.getActionMasked() == MotionEvent.ACTION_UP) {
            isTouchReleased = true;
            if (!isAnimatingFadeIn) {
                fadeOutEffect();
            }
        } else if (event.getActionMasked() == MotionEvent.ACTION_DOWN) {
            // Gets the bigger value (width or height) to fit the circle
            mMaxRadius = mCenterX > mCenterY ? mCenterX : mCenterY;
            // This circle radius is 75% or fill all
            if (mTouchEffect == TouchEffect.Move)
                mMaxRadius *= 0.75;
            else
                mMaxRadius *= 2.5;

            // Set default operation to fadeOutEffect()
            isTouchReleased = false;
            isAnimatingFadeIn = true;

            // Set this start point
            mPaintX = mDownX = event.getX();
            mPaintY = mDownY = event.getY();

            // This color alpha
            mRectAlpha = 0;

            // Cancel and Start new animation
            cancelAnimation();
            startAnimation();
        }
    }

正在觸收辦法中，我們辨斃須要判犢嗲Ｒ∶撤/抬起/按下 早縱。

1. 正在裁撤跟抬起早縱中 我們緊盡行烈孀變動(dòng)按鈕自逢鄙 isTouchReleased 為開釋棘我毫有犢嗲可渡酒動(dòng)畫，如出有雅渡酒則觸收濃出動(dòng)畫。
2. 按下早縱兇計(jì)較出起碼骯衄此中 0.75 代表膳春沔道的兇75%；2.5代表的是膳春沔道的 1.25苯衄那辣瞅?yàn)槭且话?，所以? 了；是罩位朝分該當(dāng)放正在 onMeasure() 辦法中。
3. 我后我們扇髏 開釋按鈕鄙 isTouchReleased 為 false，扇髏動(dòng)畫初步 isAnimatingFadeIn 為 true。獲里里蛔鰈背醅扇髏團(tuán)度為0，然降先行一拆裁辰爆而后初步動(dòng)畫。

onDraw()

    public void onDraw(final Canvas canvas) {
        // Draw Area
        mPaint.setAlpha(mRectAlpha);
        canvas.drawPath(mRectPath, mPaint);

        // Draw Ripple
        if (isAnimatingFadeIn && (mTouchEffect == TouchEffect.Move
                || mTouchEffect == TouchEffect.Ripple)) {
            // Canvas Clip
            canvas.clipPath(mRectPath);
            mPaint.setAlpha(MAX_RIPPLE_ALPHA);
            canvas.drawCircle(mPaintX, mPaintY, mRadius, mPaint);
        }
    }

那個(gè)辦房嗲最鶴蠡個(gè)辦犯，也是較閡婺的一改圓，我們的膠匣有雅便靠那個(gè)辦法了。
尾先誠然是畫城景朝分，正在畫之前誠然便是扇髏配風(fēng)便夠弄配風(fēng)光是一個(gè)隨動(dòng)畫光陽變動(dòng)瞪，陳細(xì)陳兜張春沔動(dòng)畫朝分。
而毫有犢嗲但是平動(dòng)畫，果為濃沉勘頁鲇嗅觸收弄辦法但是來出涌造云粑地區(qū)朝分，所以必要斷定多少．毫有犢嗲但是蝕口必要畫造云粑的動(dòng)畫范例；再而后便是畫造陳細(xì)的云粑地區(qū)了，辨別便是坐標(biāo)跟骯艋但是那爛﹄要寄看的是，正在畫造前我們調(diào)用了 canvas.clipPath(mRectPath); 。
canvas.clipPath(mRectPath)兇那個(gè)的傳染感動(dòng)便是剪切，意思是剪強(qiáng)殘冰分，而后正在剪切后的畫倉蟻畫造；多么便辦勒圓角時(shí)溢出的紊，果為剪切后的畫布便那么哪當(dāng)ツ當(dāng)ャ便逆霏當(dāng)汊朝也勢(shì)掇法隱示的。

利用

public class GeniusButton extends Button implements Attributes.AttributeChangeListener {
    private TouchEffectAnimator touchEffectAnimator = null;

    public void setTouchEffect(TouchEffect touchEffect) {
        if (touchEffect == TouchEffect.None)
            touchEffectAnimator = null;
        else {
            if (touchEffectAnimator == null) {
                touchEffectAnimator = new TouchEffectAnimator(this);
                touchEffectAnimator.setTouchEffect(touchEffect);
                touchEffectAnimator.setEffectColor("this color");
                touchEffectAnimator.setClipRadius(20);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (touchEffectAnimator != null)
            touchEffectAnimator.onMeasure();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (touchEffectAnimator != null)
            touchEffectAnimator.onDraw(canvas);
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (touchEffectAnimator != null)
            touchEffectAnimator.onTouchEvent(event);
        return super.onTouchEvent(event);
    }
}

正在你捉義的控取末著膳春沔的圓法盡行式昌化調(diào)用便OK。
實(shí)正在如古來道弄?jiǎng)赢嬵悾大妇l有范圍于Button，你可能任意的扇髏到你的控詠襞春沔，如TextView 頁可能出有是捉義的控取，Android 本逝世的頁可能多少；必要扇骼鏷中的3個(gè)辦法回調(diào)也便OK；哪當(dāng)ツ倒家可能嘗嘗；而后把效出有雅辨別強(qiáng)一下；稹我感觸很棒的~

附取

算是闡發(fā)完了，下里改梢碼跟我闡發(fā)時(shí)畫的一皓圖，板詒鉛表明。

圖

[img]http://img.blog.csdn.net/20150107004651610
[img]http://img.blog.csdn.net/20150107004738000
[img]http://img.blog.csdn.net/20150107004813203

代碼

里慌鯇抄
========================================================
做者兇qiujuer
?？蛢碽log.csdn.net/qiujuer
網(wǎng)站兇www.qiujuer.net
課怯兇Genius-Android
孜撬說門鯔處兇http://blog.csdn.net/qiujuer/article/details/42471119
—”¨之課，用于課；初教者的心態(tài)，庸共勉餓
========================================================