動腦學院高級ui課程9.1:貝塞爾曲線簡單介紹

相信很多人都聽說過貝塞爾曲線夭问,但是作為Android程序員的我們可能也沒有具體的使用過貝塞爾曲線!好吧捧杉!是我之前沒用過.......
關(guān)于貝塞爾曲線的介紹我就不多羅嗦了晚上有很多的文章陕见,這里我給出一篇供大家參考:
http://blog.csdn.net/cdnight/article/details/48468653
這里給出一個github的開源庫味抖,大家可以看看貝塞爾曲線的效果:
https://github.com/venshine/BezierMaker
挺好玩的,總的來說貝塞爾曲線最低為2階且理論上無上限蜕着。
本篇文章通過一個簡單的例子红柱,來初步探索一下貝塞爾曲線蓖乘,廢話不多說我們開始锤悄。

獻上效果圖:

1.gif

是不是挺有意思的呢零聚?

實現(xiàn)思路:
1、畫一條路徑
通過Path工具類
2隶症、獲取手指移動的點的坐標岗宣,并將該點作為貝塞爾曲線的控制點
重寫onTouchEvent()方法
3、實現(xiàn)回彈動畫
自定義一個Animtion耗式,當然也可以不自定義

具體代碼實現(xiàn)
設(shè)置畫筆:

private void init() {
    pointA = new Point(100, 300);
    pointB = new Point(500, 300);

    pointCenter = new Point(200, 300);

    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setAntiAlias(true);
}

畫路徑:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bezierPath.reset();
        bezierPath.moveTo(pointA.x, pointA.y);
        //quadTo方法用于畫貝塞爾曲線
        bezierPath.quadTo(pointCenter.x, pointCenter.y, pointB.x, pointB.y);
        //閉合path
//        bezierPath.close();
        canvas.drawPath(bezierPath, mPaint);
    }

這里要注意的是path的quadTo(int cx刊咳,int cy彪见,int px娱挨,int py)方法,這個方法就是用于畫貝塞爾曲線的酵镜。參數(shù)cx、cy分別表示控制點的x笋婿、y坐標顿颅,px足丢、py分別表示結(jié)束點的x、y坐標斩跌。要注意rQuadTo()方法的區(qū)別

重寫onTouchEvent方法:

@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    int x = 0;
    int y = 0;
    switch (action) {

        case MotionEvent.ACTION_DOWN: {

        }
        case MotionEvent.ACTION_MOVE: {
            x = (int) event.getX();
            y = (int) event.getY();
            pointCenter.set(x, y);
        }
        break;
        case MotionEvent.ACTION_UP: {
            x = (int) event.getX();
            y = (int) event.getY();

            startCallbackAnim(x, y);
        }
        break;

    }
    invalidate();
    return true;
}

最后寫一個動畫:

private void startCallbackAnim(int x, int y) {
    ResetAnimation animation = new ResetAnimation(x, y);
    animation.setDuration(300);
    this.startAnimation(animation);
}

/**
* 自定義一個會彈動畫
*/
class ResetAnimation extends Animation {

    int orginX;
    int orginY;

    public ResetAnimation(int x, int y) {
        orginX = x;
        orginY = y;
    }

    /**
    * 這個方法是為一個自定義動畫需要重寫的方法
    *
    * @param interpolatedTime 動畫時間0~1.0
    * @param t
    */
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        int newX = (int) ((orginX - 200) * (1 - interpolatedTime) + 200);
        int newY = (int) ((orginY - 300) * (1 - interpolatedTime) + 300);
        pointCenter.set(newX, newY);
        invalidate();
        super.applyTransformation(interpolatedTime, t);
    }
}

代碼很簡單大家可以自己去實現(xiàn)以下耀鸦!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啸澡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子嗅虏,更是在濱河造成了極大的恐慌,老刑警劉巖皮服,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件龄广,死亡現(xiàn)場離奇詭異,居然都是意外死亡择同,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門谆刨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來归斤,“玉大人痊夭,你說我怎么就攤上這事脏里。” “怎么了迫横?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵矾踱,是天一觀的道長。 經(jīng)常有香客問我呛讲,道長返奉,這世上最難降的妖魔是什么吗氏? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮弦讽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘被碗。我一直安慰自己,他們只是感情好锐朴,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布奠宜。 她就那樣靜靜地躺著瞻想,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蘑险。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天泼差,我揣著相機與錄音,去河邊找鬼呵俏。 笑死,一個胖子當著我的面吹牛普碎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播麻车,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼啤斗!你這毒婦竟也來了赁咙?” 一聲冷哼從身側(cè)響起钮莲,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤臂痕,失蹤者是張志新(化名)和其女友劉穎伯襟,沒想到半個月后握童,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡稽揭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年肥卡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片步鉴。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡氛琢,死狀恐怖喊递,靈堂內(nèi)的尸體忽然破棺而出阳似,到底是詐尸還是另有隱情,我是刑警寧澤撮奏,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站泽疆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏于微。R本人自食惡果不足惜青自,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望延窜。 院中可真熱鬧,春花似錦逆瑞、人聲如沸伙单。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽淤井。三九已至,卻和暖如春币狠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贱案。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工止吐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碍扔。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像蕴忆,于是被迫代替她去往敵國和親悲幅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容