Android控件FlowLikeView實作點贊動畫

現在市面上直播類的應用可以說是一抓一大把，随随便便就以什麼主題來開發個直播App，說白了就想在這領域分杯羹。在使用這些應用過程中其實不難發現，在所有的直播界面，少不了的就是各種打賞、各種點贊。今天自己就針對點贊功能敲了一下，代碼不多，主要是涉及到動畫運動軌迹運算，這裡需借助貝塞爾曲線相關知識，我使用三階貝塞爾曲線來實作軌迹動畫。

運作效果

一、具體實作流程

仔細分析整個點贊過程可以發現，首先是“愛心”的出現動畫，然後是“愛心”以類似氣泡的形式向上運動。

“愛心”的出現動畫

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

複制

這裡使用了屬性動畫來改變“愛心”圖檔控件在螢幕上的狀态，具體使用了控件透明度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，因為“愛心”在上浮的過程中并不是以某一直線運動的，而是通過一條不規則的曲線往上浮，而我們知道 TypeEveluator 的作用就是根據動畫的變化率來設定控件屬性的目前值，具體算法實作就是使用三階貝塞爾曲線公式:

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

private class CurveEvaluator implements TypeEvaluator<PointF  {

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

  // 這裡運用了三階貝塞兒曲線的公式，參照上面公式
  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;

  // 二階貝塞兒曲線，具體公式請上網查閱
//   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

複制

然後在點選響應事件中調用 FlowLikeView 執行個體的 addLikeView() 方法可以啦。當然，記得在動畫結束後将 view 從容器中 remove 調哦。

源碼下載下傳

以上就是本文的全部内容，希望對大家的學習有所幫助。