Android,Android实现红包雨动画效果

3
回复
1661
查看
打印 上一主题 下一主题
[复制链接]

429

主题

1140

帖子

1907

安币

手工艺人

楼主
发表于 2017-10-26 10:41:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

        红包雨

        

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

        1.创建一个红包实体类

[Java] 查看源文件 复制代码
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) [0,mWidth-width]
    int rx = random.nextInt(mWidth) - width;
    x = rx <= 0 [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初始化

[Java] 查看源文件 复制代码
 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绘制

[Java] 查看源文件 复制代码
 @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);
    }
  }

        红包雨动画开始结束

[Java] 查看源文件 复制代码
 /**
   *停止动画
   */
  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();
  }

  /**
   * 清空红包数据,并回收红包中的bitmap
   */
  private void clear() {
    for (RedPacket redPacket :redpacketlist) {
      redPacket.recycle();
    }
    redpacketlist.clear();
  }

        红包点击事件

[Java] 查看源文件 复制代码
  @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

[Java] 查看源文件 复制代码
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

[Java] 查看源文件 复制代码
<

        自定义view的styleable

[Java] 查看源文件 复制代码
<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代码

[Java] 查看源文件 复制代码
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();
  }

  /**
   * 清空红包数据,并回收红包中的bitmap
   */
  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;
  }
}

        最后


分享到:  QQ好友和群 QQ空间 width:100%">

27

主题

9721

帖子

1873

安币

Android大神

Rank: 6Rank: 6

沙发
发表于 2017-10-28 06:07:29 | 只看该作者
安卓巴士是个不错的网站,我来顶个贴~

0

主题

9182

帖子

2379

安币

Android大神

Rank: 6Rank: 6

板凳
发表于 2017-10-30 05:22:19 | 只看该作者
支持,感谢,祝巴士越来越好~

0

主题

38

帖子

421

安币

攻城狮

Rank: 3Rank: 3

地板
发表于 2019-8-27 10:56:54 | 只看该作者
楼主威武啊,安卓巴士有你更给力!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by X3.2吉林快三© 2001-2019 ( )