Android实现红包雨动画效果

本文介绍了Android实现红包雨动画效果，分享给大家，希望对大家有帮助

红包雨

关于实现上面红包雨效果步骤如下：

1.创建一个红包实体类

public class RedPacket {
  public float x, y;
  public float rotation;
  public float speed;
  public float rotationSpeed;
  public int width, height;
  public Bitmap bitmap;
  public int money;
  public boolean isRealRed;
  public RedPacket(Context context, Bitmap originalBitmap, int speed, float maxSize, float minSize, int viewWidth) {
    //获取一个显示红包大小的倍数
    double widthRandom = Math.random();
    if (widthRandom < minSize || widthRandom > maxSize) {
      widthRandom = maxSize;
    }
    //红包的宽度
    width = (int) (originalBitmap.getWidth() * widthRandom);
    //红包的高度
    height = width * originalBitmap.getHeight() / originalBitmap.getWidth();
    int mWidth = (viewWidth == 0) ? context.getResources().getDisplayMetrics().widthPixels : viewWidth;
    //生成红包bitmap
    bitmap = Bitmap.createScaledBitmap(originalBitmap, width, height, true);
    originalBitmap.recycle();
    Random random = new Random();
    //红包起始位置x:[0,mWidth-width]
    int rx = random.nextInt(mWidth) - width;
    x = rx <= 0 ? 0 : rx;
    //红包起始位置y
    y = -height;
    //初始化该红包的下落速度
    this.speed = speed + (float) Math.random() * 1000;
    //初始化该红包的初始旋转角度
    rotation = (float) Math.random() * 180 - 90;
    //初始化该红包的旋转速度
    rotationSpeed = (float) Math.random() * 90 - 45;
    //初始化是否为中奖红包
    isRealRed = isRealRedPacket();
  }
  
  public boolean isContains(float x, float y) {
    //稍微扩大下点击的区域
    return this.x-50 < x && this.x +50 + width > x
        && this.y-50 < y && this.y+50 + height > y;
  }
  
  public boolean isRealRedPacket() {
    Random random = new Random();
    int num = random.nextInt(10) + 1;
    //如果[1,10]随机出的数字是2的倍数 为中奖红包
    if (num % 2 == 0) {
      money = num*2;//中奖金额
      return true;
    }
    return false;
  }
  
  public void recycle() {
    if (bitmap!= null && !bitmap.isRecycled()){
      bitmap.recycle();
    }
  }
}

上面就红包实体类的源码，重点就是在创建红包实体的时候，初始化红包相关的值，如生成红包图片，图片的宽高，红包初始位置，下落速度等。比较简单。

2.自定义红包雨view

view初始化

 public RedPacketTest(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RedPacketStyle);
    //获取xml中配置的view的style属性，如下落红包数量，下落的基础速度，以及红包图片的最大最小范围
    count = typedArray.getInt(R.styleable.RedPacketStyle_count, 20);
    speed = typedArray.getInt(R.styleable.RedPacketStyle_speed, 20);
    minSize = typedArray.getFloat(R.styleable.RedPacketStyle_min_size, 0.5f);
    maxSize = typedArray.getFloat(R.styleable.RedPacketStyle_max_size, 1.2f);
    typedArray.recycle();
    init();
  }
  
  private void init() {
    //初始化画笔
    paint = new Paint();
    paint.setFilterBitmap(true);
    paint.setDither(true);
    paint.setAntiAlias(true);
    //创建一个属性动画，通过属性动画来控制刷新红包下落的位置
    animator = ValueAnimator.ofFloat(0, 1);
    //绘制view开启硬件加速
    setLayerType(View.LAYER_TYPE_HARDWARE, null);
   //初始化属性动画
    initAnimator();
  }
  private void initAnimator() {
    //每次动画更新的时候，更新红包下落的坐标值
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        long nowTime = System.currentTimeMillis();
        //获取两次动画更新之间的时间，以此来计算下落的高度
        float secs = (float) (nowTime - prevTime) / 1000f;
        prevTime = nowTime;
        for (int i = 0; i < redpacketlist.size(); ++i) {
          RedPacket redPacket = redpacketlist.get(i);
          //更新红包的下落的位置y
          redPacket.y += (redPacket.speed * secs);
          //如果y坐标大于view的高度 说明划出屏幕，y重新设置起始位置，以及中奖属性
          if (redPacket.y > getHeight()) {
            redPacket.y = 0 - redPacket.height;
            redPacket.isRealRed = redPacket.isRealRedPacket();
          }
          //更新红包的旋转的角度
          redPacket.rotation = redPacket.rotation
              + (redPacket.rotationSpeed * secs);
        }
        //重绘
        invalidate();
      }
    });
    //属性动画无限循环
    animator.setRepeatCount(ValueAnimator.INFINITE);
    //属性值线性变换
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(0);
  }

