android实现直播点赞飘心动画效果

前段时间在写直播的时候，需要观众在看直播的时候点赞的效果，在此参照了腾讯大神写的点赞（飘心动画效果）。下面是效果图：

1.自定义飘心动画的属性

在attrs.xml 中增加自定义的属性

<!-- 飘心动画自定义的属性 -->
 <declare-styleable name="HeartLayout">
 <attr name="initX" format="dimension"/>
 <attr name="initY" format="dimension"/>
 <attr name="xRand" format="dimension"/>
 <attr name="animLengthRand" format="dimension"/>
 <attr name="xPointFactor" format="dimension"/>
 <attr name="animLength" format="dimension"/>
 <attr name="heart_width" format="dimension"/>
 <attr name="heart_height" format="dimension"/>
 <attr name="bezierFactor" format="integer"/>
 <attr name="anim_duration" format="integer"/>
 </declare-styleable>

2.定义飘心默认值

2.1 dimens.xml

<!-- 飘星 -->
 <dimen name="heart_anim_bezier_x_rand">50.0dp</dimen>
 <dimen name="heart_anim_init_x">50.0dp</dimen>
 <dimen name="heart_anim_init_y">25.0dp</dimen>
 <dimen name="heart_anim_length">400.0dp</dimen>
 <dimen name="heart_anim_length_rand">350.0dp</dimen>
 <dimen name="heart_anim_x_point_factor">30.0dp</dimen>

 <dimen name="heart_size_height">27.3dp</dimen>
 <dimen name="heart_size_width">32.5dp</dimen>

2.2 integers.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <integer name="heart_anim_bezier_factor">6</integer>
 <integer name="anim_duration">3000</integer>

</resources>

3.定义飘心动画控制器

3.1 AbstractPathAnimator.java

public abstract class AbstractPathAnimator {
 private final Random mRandom;
 protected final Config mConfig;


 public AbstractPathAnimator(Config config) {
 mConfig = config;
 mRandom = new Random();
 }

 public float randomRotation() {
 return mRandom.nextFloat() * 28.6F - 14.3F;
 }

 public Path createPath(AtomicInteger counter, View view, int factor) {
 Random r = mRandom;
 int x = r.nextInt(mConfig.xRand);
 int x2 = r.nextInt(mConfig.xRand);
 int y = view.getHeight() - mConfig.initY;
 int y2 = counter.intValue() * 15 + mConfig.animLength * factor + r.nextInt(mConfig.animLengthRand);
 factor = y2 / mConfig.bezierFactor;
 x = mConfig.xPointFactor + x;
 x2 = mConfig.xPointFactor + x2;
 int y3 = y - y2;
 y2 = y - y2 / 2;
 Path p = new Path();
 p.moveTo(mConfig.initX, y);
 p.cubicTo(mConfig.initX, y - factor, x, y2 + factor, x, y2);
 p.moveTo(x, y2);
 p.cubicTo(x, y2 - factor, x2, y3 + factor, x2, y3);
 return p;
 }

 public abstract void start(View child, ViewGroup parent);

 public static class Config {
 public int initX;
 public int initY;
 public int xRand;
 public int animLengthRand;
 public int bezierFactor;
 public int xPointFactor;
 public int animLength;
 public int heartWidth;
 public int heartHeight;
 public int animDuration;

 static public Config fromTypeArray(TypedArray typedArray, float x, float y, int pointx, int heartWidth, int heartHeight) {
  Config config = new Config();
  Resources res = typedArray.getResources();
  config.initX = (int) typedArray.getDimension(R.styleable.HeartLayout_initX,
   x);
  config.initY = (int) typedArray.getDimension(R.styleable.HeartLayout_initY,
   y);
  config.xRand = (int) typedArray.getDimension(R.styleable.HeartLayout_xRand,
   res.getDimensionPixelOffset(R.dimen.heart_anim_bezier_x_rand));
  config.animLength = (int) typedArray.getDimension(R.styleable.HeartLayout_animLength,
   res.getDimensionPixelOffset(R.dimen.heart_anim_length));//动画长度
  config.animLengthRand = (int) typedArray.getDimension(R.styleable.HeartLayout_animLengthRand,
   res.getDimensionPixelOffset(R.dimen.heart_anim_length_rand));
  config.bezierFactor = typedArray.getInteger(R.styleable.HeartLayout_bezierFactor,
   res.getInteger(R.integer.heart_anim_bezier_factor));
  config.xPointFactor = pointx;
//  config.heartWidth = (int) typedArray.getDimension(R.styleable.HeartLayout_heart_width,
//   res.getDimensionPixelOffset(R.dimen.heart_size_width));//动画图片宽度
//  config.heartHeight = (int) typedArray.getDimension(R.styleable.HeartLayout_heart_height,
//   res.getDimensionPixelOffset(R.dimen.heart_size_height));//动画图片高度
  config.heartWidth = heartWidth;
  config.heartHeight = heartHeight;
  config.animDuration = typedArray.getInteger(R.styleable.HeartLayout_anim_duration,
   res.getInteger(R.integer.anim_duration));//持续期
  return config;
 }
 }
}

