Android 轮子之点赞红心动画

最新推荐文章于 2024-08-30 12:42:41 发布
最新推荐文章于 2024-08-30 12:42:41 发布
阅读量1.1k 收藏 12
点赞数 1
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44819566/article/details/110629858
版权

Android 轮子之点赞红心动画

废话不多说,直接上效果图:

效果图(1.1):
在这里插入图片描述

老套路先来分析:

  • 屏幕上有3个按钮,模仿点赞,关注与转发,点击点赞和转发的时候在他的上方弹出一❤
  • ❤颜色是随机的,向上飘移,并在2s之后消失
  • 随机5个❤

画❤

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);
    }
  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         ......
    }

   @Override
    protected 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);
        }
    }
	@Override
    protected 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);
        }
    }
	 @Override
    protected 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):
里插入图片描述](https://img-blog.csdnimg.cn/20201204105709978.png)
可以看到效果图和咋们想的一样,5个❤叠加到一起,并且还有一点点的偏移

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

Log图(2.1):
在这里插入图片描述

添加动画

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

private void initLove() {
        if (valueAnimator != null) {
            //移除上一个valueAnimator
            valueAnimator.removeAllUpdateListeners();

        }
        valueAnimator = ValueAnimator.ofInt(255, 100, 0);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public 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() {
            @Override
            public void onClick(View v) {
                loveView.addAnimation(bt1);
            }
        });

        //转发按钮
        bt3.setOnClickListener(new View.OnClickListener() {
            @Override
            public 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() {
            @Override
            public void onClick(View v) {
                loveView.setLoveNumber(10);
                loveView.setLoveRadius(10);
                loveView.addAnimation(bt1);
            }
        });

        View bt3 = findViewById(R.id.bt3);
        //转发按钮
        bt3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                loveView.setLoveNumber(1);
                loveView.setLoveRadius(5);
                loveView.addAnimation(bt3);
            }
        });

效果图(1.6):

在这里插入图片描述

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

完整代码

猜你喜欢:

Android 轮子之下雪效果

原创不易,您的点赞就是对我最大的支持,留下您的点赞以及评论吧~

在这里插入图片描述

