仿微信聊天炸“屎”效果！！诶，就是玩！

付十一

于 2021-09-12 20:16:34 发布

阅读量305

点赞数

分类专栏： Android 文章标签：微信 android kotlin

本文链接：https://blog.csdn.net/weixin_41943706/article/details/120255261

版权

本文介绍了如何模仿微信8.0的“炸屎”功能，通过实现贝塞尔曲线实现炸弹投掷动画，利用Lottie库制作爆炸效果，以及自定义View绘制并动画化炸开的�表情。整个过程包含IM聊天界面搭建、炸弹投掷、爆炸动画和�炸开效果的详细步骤，是一个娱乐性质的技术实践。

摘要由CSDN通过智能技术生成

Long Long Ago，微信8.0更新了一个“炸屎”的新功能，还蛮有新意。

这两天和朋友聊天触发了这个功能，当时心想，诶！这文章素材不就来了吗？！趁着周末时间，赶紧来实现一下。

我们先来看看整体实现的效果：

本篇文章无技术含量，纯属娱乐，纯属娱乐

思路

经过不断试验，反复查看了微信炸💩的效果，基本上可以将其拆解成几个小部分。

选择炸弹表情，发送后炸弹会以抛物线的形式向对方发送，同时💣会进行翻转；
在💣碰到💩表情的时候，出现爆炸动画；
在动画爆炸的同时，出现大概7个💩表情，随机朝向，做放大效果，最后下移并渐渐消失。

效果已经拆解了，技术方面具体实现思路如下：

IM聊天界面，主要以Recyclerview分为发送方和接收方两种type；
以贝塞尔曲线实现炸弹抛物线的效果，这里用二阶贝塞尔曲线即可；
炸弹抛过去的同时，使用动画进行旋转；
Lottie实现爆炸效果；
缩放、平移、渐变动画实现7个💩的炸出效果。

具体实现

IM聊天界面

Im聊天界面很简单，一个Recyclerview，分为左右两个type，根据type值，分别加载左侧和右侧的布局。

class ImAdapter  : BaseDelegateMultiAdapter<ImMsg?, BaseViewHolder>(){
   
    companion object {
   
        private const val TAG = "ImMsgAdapter"
        private const val TYPE_LEFT = 0
        private const val TYPE_RIGHT = 1
    }

    init {
   
        setMultiTypeDelegate(object : BaseMultiTypeDelegate<ImMsg?>() {
   
            override fun getItemType(data: List<ImMsg?>, position: Int): Int {
   

                if (data[position]?.type == 0) {
   
                    return TYPE_LEFT
                }
                return TYPE_RIGHT
            }
        })
        Objects.requireNonNull(getMultiTypeDelegate())!!
            .addItemType(TYPE_LEFT, R.layout.item_im_left)
            .addItemType(TYPE_RIGHT, R.layout.item_im_right)
    }

    override fun convert(holder: BaseViewHolder, item: ImMsg?) {
   

        if (holder.itemViewType == TYPE_LEFT) {
   
            holder.setText(R.id.tv_chat_left_msg