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

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

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