view绘制

 @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获取自定义view的宽度
    mWidth = getMeasuredWidth();
  }
  @Override
  protected void onDraw(final canvas canvas) {
    //遍历红包数组，绘制红包
    for (int i = 0; i < redpacketlist.size(); i++) {
      RedPacket redPacket = redpacketlist.get(i);
      //将红包旋转redPacket.rotation角度后 移动到（redPacket.x，redPacket.y）进行绘制红包
      Matrix m = new Matrix();
      m.setTranslate(-redPacket.width / 2, -redPacket.height / 2);
      m.postRotate(redPacket.rotation);
      m.postTranslate(redPacket.width / 2 + redPacket.x, redPacket.height / 2 + redPacket.y);
      //绘制红包
      canvas.drawBitmap(redPacket.bitmap, m, paint);
    }
  }

红包雨动画开始结束

 
  public void stopRainNow() {
    //清空红包数据
    clear();
    //重绘
    invalidate();
    //动画取消
    animator.cancel();
  }
  
  public void startRain() {
    //清空红包数据
    clear();
    //添加红包
    setRedpacketCount(count);
    prevTime = System.currentTimeMillis();
    //动画开始
    animator.start();
  }
  public void setRedpacketCount(int count) {
    if (mImgIds == null || mImgIds.length == 0)
      return;
    for (int i = 0; i < count; ++i) {
      //获取红包原始图片
      Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), mImgIds[0]);
      //生成红包实体类
      RedPacket redPacket = new RedPacket(getContext(), originalBitmap, speed,maxSize,minSize,mWidth);
      //添加进入红包数组
      redpacketlist.add(redPacket);
    }
  }
  
  public void pauseRain() {
    animator.cancel();
  }
  
  public void restartRain() {
    animator.start();
  }
  
  private void clear() {
    for (RedPacket redPacket :redpacketlist) {
      redPacket.recycle();
    }
    redpacketlist.clear();
  }

红包点击事件

  @Override
  public boolean onTouchEvent(MotionEvent motionEvent) {
    switch (motionEvent.getAction()){
      case MotionEvent.ACTION_DOWN:
        //根据点击的坐标点，判断是否点击在红包的区域
        RedPacket redPacket = isRedPacketClick(motionEvent.getX(), motionEvent.getY());
        if (redPacket != null) {
          //如果点击在红包上，重新设置起始位置，以及中奖属性
          redPacket.y = 0 - redPacket.height;
          redPacket.isRealRed = redPacket.isRealRedPacket();
          if (onRedPacketClickListener != null) {
            onRedPacketClickListener.onRedPacketClickListener(redPacket);
          }
        }
        break;
      case MotionEvent.ACTION_MOVE:
        break;
      case MotionEvent.ACTION_CANCEL:
      case MotionEvent.ACTION_UP:
        break;
    }
    return true;
  }
  //根据点击坐标点，遍历红包数组，看是否点击在红包上
  private RedPacket isRedPacketClick(float x, float y) {
    for (int i = redpacketlist.size() - 1; i >= 0; i --) {
      if (redpacketlist.get(i).isContains(x, y)) {
        return redpacketlist.get(i);
      }
    }
    return null;
  }

关于自定义红包雨view的主要代码以及分析基本完成了。下面是自定义view的使用。

3.自定义view的使用

红包雨Activity