3.2 PathAnimator.java

/**
 * 飘心路径动画器
 */
public class PathAnimator extends AbstractPathAnimator {
 private final AtomicInteger mCounter = new AtomicInteger(0);
 private Handler mHandler;

 public PathAnimator(Config config) {
 super(config);
 mHandler = new Handler(Looper.getMainLooper());
 }

 @Override
 public void start(final View child, final ViewGroup parent) {
 parent.addView(child, new ViewGroup.LayoutParams(mConfig.heartWidth, mConfig.heartHeight));
 FloatAnimation anim = new FloatAnimation(createPath(mCounter, parent, 2), randomRotation(), parent, child);
 anim.setDuration(mConfig.animDuration);
 anim.setInterpolator(new LinearInterpolator());
 anim.setAnimationListener(new Animation.AnimationListener() {
  @Override
  public void onAnimationEnd(Animation animation) {
  mHandler.post(new Runnable() {
   @Override
   public void run() {
   parent.removeView(child);
   }
  });
  mCounter.decrementAndGet();
  }

  @Override
  public void onAnimationRepeat(Animation animation) {

  }

  @Override
  public void onAnimationStart(Animation animation) {
  mCounter.incrementAndGet();
  }
 });
 anim.setInterpolator(new LinearInterpolator());
 child.startAnimation(anim);
 }

 static class FloatAnimation extends Animation {
 private PathMeasure mPm;
 private View mView;
 private float mDistance;
 private float mRotation;

 public FloatAnimation(Path path, float rotation, View parent, View child) {
  mPm = new PathMeasure(path, false);
  mDistance = mPm.getLength();
  mView = child;
  mRotation = rotation;
  parent.setLayerType(View.LAYER_TYPE_HARDWARE, null);
 }

 @Override
 protected void applyTransformation(float factor, Transformation transformation) {
  Matrix matrix = transformation.getMatrix();
  mPm.getMatrix(mDistance * factor, matrix, PathMeasure.POSITION_MATRIX_FLAG);
  mView.setRotation(mRotation * factor);
  float scale = 1F;
  if (3000.0F * factor < 200.0F) {
  scale = scale(factor, 0.0D, 0.06666667014360428D, 0.20000000298023224D, 1.100000023841858D);
  } else if (3000.0F * factor < 300.0F) {
  scale = scale(factor, 0.06666667014360428D, 0.10000000149011612D, 1.100000023841858D, 1.0D);
  }
  mView.setScaleX(scale);
  mView.setScaleY(scale);
  transformation.setAlpha(1.0F - factor);
 }
 }

 private static float scale(double a, double b, double c, double d, double e) {
 return (float) ((a - b) / (c - b) * (e - d) + d);
 }
}

4.定义飘心界面

4.1 HeartView.java

/**
 * 飘心动画的界面
 */
public class HeartView extends ImageView{

 //绘制的时候抗锯齿
 private static final Paint sPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
 private static final Canvas sCanvas = new Canvas();

 private int mHeartResId = R.drawable.heart0;
 private int mHeartBorderResId = R.drawable.heart1;

 private static Bitmap sHeart;
 private static Bitmap sHeartBorder;


 public HeartView(Context context) {
 super(context);
 }

 public HeartView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public HeartView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 public void setDrawable(int resourceId){
 Bitmap heart = BitmapFactory.decodeResource(getResources(), resourceId);
 // Sets a drawable as the content of this ImageView.
 setImageDrawable(new BitmapDrawable(getResources(),heart));
 }

 public void setColor(int color) {
 Bitmap heart = createHeart(color);
 setImageDrawable(new BitmapDrawable(getResources(), heart));
 }

