仿小红书点赞红心效果实战

前一段接了个需求，需要抖音的那种上下切换短视频观看，还必须保证流畅度，产品说看着抖音开发就行，抖音的那种就是我们需要的，我一听，有点上火，抖音开发团队多大，我们就三两个人，还想要抖音般的体验，干开发的真的社会最底层的，虽然据理力争，但是依然失败了。幸幸苦苦搞了几天，搞了出来，虽然流畅度达不到，但是也很接近了。刚提测 就被打了回来，为什么这个点赞不是小红书的那样啊 ，我这脾气，这还能惯着？不是抄抖音吗，没说点赞效果抄小红书啊。和产品怼了起来，最后就开始了研发探索之路。

下面先看小红书的效果：

从图中可以看出，双击屏幕会有一串红心出来，然后收缩消失，手指点击的位置就是红心出现的位置。

笔者当时一看这个动画不简单呀，这个红心效果就比较难搞，不好实现。仔细斟酌一番，想起以前搞直播的时候，碰到过这种类型的效果，设计同学提供动画的json，客户端加载一下就完事。这个时候就必须用到Airbnb开源的一套跨平台的、完整的动画效果解决方案，Lottie动画，适用于 Android、iOS、Web 和 Windows 平台。

implementation com.airbnb.android:lottie:3.4.2

解决完动画，还需要解决监听双击屏幕的位置，这个就比较简单了，直接使用GestureDetector进行手势监听。最后就是动态的添加view用来显示动画，这个时候就需要注意一点，如果一直点击屏幕，就需要不断的在屏幕添上加view，点击过多会造成ANR。那这个问题怎么解决呢，话不多说，先上代码：

lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener { overridefunonAnimationStart(animation: Animator) {} overridefunonAnimationEnd(animation: Animator) { } overridefunonAnimationCancel(animation: Animator) {} overridefunonAnimationRepeat(animation: Animator) {} })

笔者通过记录点击的次数，用一个index记录，然后用于view的id，动画执行结束，调用frameLayout.removeView(),将View从屏幕上及时移除。到这里，就实现了小红书的点赞效果，有需要的小伙伴可以动手试试。后续献上仿抖音效果的短视频文章。下面上笔者实现的效果：

如果有需要同学，可以点击关注加评论，然后私信一下小编，靠前时间发给你！