這篇文章主要講解了“Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫”吧!

現(xiàn)在市面上直播類的應(yīng)用可以說是一抓一大把,隨隨便便就以什么主題來開發(fā)個(gè)直播App,說白了就想在這領(lǐng)域分杯羹。在使用這些應(yīng)用過程中其實(shí)不難發(fā)現(xiàn),在所有的直播界面,少不了的就是各種打賞、各種點(diǎn)贊。今天自己就針對(duì)點(diǎn)贊功能敲了一下,代碼不多,主要是涉及到動(dòng)畫運(yùn)動(dòng)軌跡運(yùn)算,這里需借助 貝塞爾曲線 相關(guān)知識(shí),我使用三階貝塞爾曲線來實(shí)現(xiàn)軌跡動(dòng)畫。
運(yùn)行效果

一、具體實(shí)現(xiàn)流程
仔細(xì)分析整個(gè)點(diǎn)贊過程可以發(fā)現(xiàn),首先是“愛心”的出現(xiàn)動(dòng)畫,然后是“愛心”以類似氣泡的形式向上運(yùn)動(dòng)。
“愛心”的出現(xiàn)動(dòng)畫
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)畫來改變“愛心”圖片控件在屏幕上的狀態(tài),具體使用了控件透明度Alpha、控件的縮放程度 Scale 等屬性動(dòng)畫。
“愛心“的上浮軌跡動(dòng)畫
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)椤皭坌摹痹谏细〉倪^程中并不是以某一直線運(yùn)動(dòng)的,而是通過一條不規(guī)則的曲線往上浮,而我們知道 TypeEveluator 的作用就是根據(jù)動(dòng)畫的變化率來設(shè)置控件屬性的當(dāng)前值,具體算法實(shí)現(xiàn)就是使用三階貝塞爾曲線公式:

其中 P0 是動(dòng)畫的起點(diǎn),P3 是動(dòng)畫的終點(diǎn),而另外兩點(diǎn)P1、P2是則作為三階貝塞爾曲線的控制點(diǎn)。具體P1、P2要去什么值,這個(gè)憑經(jīng)驗(yàn),感覺差不多就行哈 ^_^
private class CurveEvaluator implements TypeEvaluator<PointF> {
// 由于這里使用的是三階的貝塞兒曲線, 所以我們要定義兩個(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;
}
}二、使用操作
<com.anenn.flowlikeviewlib.FlowLikeView android:id="@+id/flowLikeView" android:layout_width="75dp" android:layout_height="200dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@android:color/transparent" android:includeFontPadding="false" android:onClick="addLikeView" android:text="Like" android:textColor="#0099cc" android:textSize="18sp" android:textStyle="bold" /> </com.anenn.flowlikeviewlib.FlowLikeView>
然后在點(diǎn)擊響應(yīng)事件中調(diào)用 FlowLikeView 實(shí)例的 addLikeView() 方法可以啦。當(dāng)然,記得在動(dòng)畫結(jié)束后將 view 從容器中 remove 調(diào)哦。
感謝各位的閱讀,以上就是“Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
當(dāng)前題目:Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫-創(chuàng)新互聯(lián)
分享路徑:http://www.chinadenli.net/article16/psodg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容