 public void setColorAndDrawables(int color, int heartResId, int heartBorderResId) {
 if (heartResId != mHeartResId) {
  sHeart = null;
 }
 if (heartBorderResId != mHeartBorderResId) {
  sHeartBorder = null;
 }
 mHeartResId = heartResId;
 mHeartBorderResId = heartBorderResId;
 setColor(color);
 }

 public Bitmap createHeart(int color) {
 if (sHeart == null) {
  sHeart = BitmapFactory.decodeResource(getResources(), mHeartResId);
 }
 if (sHeartBorder == null) {
  sHeartBorder = BitmapFactory.decodeResource(getResources(), mHeartBorderResId);
 }
 Bitmap heart = sHeart;
 Bitmap heartBorder = sHeartBorder;
 Bitmap bm = createBitmapSafely(heartBorder.getWidth(), heartBorder.getHeight());
 if (bm == null) {
  return null;
 }
 Canvas canvas = sCanvas;
 canvas.setBitmap(bm);
 Paint p = sPaint;
 canvas.drawBitmap(heartBorder, 0, 0, p);
 p.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP));
 float dx = (heartBorder.getWidth() - heart.getWidth()) / 2f;
 float dy = (heartBorder.getHeight() - heart.getHeight()) / 2f;
 canvas.drawBitmap(heart, dx, dy, p);
 p.setColorFilter(null);
 canvas.setBitmap(null);
 return bm;
 }

 private static Bitmap createBitmapSafely(int width, int height) {
 try {
  return Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 } catch (OutOfMemoryError error) {
  error.printStackTrace();
 }
 return null;
 }
}

4.2 飘心动画路径布局

HeartLayout.java

/**
 * 飘心动画路径
 */
public class HeartLayout extends RelativeLayout implements View.OnClickListener {

 private AbstractPathAnimator mAnimator;
 private AttributeSet attrs = null;
 private int defStyleAttr = 0;
 private OnHearLayoutListener onHearLayoutListener;
 private static HeartHandler heartHandler;
 private static HeartThread heartThread;

 public void setOnHearLayoutListener(OnHearLayoutListener onHearLayoutListener) {
 this.onHearLayoutListener = onHearLayoutListener;
 }

 public interface OnHearLayoutListener {
 boolean onAddFavor();
 }

 public HeartLayout(Context context) {
 super(context);
 findViewById(context);
 }

 public HeartLayout(Context context, AttributeSet attrs) {
 super(context, attrs);
 this.attrs = attrs;
 findViewById(context);
 }

 public HeartLayout(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 this.attrs = attrs;
 this.defStyleAttr = defStyleAttr;
 findViewById(context);
 }

 private Bitmap bitmap;

 private void findViewById(Context context) {
 LayoutInflater.from(context).inflate(R.layout.ly_periscope, this);
 bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_like);
 dHeight = bitmap.getWidth()/2;
 dWidth = bitmap.getHeight()/2;
 textHight = sp2px(getContext(), 20) + dHeight / 2;

 pointx = dWidth;//随机上浮方向的x坐标