public class RedPacketActivity extends AppCompatActivity implements View.OnClickListener {
  private RedPacketTest redRainView1;
  private Button start, stop;
  private TextView money;
  private int totalmoney = 0;
  AlertDialog.Builder ab;
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.red_rain);
    ab = new AlertDialog.Builder(RedPacketActivity.this);
    start = (Button) findViewById(R.id.start);
    stop = (Button) findViewById(R.id.stop);
    money = (TextView) findViewById(R.id.money);
    redRainView1 = (RedPacketTest) findViewById(R.id.red_packets_view1);
    start.setOnClickListener(this);
    stop.setOnClickListener(this);
  }
  @Override
  public void onClick(View v) {
    if (v.getId() == R.id.start) {
      startRedRain();
    } else if (v.getId() == R.id.stop) {
      stopRedRain();
    }
  }
  
  private void startRedRain() {
    redRainView1.startRain();
    redRainView1.setOnRedPacketClickListener(new RedPacketTest.OnRedPacketClickListener() {
      @Override
      public void onRedPacketClickListener(RedPacket redPacket) {
        redRainView1.pauseRain();
        ab.setCancelable(false);
        ab.setTitle("红包提醒");
        ab.setNegativeButton("继续抢红包", new DialogInterface.OnClickListener() {
          @Override
          public void onClick(DialogInterface dialog, int which) {
            redRainView1.restartRain();
          }
        });
        if (redPacket.isRealRed) {
          ab.setMessage("恭喜你，抢到了" + redPacket.money + "元！");
          totalmoney += redPacket.money;
          money.setText("中奖金额: " + totalmoney);
        } else {
          ab.setMessage("很遗憾，下次继续努力！");
        }
        redRainView1.post(new Runnable() {
          @Override
          public void run() {
            ab.show();
          }
        });
      }
    });
  }
  
  private void stopRedRain() {
    totalmoney = 0;//金额清零
    redRainView1.stopRainNow();
  }

红包雨Activity的xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="Http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#80000000">
  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:src="@drawable/red_packets_bg" />
  <Button
    android:id="@+id/start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="开始"
    />
  <Button
    android:id="@+id/stop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="结束"
    />
  <TextView
    android:id="@+id/money"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:text="中奖金额:"
    android:textSize="18sp"
    android:layout_marginTop="10dp"
    />
  <com.example.test.redpacketrain.RedPacketTest
    android:id="@+id/red_packets_view1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:count="20"
    app:max_size="0.8"
    app:min_size="0.6"
    app:speed="500" />
</RelativeLayout>

自定义view的styleable

<resources>
  <declare-styleable name="RedPacketStyle">
    <attr name="count" fORMat="integer" />
    <attr name="speed" format="integer" />
    <attr name="max_size" format="float" />
    <attr name="min_size" format="float" />
  </declare-styleable>
</resources>

完整的自定义view代码

