Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動畫-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比中江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式中江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋中江地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

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

運(yùn)行效果

一、具體實(shí)現(xiàn)流程

仔細(xì)分析整個點(diǎn)贊過程可以發(fā)現(xiàn)，首先是“愛心”的出現(xiàn)動畫，然后是“愛心”以類似氣泡的形式向上運(yùn)動。

“愛心”的出現(xiàn)動畫

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;
}

這里使用了屬性動畫來改變“愛心”圖片控件在屏幕上的狀態(tài)，具體使用了控件透明度Alpha、控件的縮放程度 Scale 等屬性動畫。

“愛心“的上浮軌跡動畫

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;
}

這里我們需要自定義一個估值算法 CurveEveluator，因為“愛心”在上浮的過程中并不是以某一直線運(yùn)動的，而是通過一條不規(guī)則的曲線往上浮，而我們知道 TypeEveluator 的作用就是根據(jù)動畫的變化率來設(shè)置控件屬性的當(dāng)前值，具體算法實(shí)現(xiàn)就是使用三階貝塞爾曲線公式:

其中 P0 是動畫的起點(diǎn)，P3 是動畫的終點(diǎn)，而另外兩點(diǎn)P1、P2是則作為三階貝塞爾曲線的控制點(diǎn)。具體P1、P2要去什么值，這個憑經(jīng)驗，感覺差不多就行哈 ^_^

private class CurveEvaluator implements TypeEvaluator<PointF> {

 // 由于這里使用的是三階的貝塞兒曲線, 所以我們要定義兩個控制點(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;

 // 二階貝塞兒曲線，具體公式請上網(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)然，記得在動畫結(jié)束后將 view 從容器中 remove 調(diào)哦。

感謝各位的閱讀，以上就是“Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動畫這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：Android控件怎么實(shí)現(xiàn)直播App點(diǎn)贊飄心動畫-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article16/psodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、商城網(wǎng)站、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)