微信Android客户端中表情雨效果的实现

最新推荐文章于 2019-01-22 15:12:35 发布

beretz

最新推荐文章于 2019-01-22 15:12:35 发布

阅读量4.7k

点赞数

分类专栏： Android心得文章标签： android 移动开发微信表情雨

本文链接：https://blog.csdn.net/beretz/article/details/19630051

版权

本文详细分析了微信Android客户端中表情雨效果的实现，包括从服务器获取词库和表情图片，监听聊天文字，以及关键的UI展示效果。通过自定义EmotionsView和BackgroundView，实现表情以随机位置、速度和时间从屏幕顶端向底部平移的动画效果。代码示例展示了如何在聊天页面中触发和控制表情雨动画，适配不同屏幕并留有扩展性，为聊天界面增加趣味性。

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

微信android客户端中的表情雨效果在聊天中生动活泼，具体会出现特殊效果的词有恭喜发财、年年有余、想你了、生日快乐、么么哒等等，随着节日来临会有更新词库及图片内容出现。具体效果如下图：

现就其实现过程进行一详细分析。

这个功能可以分为两步走：

第一步是取用服务器词库及表情图片，以及对聊天页面发送的文字的监听，这一点并没有什么要特别注意的，本文略过。

第二步也就是实现表情雨的关键，即UI的展示效果及其中涉及的一系列问题。下面做一简要分析及实现。

从微信表情雨的效果来看，是一张表情图icon以随机位置、随机速度、随机初始时间（皆在指定的范围内）从屏幕顶端向屏幕底端的平移运动，认清了这一点，实现起来逻辑就比较清晰了。按照这一目标，可以自定义一个EmotionsView如下，这里假设使用本地图片drawable/test_icon.png，并设置有20个表情。

public class EmotionsView extends View {    // 表情图片
    Bitmap bitmap_emotion = null;    private boolean isEnd = true;    public boolean isEnd() {
        return isEnd;
    }    public void setEnd(boolean isEnd) {
        this.isEnd = isEnd;
    }    private final Paint mPaint = new Paint();    private static final Random RNG = new Random();    private Coordinate[] emotions = new Coordinate[20];    int view_height = 0;
    int view_width = 0;    private int[] emotionX = new int[] {
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    };
    private int[] emotionY = new int[] {
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    };
    private int[] emotionZ = new int[] {
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,