public class RedPacketTest extends View {
  private int[] mImgIds = new int[]{
      R.drawable.red_packets_icon
  };//红包图片
  private int count;//红包数量
  private int speed;//下落速度
  private float maxSize;//红包大小的范围
  private float minSize;//红包大小的范围
  private int mWidth;//view宽度
  private ValueAnimator animator;//属性动画，用该动画来不断改变红包下落的坐标值
  private Paint paint;//画笔
  private long prevTime;
  private ArrayList<RedPacket> redpacketlist = new ArrayList<>();//红包数组
  public RedPacketTest(Context context) {
    super(context);
    init();
  }
  public RedPacketTest(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RedPacketStyle);
    count = typedArray.getInt(R.styleable.RedPacketStyle_count, 20);
    speed = typedArray.getInt(R.styleable.RedPacketStyle_speed, 20);
    minSize = typedArray.getFloat(R.styleable.RedPacketStyle_min_size, 0.5f);
    maxSize = typedArray.getFloat(R.styleable.RedPacketStyle_max_size, 1.2f);
    typedArray.recycle();
    init();
  }
  
  private void init() {
    paint = new Paint();
    paint.setFilterBitmap(true);
    paint.setDither(true);
    paint.setAntiAlias(true);
    animator = ValueAnimator.ofFloat(0, 1);
    setLayerType(View.LAYER_TYPE_HARDWARE, null);
    initAnimator();
  }
  private void initAnimator() {
    //每次动画更新的时候，更新红包下落的坐标值
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        long nowTime = System.currentTimeMillis();
        float secs = (float) (nowTime - prevTime) / 1000f;
        prevTime = nowTime;
        for (int i = 0; i < redpacketlist.size(); ++i) {
          RedPacket redPacket = redpacketlist.get(i);
          //更新红包的下落的位置y
          redPacket.y += (redPacket.speed * secs);
          //如果y坐标大于view的高度 说明划出屏幕，y重新设置起始位置，以及中奖属性
          if (redPacket.y > getHeight()) {
            redPacket.y = 0 - redPacket.height;
            redPacket.isRealRed = redPacket.isRealRedPacket();
          }
          //更新红包的旋转的角度
          redPacket.rotation = redPacket.rotation
              + (redPacket.rotationSpeed * secs);
        }
        invalidate();
      }
    });
    //属性动画无限循环
    animator.setRepeatCount(ValueAnimator.INFINITE);
    //属性值线性变换
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(0);
  }
  
  public void stopRainNow() {
    //清空红包数据
    clear();
    //重绘
    invalidate();
    //动画取消
    animator.cancel();
  }
  
  public void startRain() {
    //清空红包数据
    clear();
    //添加红包
    setRedpacketCount(count);
    prevTime = System.currentTimeMillis();
    //动画开始
    animator.start();
  }
  public void setRedpacketCount(int count) {
    if (mImgIds == null || mImgIds.length == 0)
      return;
    for (int i = 0; i < count; ++i) {
      //获取红包原始图片
      Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), mImgIds[0]);
      //生成红包实体类
      RedPacket redPacket = new RedPacket(getContext(), originalBitmap, speed,maxSize,minSize,mWidth);
      //添加进入红包数组
      redpacketlist.add(redPacket);
    }
  }
  
  public void pauseRain() {
    animator.cancel();
  }
  
  public void restartRain() {
    animator.start();
  }
  
  private void clear() {
    for (RedPacket redPacket :redpacketlist) {
      redPacket.recycle();
    }
    redpacketlist.clear();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获取自定义view的宽度
    mWidth = getMeasuredWidth();
  }
  @Override
  protected void onDraw(final Canvas canvas) {
    //遍历红包数组，绘制红包
    for (int i = 0; i < redpacketlist.size(); i++) {
      RedPacket redPacket = redpacketlist.get(i);
      //将红包旋转redPacket.rotation角度后 移动到（redPacket.x，redPacket.y）进行绘制红包
      Matrix m = new Matrix();
      m.setTranslate(-redPacket.width / 2, -redPacket.height / 2);
      m.postRotate(redPacket.rotation);
      m.postTranslate(redPacket.width / 2 + redPacket.x, redPacket.height / 2 + redPacket.y);
      //绘制红包
      canvas.drawBitmap(redPacket.bitmap, m, paint);
    }
  }
  @Override
  public boolean onTouchEvent(MotionEvent motionEvent) {
    switch (motionEvent.getAction()){
      case MotionEvent.ACTION_DOWN:
        //根据点击的坐标点，判断是否点击在红包的区域
        RedPacket redPacket = isRedPacketClick(motionEvent.getX(), motionEvent.getY());
        if (redPacket != null) {
          //如果点击在红包上，重新设置起始位置，以及中奖属性
          redPacket.y = 0 - redPacket.height;
          redPacket.isRealRed = redPacket.isRealRedPacket();
          if (onRedPacketClickListener != null) {
            onRedPacketClickListener.onRedPacketClickListener(redPacket);
          }
        }
        break;
      case MotionEvent.ACTION_MOVE:
        break;
      case MotionEvent.ACTION_CANCEL:
      case MotionEvent.ACTION_UP:
        break;
    }
    return true;
  }
  //根据点击坐标点，遍历红包数组，看是否点击在红包上
  private RedPacket isRedPacketClick(float x, float y) {
    for (int i = redpacketlist.size() - 1; i >= 0; i --) {
      if (redpacketlist.get(i).isContains(x, y)) {
        return redpacketlist.get(i);
      }
    }
    return null;
  }
  public interface OnRedPacketClickListener {
    void onRedPacketClickListener(RedPacket redPacket);
  }
  private OnRedPacketClickListener onRedPacketClickListener;
  public void setOnRedPacketClickListener(OnRedPacketClickListener onRedPacketClickListener) {
    this.onRedPacketClickListener = onRedPacketClickListener;
  }
}

最后

您可能感兴趣的文章:教你一步步实现Android微信自动抢红包Android辅助功能AccessibilityService与抢红包辅助Android实现QQ抢红包插件Android中微信抢红包插件原理解析及开发思路Android抢红包插件实现原理浅析Android辅助功能实现自动抢红包(附源码)分享Android微信红包插件Android实现微信自动抢红包的程序Android微信自动抢红包插件优化和实现SurfaceView实现红包雨平移动画