 bitmap.recycle();
 }

 private int mHeight;
 private int mWidth;
 private int textHight;
 private int dHeight;
 private int dWidth;
 private int initX;
 private int pointx;

 public static int sp2px(Context context, float spValue) {
 final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
 return (int) (spValue * fontScale + 0.5f);
 }


 public class HeartHandler extends Handler {
 public final static int MSG_SHOW = 1;
 WeakReference<HeartLayout> wf;

 public HeartHandler(HeartLayout layout) {
  wf = new WeakReference<HeartLayout>(layout);
 }

 @Override
 public void handleMessage(Message msg) {
  super.handleMessage(msg);
  HeartLayout layout = wf.get();
  if (layout == null) return;
  switch (msg.what) {
  case MSG_SHOW:
   addFavor();
   break;
  }
 }
 }

 public class HeartThread implements Runnable {

 private long time = 0;
 private int allSize = 0;

 public void addTask(long time, int size) {
  this.time = time;
  allSize += size;
 }

 public void clean() {
  allSize = 0;
 }

 @Override
 public void run() {
  if (heartHandler == null) return;

  if (allSize > 0) {
  heartHandler.sendEmptyMessage(HeartHandler.MSG_SHOW);
  allSize--;
  }
  postDelayed(this, time);
 }
 }

 private void init(AttributeSet attrs, int defStyleAttr) {
 final TypedArray a = getContext().obtainStyledAttributes(
  attrs, R.styleable.HeartLayout, defStyleAttr, 0);

 if (pointx <= initX && pointx >= 0) {
  pointx -= 10;
 } else if (pointx >= -initX && pointx <= 0) {
  pointx += 10;
 } else pointx = initX;


 mAnimator = new PathAnimator(AbstractPathAnimator.Config.fromTypeArray(a, initX, textHight, pointx, dWidth, dHeight));
 a.recycle();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 //获取本身的宽高 这里要注意,测量之后才有宽高
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 initX = mWidth / 2 - dWidth / 2;

 }

 public AbstractPathAnimator getAnimator() {
 return mAnimator;
 }

 public void setAnimator(AbstractPathAnimator animator) {
 clearAnimation();
 mAnimator = animator;
 }

 public void clearAnimation() {
 for (int i = 0; i < getChildCount(); i++) {
  getChildAt(i).clearAnimation();
 }
 removeAllViews();
 }

 private static int[] drawableIds = new int[]{R.drawable.heart0, R.drawable.heart1, R.drawable.heart2, R.drawable.heart3, R.drawable.heart4, R.drawable.heart5, R.drawable.heart6, R.drawable.heart7, R.drawable.heart8,};
 private Random random = new Random();

 public void addFavor() {
 HeartView heartView = new HeartView(getContext());
 heartView.setDrawable(drawableIds[random.nextInt(8)]);
 init(attrs, defStyleAttr);
 mAnimator.start(heartView, this);
 }

 private long nowTime, lastTime;
 final static int[] sizeTable = {9, 99, 999, 9999, 99999, 999999, 9999999,
  99999999, 999999999, Integer.MAX_VALUE};

 public static int sizeOfInt(int x) {
 for (int i = 0; ; i++)
  if (x <= sizeTable[i])
  return i + 1;
 }

 public void addFavor(int size) {
 switch (sizeOfInt(size)) {
  case 1:
  size = size % 10;
  break;
  default:
  size = size % 100;
 }
 if (size == 0) return;
 nowTime = System.currentTimeMillis();
 long time = nowTime - lastTime;
 if (lastTime == 0)
  time = 2 * 1000;//第一次分为2秒显示完

 time = time / (size + 15);
 if (heartThread == null) {
  heartThread = new HeartThread();
 }
 if (heartHandler == null) {
  heartHandler = new HeartHandler(this);
  heartHandler.post(heartThread);
 }
 heartThread.addTask(time, size);
 lastTime = nowTime;
 }

 public void addHeart(int color) {
 HeartView heartView = new HeartView(getContext());
 heartView.setColor(color);
 init(attrs, defStyleAttr);
 mAnimator.start(heartView, this);
 }

 public void addHeart(int color, int heartResId, int heartBorderResId) {
 HeartView heartView = new HeartView(getContext());
 heartView.setColorAndDrawables(color, heartResId, heartBorderResId);
 init(attrs, defStyleAttr);
 mAnimator.start(heartView, this);
 }

 @Override
 public void onClick(View v) {
 int i = v.getId();
 if (i == R.id.img) {
  if (onHearLayoutListener != null) {
  boolean isAdd = onHearLayoutListener.onAddFavor();
  if (isAdd) addFavor();
  }
 }
 }

 public void clean() {
 if (heartThread != null) {
  heartThread.clean();
 }
 }

 public void release() {
 if (heartHandler != null) {
  heartHandler.removeCallbacks(heartThread);
  heartThread = null;
  heartHandler = null;
 }
 }
}

5.飘心动画的使用

5.1 activity_heart_animal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/grey"
  android:alpha="0.5">

 <TextView
  android:id="@+id/member_send_good"
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_gravity="center"
  android:layout_alignParentBottom="true"
  android:layout_alignParentRight="true"
  android:layout_marginRight="30dp"
  android:layout_marginBottom="10dp"
  android:background="@drawable/live_like_icon"
  />

 <!-- 飘心的路径 --> <com.myapplication2.app.newsdemo.view.heartview.HeartLayout
  android:id="@+id/heart_layout"
  android:layout_width="100dp"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_alignParentBottom="true"/>

</RelativeLayout>

5.2 activity 中的使用

heartLayout = (HeartLayout)findViewById(R.id.heart_layout);
 findViewById(R.id.member_send_good).setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  heartLayout.addFavor();
  }
 });

heartLayout.addFavor(); 就是触发飘心动画效果的关键代码

6.参看资料

https://github.com/zhaoyang21cn/Android_Suixinbo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。