現(xiàn)在市面上直播類的應(yīng)用可以說(shuō)是一抓一大把，隨隨便便就以什么主題來(lái)開(kāi)發(fā)個(gè)直播App，說(shuō)白了就想在這領(lǐng)域分杯羹。在使用這些應(yīng)用過(guò)程中其實(shí)不難發(fā)現(xiàn)，在所有的直播界面，少不了的就是各種打賞、各種點(diǎn)贊。今天自己就針對(duì)點(diǎn)贊功能敲了一下，代碼不多，主要是涉及到動(dòng)畫(huà)運(yùn)動(dòng)軌跡運(yùn)算，這里需借助 貝塞爾曲線 相關(guān)知識(shí)，我使用三階貝塞爾曲線來(lái)實(shí)現(xiàn)軌跡動(dòng)畫(huà)。
成都創(chuàng)新互聯(lián)專注于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營(yíng)銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。
運(yùn)行效果
一、具體實(shí)現(xiàn)流程
仔細(xì)分析整個(gè)點(diǎn)贊過(guò)程可以發(fā)現(xiàn)，首先是“愛(ài)心”的出現(xiàn)動(dòng)畫(huà)，然后是“愛(ài)心”以類似氣泡的形式向上運(yùn)動(dòng)。
“愛(ài)心”的出現(xiàn)動(dòng)畫(huà)
重慶分公司
重慶分公司
private AnimatorSet generateEnterAnimation(View target) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(target, "alpha", 0.2f, 1f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, "scaleX", 0.5f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, "scaleY", 0.5f, 1f);
AnimatorSet enterAnimation = new AnimatorSet();
enterAnimation.playTogether(alpha, scaleX, scaleY);
enterAnimation.setDuration(150);
enterAnimation.setTarget(target);
return enterAnimation;
}
這里使用了屬性動(dòng)畫(huà)來(lái)改變“愛(ài)心”圖片控件在屏幕上的狀態(tài)，具體使用了控件透明度Alpha、控件的縮放程度 Scale 等屬性動(dòng)畫(huà)。
“愛(ài)心“的上浮軌跡動(dòng)畫(huà)
private ValueAnimator generateCurveAnimation(View target) {
CurveEvaluator evaluator = new CurveEvaluator(generateCTRLPointF(1), generateCTRLPointF(2));
ValueAnimator valueAnimator = ValueAnimator.ofObject(evaluator,
new PointF((mViewWidth - mPicWidth) / 2, mViewHeight - mChildViewHeight - mPicHeight),
new PointF((mViewWidth) / 2 + (mRandom.nextBoolean() ? 1 : -1) * mRandom.nextInt(100), 0));
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new CurveUpdateLister(target));
valueAnimator.setTarget(target);
return valueAnimator;
}這里我們需要自定義一個(gè)估值算法 CurveEveluator，因?yàn)椤皭?ài)心”在上浮的過(guò)程中并不是以某一直線運(yùn)動(dòng)的，而是通過(guò)一條不規(guī)則的曲線往上浮，而我們知道 TypeEveluator 的作用就是根據(jù)動(dòng)畫(huà)的變化率來(lái)設(shè)置控件屬性的當(dāng)前值，具體算法實(shí)現(xiàn)就是使用三階貝塞爾曲線公式:
其中 P0 是動(dòng)畫(huà)的起點(diǎn)，P3 是動(dòng)畫(huà)的終點(diǎn)，而另外兩點(diǎn)P1、P2是則作為三階貝塞爾曲線的控制點(diǎn)。具體P1、P2要去什么值，這個(gè)憑經(jīng)驗(yàn)，感覺(jué)差不多就行哈 ^_^
private class CurveEvaluator implements TypeEvaluator{ // 由于這里使用的是三階的貝塞兒曲線, 所以我們要定義兩個(gè)控制點(diǎn) private PointF ctrlPointF1; private PointF ctrlPointF2; public CurveEvaluator(PointF ctrlPointF1, PointF ctrlPointF2) { this.ctrlPointF1 = ctrlPointF1; this.ctrlPointF2 = ctrlPointF2; } @Override public PointF evaluate(float fraction, PointF startValue, PointF endValue) { // 這里運(yùn)用了三階貝塞兒曲線的公式，參照上面公式 float leftTime = 1.0f - fraction; PointF resultPointF = new PointF(); // 三階貝塞兒曲線 resultPointF.x = (float) Math.pow(leftTime, 3) * startValue.x + 3 * (float) Math.pow(leftTime, 2) * fraction * ctrlPointF1.x + 3 * leftTime * (float) Math.pow(fraction, 2) * ctrlPointF2.x + (float) Math.pow(fraction, 3) * endValue.x; resultPointF.y = (float) Math.pow(leftTime, 3) * startValue.y + 3 * (float) Math.pow(leftTime, 2) * fraction * ctrlPointF1.y + 3 * leftTime * fraction * fraction * ctrlPointF2.y + (float) Math.pow(fraction, 3) * endValue.y; // 二階貝塞兒曲線，具體公式請(qǐng)上網(wǎng)查閱 // resultPointF.x = (float) Math.pow(leftTime, 2) * startValue.x + 2 * fraction * leftTime * ctrlPointF1.x // + ((float) Math.pow(fraction, 2)) * endValue.x; // resultPointF.y = (float) Math.pow(leftTime, 2) * startValue.y + 2 * fraction * leftTime * ctrlPointF1.y // + ((float) Math.pow(fraction, 2)) * endValue.y; return resultPointF; } }
二、使用操作
然后在點(diǎn)擊響應(yīng)事件中調(diào)用 FlowLikeView 實(shí)例的 addLikeView() 方法可以啦。當(dāng)然，記得在動(dòng)畫(huà)結(jié)束后將 view 從容器中 remove 調(diào)哦。
源碼下載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
