画❤

public class LoveView extends View {//❤半径private float rate = 5;//画笔private Paint paint = new Paint();
public LoveView(Context context) {this(context, null);}public LoveView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public LoveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);paint.setColor(Color.RED);paint.setAntiAlias(true);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);......}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 重置画板path.reset();// 得到屏幕的长宽的一半// 路径的起始点path.moveTo(loveBean.pointF.x, loveBean.pointF.y - 5 * rate);// 根据心形函数画图for (double i = 0; i <= 2 * Math.PI; i += 0.001) {float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));x *= rate;y *= rate;x = loveBean.pointF.x - x;y = loveBean.pointF.y - y;path.lineTo(x, y);}canvas.drawPath(path, paint);}
}class LoveBean {//爱心的位置PointF pointF = new PointF(-100, -100);
}

大家不用纠结这段代码怎么写的,只要有网百度一下就能获取到绘制❤的函数,一套方法就出来了,这里大家只要知道的是 LoveBean类中的PointF pointF = new PointF();是控制的❤的位置,rate是控制的❤的半径即可

效果图(1.2):

初始化5个红心

public class LoveView extends View {//用来存放5个红心List<LoveBean> mList = new ArrayList<>();......public LoveView(Context context, @Nullable AttributeSet attrs, int    defStyleAttr) {super(context, attrs, defStyleAttr);//初始化爱心initData(300, 300);}/*** @param x 初始化x位置* @param y 初始化y位置*          用来初始化爱心*/private void initData(float x, float y) {mList.clear();for (int i = 0; i < 5; i++) {LoveBean loveBean = new LoveBean();loveBean.pointF.x = x;loveBean.pointF.y = y ;mList.add(loveBean);}}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//循环绘制爱心for (int j = 0; j < mList.size(); j++) {LoveBean loveBean = mList.get(j);// 重置画板path.reset();// 得到屏幕的长宽的一半// 路径的起始点path.moveTo(loveBean.pointF.x, loveBean.pointF.y - 5 * rate);// 根据心形函数画图for (double i = 0; i <= 2 * Math.PI; i += 0.001) {float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));x *= rate;y *= rate;x = loveBean.pointF.x - x;y = loveBean.pointF.y - y;path.lineTo(x, y);}canvas.drawPath(path, paint);}}
}

效果图(1.3):

当然,在这里❤不会有什么变化,即使他有5个,因为他的位置半径都是一样的…

接下来让他不要重合在一起,稍微有一点偏移,并添加随机颜色

红心随机颜色以及偏移

class LoveBean {//爱心的位置PointF pointF = new PointF(-100, -100);//爱心的偏移位置PointF deviation = new PointF();//爱心的颜色int color ;
}public class LoveView extends View {//自定义颜色private final int[] colors = {Color.CYAN, Color.YELLOW,  Color.LTGRAY, Color.GREEN, Color.RED};//随机数public Random random = new Random();public LoveView(Context context, @Nullable AttributeSet attrs, int   defStyleAttr) {super(context, attrs, defStyleAttr);//初始化爱心initData(300,300);}/*** @param x 初始化x位置* @param y 初始化y位置*          用来初始化爱心*/private void initData(float x, float y) {mList.clear();for (int i = 0; i < 5; i++) {LoveBean loveBean = new LoveBean();//设置随颜色loveBean.color.add(colors[random.nextInt(colors.length)]);/*** 爱心的偏移位置* random.nextDouble()随机的是0-1之间的小数* random.nextInt(5); 随机的是1-5之间的整数*/loveBean.deviation.x = (float) (random.nextDouble() );loveBean.deviation.y = random.nextInt(5);//现在的位置 = 手指点击的位置 + 偏移的位置  (偏移的位置是为了有一种参差不齐的感觉!)loveBean.pointF.x = x + loveBean.deviation.x ;loveBean.pointF.y = y + loveBean.deviation.y ;mList.add(loveBean);}}@Overrideprotected void onDraw(Canvas canvas) {//循环绘制爱心for (int j = 0; j < mList.size(); j++) {LoveBean loveBean = mList.get(j);//设置颜色paint.setColor(loveBean.color);// 重置画板path.reset();// 得到屏幕的长宽的一半// 路径的起始点Log.i("szjonDraw",loveBean.pointF.x+"\t"+(loveBean.pointF.y - 5 * rate));path.moveTo(loveBean.pointF.x, loveBean.pointF.y - 5 * rate);// 根据心形函数画图for (double i = 0; i <= 2 * Math.PI; i += 0.001) {float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));x *= rate;y *= rate;x = loveBean.pointF.x - x;y = loveBean.pointF.y - y;path.lineTo(x, y);}canvas.drawPath(path, paint);}}
}

