Android基于貝塞爾曲線實(shí)現(xiàn)的點(diǎn)贊效果

前一階段由于項(xiàng)目需要實(shí)現(xiàn)一個(gè)點(diǎn)贊效果虎忌,后來通過貝塞爾曲線實(shí)現(xiàn)了該效果。效果如下

我們這里使用的是三階貝塞爾曲線。



三階貝塞爾曲線代碼如下

import android.animation.TypeEvaluator;
import android.graphics.PointF;

public class BezierEvaluator implements TypeEvaluator<PointF> {

    private PointF pointF1;
    private PointF pointF2;

    public BezierEvaluator(PointF pointF1, PointF pointF2) {
        this.pointF1 = pointF1;
        this.pointF2 = pointF2;
    }

    @Override
    public PointF evaluate(float time, PointF startValue,
                           PointF endValue) {

        float timeLeft = 1.0f - time;
        PointF point = new PointF();//結(jié)果

        point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
                + 3 * timeLeft * timeLeft * time * (pointF1.x)
                + 3 * timeLeft * time * time * (pointF2.x)
                + time * time * time * (endValue.x);

        point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
                + 3 * timeLeft * timeLeft * time * (pointF1.y)
                + 3 * timeLeft * time * time * (pointF2.y)
                + time * time * time * (endValue.y);
        return point;
    }
}
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        like = (ImageView) findViewById(R.id.like);
        like.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                PointF pointP0 = new PointF();//p0
                pointP0.x = like.getX();
                pointP0.y = like.getY();
                original = pointP0;

                PointF pointP3 = new PointF();//p3
                pointP3.x = pointP0.x - 250;
                pointP3.y = pointP0.y - 300;

                PointF pointP1 = new PointF();//p1
                pointP1.x = pointP0.x - 50;
                pointP1.y = pointP0.y - 300;

                PointF pointP2 = new PointF();//p2
                pointP2.x = pointP0.x - 200;
                pointP2.y = pointP0.y - 300;

                // 初始化一個(gè)貝塞爾計(jì)算器- - 傳入
                BezierEvaluator evaluator = new BezierEvaluator(pointP1,
                        pointP2);
                ValueAnimator animator = ValueAnimator.ofObject(evaluator, pointP0,
                        pointP3);
                animator.addUpdateListener(new BezierListener(like));
                animator.setTarget(like);
                animator.setDuration(1500);
                animator.start();
            }
        });

    }
  private class BezierListener implements ValueAnimator.AnimatorUpdateListener {
        private ImageView target;

        public BezierListener(ImageView target) {
            this.target = target;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //更新值之后更新UI
            PointF pointF = (PointF) animation.getAnimatedValue();
            target.setX(pointF.x);
            target.setY(pointF.y);
            // 這里順便做一個(gè)alpha動(dòng)畫
            target.setAlpha(1 - animation.getAnimatedFraction());
            target.setScaleX(1 + animation.getAnimatedFraction());
            target.setScaleY(1 + animation.getAnimatedFraction());
            if (animation.getAnimatedFraction() == 1) {
                target.setX(original.x);
                target.setY(original.y);
                target.setAlpha(1.0f);
                target.setScaleX(1);
                target.setScaleY(1);
            }
        }
    }

這里擴(kuò)展效果很多宙址,各位看官可以自己打開腦洞去實(shí)現(xiàn)了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末调卑,一起剝皮案震驚了整個(gè)濱河市抡砂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌恬涧,老刑警劉巖注益,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異溯捆,居然都是意外死亡丑搔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門提揍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啤月,“玉大人,你說我怎么就攤上這事劳跃』阎伲” “怎么了?”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵刨仑,是天一觀的道長强重。 經(jīng)常有香客問我,道長贸人,這世上最難降的妖魔是什么间景? 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮艺智,結(jié)果婚禮上倘要,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好封拧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開白布志鹃。 她就那樣靜靜地躺著,像睡著了一般泽西。 火紅的嫁衣襯著肌膚如雪曹铃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,208評(píng)論 1 299
  • 那天捧杉,我揣著相機(jī)與錄音陕见,去河邊找鬼。 笑死味抖,一個(gè)胖子當(dāng)著我的面吹牛评甜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仔涩,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼忍坷,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了熔脂?” 一聲冷哼從身側(cè)響起佩研,我...
    開封第一講書人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎霞揉,沒想到半個(gè)月后旬薯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡零聚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了些侍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隶症。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖岗宣,靈堂內(nèi)的尸體忽然破棺而出蚂会,到底是詐尸還是另有隱情,我是刑警寧澤耗式,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布胁住,位于F島的核電站,受9級(jí)特大地震影響刊咳,放射性物質(zhì)發(fā)生泄漏彪见。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一娱挨、第九天 我趴在偏房一處隱蔽的房頂上張望余指。 院中可真熱鬧,春花似錦跷坝、人聲如沸酵镜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽淮韭。三九已至垢粮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間靠粪,已是汗流浹背蜡吧。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留庇配,地道東北人斩跌。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像捞慌,于是被迫代替她去往敵國和親耀鸦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

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