美文网首页
直播中礼物动画暴击 "无限叠加" 效果(二)

直播中礼物动画暴击 "无限叠加" 效果(二)

作者: 设计失 | 来源:发表于2019-05-15 18:28 被阅读0次

上篇文章中,我们创建了礼物动画类,其中的功能为:

1、添加礼物
2、 添加礼物布局类,
3、显示礼物布局

礼物布局,它的作用为:

1、创建布局后显示其中的数据

今天的文章主要是完善上面的类的功能:

1、暴击
2、无限数据添加
3、礼物面板被顶上去之后,在暴击时间内需要重新回到暴击面板中

在前一篇文章中,GiftControl类中,添加礼物后,开始了一个进入礼物面板的动画:

  public AnimatorSet startAnimation(IBaseAnim anim) {
    this.anim = anim;
        hideView();
        //布局飞入
        ObjectAnimator flyFromLtoR = LiveGiftAnimationUtil.createFlyFromLtoR(mGiftItemContent, -getWidth(), 0, 400L, new OvershootInterpolator());
        flyFromLtoR.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }
        });
        //礼物飞入
        ObjectAnimator flyFromLtoR2 = LiveGiftAnimationUtil.createFlyFromLtoR(mIvGift, -getWidth(), 0, 500L, new DecelerateInterpolator());
        flyFromLtoR2.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mIvGift.setVisibility(View.VISIBLE);
            }
            @Override
            public void onAnimationEnd(Animator animation) {
                comboAnimation(true);
            }
        });
        return LiveGiftAnimationUtil.startAnimation(flyFromLtoR, flyFromLtoR2);
    }

从这里开始,动画结束后,就有一个暴击倒计时,这个我们有多种实现方式,这里我们使用Handler实现:


private Handler mHandler = new Handler(this);  // 连击hander
private Runnable mCurrentAnimRunnable;  // 连击检测runnable

/**
 * 连击结束时回调
 */
public void comboEndAnim() {
    if (mHandler != null) {
        if (mCurrentAnimRunnable == null) {
            mCurrentAnimRunnable = new GiftNumAnimaRunnable();
            mHandler.postDelayed(mCurrentAnimRunnable, GIFT_DISMISS_TIME);
        }
    }
}

// 动画连接runnable
private class GiftNumAnimaRunnable implements Runnable {
    @Override
    public void run() {
        dismissGiftLayout();
    }
}

上面,当连击结束之后,就使用Handler开始postDelayed一个延时的方法来显示礼物消息。在这期间,如果有新的礼物进来,就判断当前是否在显示,所以需要在GiftControlloadGift()方法中完善:


// 保存礼物view
private LinkedList<LiveGiftLayout> mLiveGiftLayouts;
/**
 * 加入礼物,具有实时连击效果
 *
 * @param gift
 * @param supportCombo 是否支持实时连击,如果为true:支持,否则不支持
 */
public synchronized void loadGift(LiveGiftBean gift, boolean supportCombo, 
                                boolean isFirst) {
       Iterator<LiveGiftLayout> liveGiftLayoutIterator 
                        = mLiveGiftLayouts.iterator();
        while (liveGiftLayoutIterator.hasNext()) {
            // 获取到队列中的view
            LiveGiftLayout giftLayout = liveGiftLayoutIterator.next();
            // 判断是否在之前存在
            if (giftLayout.getCurrentGiftId().equals(gift.getGiftId()) && 
                  giftLayout.getCurrentSendUserId().equals(gift.getSendUserId())) {
                if (giftLayout.isRemove()) {
                    // 去掉 消失的回调  整条数据是没用的了
                    giftLayout.removeDismissGiftCallback();
                    // 被顶出去了
                    liveGiftLayoutIterator.remove();
                    gift.setGiftCount(giftLayout.getGiftCount() + 1);
                    showGift(gift);
                } else {
                    //连击
                    giftLayout.updateGiftCount(gift.getGiftCount());
                    giftLayout.setSendGiftTime(gift.getSendGiftTime());
                }
                return;
            }
        }
        showGift(gift);
    }
}

上面的注释,首先,我们需要有一个 mLiveGiftLayouts变量来保存所有添加进的的layout,添加进来之后,在下一次加入新的数据就遍历其中所有的数据,然后来判断是否可以暴击,如果是暴击的话,就把数量给累加进入然后重新设置值;

在暴击的时候,需要移除掉handlerGiftNumAnimaRunnable,不然在GIFT_DISMISS_TIME之后,就会自动移除,所以每次暴击开始就要移除掉消失的runnable,在暴击动画(数组变大的动画)结束后,重新开始倒计时!

/**
 * 增加礼物数量,用于连击效果
 *
 * @param count
 */
public synchronized void setGiftCount(int count) {
    mGiftCount += count;
    mGift.setGiftCount(mGiftCount);
    ++mCombo;
    mTvGiftNum.setText("x " + (mCombo));
    comboAnimation(false);
    removeDismissGiftCallback();
}

public void comboAnimation(boolean isFirst) {
  if (isFirst) {
    mTvGiftNum.setVisibility(View.VISIBLE);
    mTvGiftNum.setText("x " + mCombo);
    Log.d(TAG, "comboAnimation 连击:" + mCombo);
    comboEndAnim();
  } else {
    //数量增加
    ObjectAnimator scaleGiftNum = LiveGiftAnimationUtil.scaleGiftNum(mTvGiftNum);
    scaleGiftNum.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
        }
        @Override
        public void onAnimationEnd(Animator animation) {
            comboEndAnim();
        }
    });
    scaleGiftNum.start();
  }
}

不是第一次就走了下面的逻辑,数字变大的动画结束之后,回调到了暴击动画结束的方法;

到此,主要的逻辑就写完了,还是很简单的。

代码上传到了https://github.com/shejishi/ComboGift喜欢的给个Star❤~

相关文章

网友评论

      本文标题:直播中礼物动画暴击 "无限叠加" 效果(二)

      本文链接:https://www.haomeiwen.com/subject/pejmaqtx.html