效果图(1.4):

可以看到效果图和咋们想的一样,5个❤叠加到一起,并且还有一点点的偏移

来看看Log打印出的每个❤的位置;

Log图(2.1):

添加动画

接下来给红心添加动画,让他动起来即可

private void initLove() {if (valueAnimator != null) {//移除上一个valueAnimatorvalueAnimator.removeAllUpdateListeners();}valueAnimator = ValueAnimator.ofInt(255, 100, 0);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {animatedValue = (int) animation.getAnimatedValue();//设置向上移动initAnimator();//设置透明度for (int i = 0; i < mList.size(); i++) {mList.get(i).alpha = animatedValue;}}});valueAnimator.setDuration(2000);valueAnimator.start();}//向上移动动画private void initAnimator() {for (int i = 0; i < mList.size(); i++) {LoveBean loveBean = mList.get(i);//新的移动位置 = 当前位置 + 偏移位置 //因为是向上移动,所以Y是-去偏移位置float dx = loveBean.pointF.x + loveBean.deviation.x;float dy = loveBean.pointF.y - loveBean.deviation.y;loveBean.pointF = new PointF(dx, dy);}invalidate();}

走到这里红心就可以根据位置来弹出向上移动的动画啦~

接下来给按钮设置点击事件达到刚开头的效果

  //点赞按钮bt1 .setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {loveView.addAnimation(bt1);}});//转发按钮bt3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {loveView.addAnimation(bt3);}});public void addAnimation(View bt){//重新初始化Love和现在的位置initData(bt.getX() + bt.getMeasuredWidth() / 2, bt.getY()  - bt.getMeasuredHeight() / 2 );//重新初始化Love动画initLove();//重新绘制invalidate();}

来看看最终效果吧:

效果图(1.5)

还可以通过setLoveNumber()设置爱心的数量,setLoveRadius()设置爱心的半径

  //点赞按钮bt1 .setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {loveView.setLoveNumber(10);loveView.setLoveRadius(10);loveView.addAnimation(bt1);}});View bt3 = findViewById(R.id.bt3);//转发按钮bt3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {loveView.setLoveNumber(1);loveView.setLoveRadius(5);loveView.addAnimation(bt3);}});

效果图(1.6):

注:
我的项目之中有和Flutter混合开发的东西,如果你没有Flutter下载LoveView即可,否则的话可能你跑不起来哦~

完整代码

Android 轮子之点赞红心动画相关推荐

android 仿qq录音动画,Android实现QQ点赞效果动画 Android动画
版权声明:本文为代码部落原创文章,转载请注明出处. 前言点赞是现在社交app中比较常用的功能,一个小小的点赞按钮如果能加上一些有趣动画,一来告诉用户你已经点了赞(这是对一些手残党极大的福音),二来人 ...
html实现点赞动画效果代码,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...
用html和css怎么做出点击关注红心,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...
android点赞的动画效果,android实现点赞动画
想让APP给人一个好的映像,无非使自己实现的功能更加炫丽!! 接下来给大家介绍下点赞的一个动画效果: 接下来看看是如何实现的: 简单布局如下: xmlns:tools="http://sch ...
android listview高级,Android中Listview点赞功能的实现
最近这段时间一直在看Android,利用Listview去实现点赞功能,下面给大家介绍下基本思路. 基本思路: 进入界面–>获取数据–> 在Listview中显示–> 通过map集合 ...
Android自定义下拉刷新动画--仿百度外卖下拉刷新
好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错.好了废话不多说了,开始我们今天的主题吧.现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前 ...
iOS动画系列之九：实现点赞的动画及播放起伏指示器
iOS动画系列,共十篇.现在写到第九篇啦.感兴趣的可以通过下面的传输门进到其他几篇文章里面. 第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理.做一个带时分秒指针的时钟动画(上) 第 ...
Android源码解析(一)动画篇-- Animator属性动画系统
Android源码解析-动画篇 Android源码解析(一)动画篇-- Animator属性动画系统 Android源码解析(二)动画篇-- ObjectAnimator Android在3.0版本中 ...
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators（1）
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators(1) RecyclerView是比ListView和GridView更为强大的布局视图, ...

Android 轮子之点赞红心动画

Android 轮子之点赞红心动画

画❤

初始化5个红心

红心随机颜色以及偏移

添加动画

Android 轮子之点赞红心动画相关推荐

最新文章

热门文章