Android学习笔记——用ObjectAnimator平移动画仿微信表情雨的简单实现

   最近需要实现类似微信聊天界面输入文字命中关键字出现Emoji 表情雨的动画效果，自己试着实现了一下，主要就是用 ObjectAnimatior 的 平移 动画，用随机函数控制每个Emoji 的 横，纵坐标和动画持续时间，并且获取屏幕宽度，高度做边界限制。简单做个学习笔记；

     首先，为了简单明了，在布局上添加一个触发表情雨的按钮，触发事件你可以改；

DisplayMetrics dm = getResources().getDisplayMetrics();

        screenWidth = dm.widthPixels;

        screenHeight = dm.heightPixels;

        button = new Button(MainActivity.this);
        button.setText("Emoji Rain");
        layoutParams = new RelativeLayout.LayoutParams(dip2px(MainActivity.this, 320), dip2px(MainActivity.this, 60));
        layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
        relativeLayout.addView(button, 0, layoutParams);

 
    这段代码作用两个，第一用 DisplayMertrics 获取屏幕的宽度，高度；第二 new 一个 button 对象，并将这个button 添加到base布局的底部，用于触发表情雨；

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                for(int i = 0; i< EMOJI_COUNT; i++){

                    addView();
                }

                for(int i = 0; i< EMOJI_COUNT; i++){

                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(views.get(i), "translationY",
                                                      viewsY.get(i), (float)(screenHeight))
                                                      .setDuration(new Random().nextInt(2000) + 2000);
                    objectAnimator.start();
                }
            }
        });

   这段代码给触发表情雨的button 添加了点击监听事件，事件有两个，第一，当button被点击时，调用addView方法添加EMOJI_COUNT这么多的Emoji至屏幕上方不可见位置（有坐标设置），类似赛跑前各位运动员在起跑线各就各位。。第二， 当所有Emoji添加至base布局完成之后，就要为每个Emoji设置下落动画，用的是ObjectAnimator.ofFloat()的纵坐标平移动画；在这里需要特别配置的两个参数分别是 1. 每个Emoji下落前的起始纵坐标，我的demo里给的范围是 -90 到 -530。。。数字没啥特殊含义，要保证Emoji在起始位置在用户可视范围之外，该范围跨度也没啥特殊含义，是用于处理每个Emoji下落的层次效果而设置的。。 

2. 每个Emoji下落的持续时间，因为每个Emoji的起始纵坐标不一样，为了保证每个Emoji的下落速度基本一致，所以设置了下落的持续时间在 2000ms 到 4000ms 之间；

  剩下的代码就是实现工具函数 dip2px()， addView()；需要注意的就是在addView里对每个Emoji设置属性时，横，纵坐标需要随机，并用之前获取的屏幕宽，高限定边界即可；代码如下：

    public static int dip2px(Context context, float dpValue){

        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    public void addView(){

        view = new ImageView(MainActivity.this);
        view.setImageResource(R.drawable.ee_33);
        layoutParams  = new RelativeLayout.LayoutParams(90,90);
        relativeLayout.addView(view,1, layoutParams);
        view.setY(-(new Random().nextInt(440) + 90));
        view.setX(new Random().nextInt(screenWidth - dip2px(MainActivity.this, 100) - 10) + 10);
        view.setZ(new Random().nextInt(10) + 10);

        views.add(view);
        viewsY.add(view.getY());

    }

  效果如下：

  

 

   demo 下载地址： http://download.csdn.net/detail/dxdrush/9412749