Android 컨트롤 FlowLikeView 좋아요 애니메이션 구현

현재 시장 에서 생방송 류 의 응용 프로그램 은 한 몫 잡 고 마음대로 어떤 주제 로 생방송 앱 을 개발 하 는 것 이 라 고 할 수 있다.말하자면 이 분야 에서 숟가락 을 나 누고 싶다.이런 앱 을 사용 하 는 과정 에서 모든 생방송 인터페이스 에서 각종 감상,각종 좋아요 가 빠 질 수 없다 는 것 을 알 수 있다.오늘 은 스스로 칭찬 기능 에 대해 두 드 렸 습 니 다.코드 가 많 지 않 습 니 다.주로 애니메이션 운동 궤적 연산 과 관련 되 었 습 니 다.여 기 는베 세 르 곡선관련 지식 을 빌려 저 는 3 단계 베 어 셀 곡선 을 사용 하여 궤적 애니메이션 을 실현 해 야 합 니 다.
실행 효과

1.구체 적 인 실현 절차
전체 좋아요 누 르 는 과정 을 자세히 살 펴 보면 먼저'사랑'의 등장 애니메이션 이 고 그 다음 에'사랑'이 기포 와 비슷 한 형식 으로 위로 운동 하 는 것 을 알 수 있다.
'하트'의 등장 애니메이션

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

여기 서 속성 애니메이션 을 사용 하여'하트'이미지 컨트롤 이 화면 에 있 는 상 태 를 바 꾸 었 고 컨트롤 투명도 알파,컨트롤 의 크기 조정 정도 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 의 역할 이 애니메이션 의 변화 율 에 따라 컨트롤 속성의 현재 값 을 설정 하 는 것 이라는 것 을 알 고 있 습 니 다.구체 적 인 알고리즘 실현 은 3 단계 베 어 셀 곡선 공식 을 사용 하 는 것 입 니 다.

그 중에서 P0 은 애니메이션 의 출발점 이 고 P3 는 애니메이션 의 종점 이 며 다른 두 점 인 P1,P2 는 3 단계 베 세 르 곡선의 제어점 이다.구체 적 으로 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;
 }
}

2.사용 조작

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

그리고 응답 이벤트 에서 플 로 우 Like View 인 스 턴 스 를 누 르 는 addLike View()방법 을 사용 하면 됩 니 다.물론 애니메이션 이 끝 난 후에 view 를 용기 에서 remove 하 는 것 을 기억 하 세 요.
원본 코드다운로드 하 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.