s10g
关注
专栏目录
android 方大动画,Android图片放大缩小动画，竟如此简单
weixin_39646695的博客
05-25 595
有这样一个需求，需要点击图片放大缩小动画，效果：我们借助Android自带动画Animation ，很容易实现初始化对象Animationanimation;privateImageViewiv_good;animation=AnimationUtils.loadAnimation(this,R.anim.anim_small);按钮点击事件iv_good.setOnClickListe...
android实现点赞动画
06-12
android 实现点赞动画，挺炫哦！可参考blog：http://blog.csdn.net/hehaiminginadth/article/details/46473269
android超炫点赞动画
10-18
android超炫点赞动画效果，androidstudio项目
Android点赞效果动画
qq_30837235的博客
12-15 977
1.没有效果图都是扯淡 花里胡哨的.... 2.代码 1.动画视图view import android.animation.Animator import android.animation.AnimatorSet import android.animation.ObjectAnimator import android.content.Context import android.graphics.Path import android.util.AttributeSet import
Android自定义View：点赞动画效果实现
最新发布
weixin_35762258的博客
08-30 1292
本文还有配套的精品资源，点击获取 简介：在Android开发中，自定义View是创建独特交互式界面的关键技能。本Demo通过自定义View展示了点赞时出现的笑脸和哭脸动画，增强了用户互动体验。开发者将学习到如何通过继承View类、重写onDraw()方法、处理触摸事件、实现动画效果以及优化性能来创建动画。同时，本Demo还包括了将自定义View应用到布局文件中的实践，为社交...
Android实现点赞动画
m0_59162559的博客
03-14 948
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
Android点赞的动态动画效果
09-22
直播点赞的动态效果。 随机的动态图片。生成后依据贝塞尔曲线运行后，慢慢的消失。 一个简单的自定义控件。实现动态的点赞效果。
Android-拆轮子-学习Depth唯美的动画效果
08-13
"Android-拆轮子-学习Depth唯美的动画效果"这个主题，旨在深入探索如何在Android应用中实现深度（Depth）感知的精美动画。这类动画通常会给用户带来更真实、更有层次的视觉体验，使交互更加生动有趣。 深度动画在...
Android应用源码水波纹动画效果.zip
07-12
在Android应用开发中，视觉效果和用户体验是至关重要的因素之一，而水波纹动画效果能够为用户界面增添生动和互动性。"Android应用源码水波纹动画效果.zip"这个压缩包提供了一种实现此类效果的参考源码，旨在帮助...
轮子哥安卓开发框架，非常好用
01-15
轮子哥安卓开发框架，一个非常优秀的开源框架。 各项界面，对话框，全面的内存优化、布局优化、代码优化、瘦身优化。 项目中常见的代码进行了封装，或是封装到基类中、或是封装到工具类中、或者封装到框架中，不...
如何造个android Flow流式响应的轮子
08-25
Android Flow流式响应的轮子概念和实现 Android Flow流式响应的轮子是基于Flow概念的异步处理方案，旨在解决异步方法嵌套的问题。Flow流式响应的轮子可以将异步方法组合成一个流式的处理过程，使得代码更加简洁易读...
Android仿QQ点赞动画
05-23
Android仿QQ点赞动画
Android代码-今日头条点赞动画
08-06
SuperLike 仿今日头条点赞喷射表情动画 主要用于点赞防抖事件的交互提示，这里只提供交互View 防抖功能可以根据Rx自行实现 演示 使用 compile 'com.sum.slike:library:0.2.1' 参数含义 <tr> <th align="center">自定义属性名字</th> <th align="center">参数含义</th> </tr> eruption_element_amount 一次喷射的element数量 max_eruption_total 最大同时喷射次数 show_emoji 是否显示Emoji表情喷射动画 show_text 是否显示Combo文字 代码演示 1.基础样式(666 文字) BitmapProvider.Provider provider = new BitmapProvider.Builde
Android自定义View-点赞动画效果View-Demo
03-20
Android自定义View-点赞动画效果View-Demo，点赞后，会有动画效果，绘制箭头。
android 直播点赞 爱心动画
lzan13的专栏
09-14 1664
android 直播点赞
android 点赞动画效果,Android点赞效果
weixin_31328555的博客
05-26 640
今天看到了一个点赞的效果，感觉还不错！于是抄袭了下来！其实它就是一个PopupWindow,点击后显示，然后做了上移和变淡的效果，最后消失！抄袭地址image.png其实主要的代码就一个继承类，和一个控制常量的接口package com.smallcake.utils.popup;import android.content.Context;import android.graphics.Colo...
Android点赞动画
聪哥的专栏
03-18 740
需求：点赞动画一般是由下往上运行，且透明度是有不透明到透明消失。       思路：用到TranslateAnimation，AlphaAnimation。组合动画 AnimationSet       直接看代码：       private void btnLikeAnimation(final ImageView plus_img) { plus_img.setV
Android 简单点赞动画
碧云天丶
08-18 1116
思路 找到Activity中DecorView的RootView 确定点赞控件位于屏幕中的坐标值 将点赞效果View加入到RootView中, 给效果View添加自己想要的动画效果. 重复点击时候, 需要将效果View先移除掉再重新加入到RootView中. 代码 /** * 普通点赞效果, 点击控件后出现一个View上浮 */ public class ViewLikeUtils { public interface ViewLikeClickListener { /**
使用SurfaceView高效实现Android飘赞动画
"使用SurfaceView在Android上实现高效飘赞动画" 在Android开发中，创建动态效果和动画是提升用户体验的重要手段。本文将探讨如何利用SurfaceView来实现一种高效的飘赞动画效果，特别适用于直播应用等需要大量动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

s10g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值