Git Product home page Git Product logo

livesendgift's Introduction

导航

目标:

  • 弹幕过几秒自动消失
  • 实现A用户弹幕出现时,B用户发送礼物,B用户弹幕在A用户弹幕下方,A/B用户弹幕存在时,A/B用户连续发送礼物,弹幕显示的礼物数量增加,谁的礼物数量较大,谁的弹幕在上方。
  • A/B用户弹幕存在时,C用户发送礼物,A/B用户中较早出现的弹幕被替换成C用户的弹幕数据,并且C用户的弹幕处于下方

版本更新:

V1.0

  • 大致实现了不同用户增加弹幕的效果

V1.1

  • 实现了用户连续发送数字增加效果
  • 实现了新增弹幕从空位出现的效果

V1.2

  • 实现了第二个用户之后送礼物替换较早的弹幕效果(完善)

V1.3

  • 实现了上面的视图移除后,正在连击的下面的视图移动到上面的效果

V1.4

  • 实现了目标效果😊😊😊

V1.5

  • 实现了自定义最大礼物数量的需求

V1.6

  • 新增了自下而上的展现效果

V1.7

  • 解决了一个视图显示BUG,现在几乎不会出现该BUG。

快速使用

  • 使用的第三方库:

  • 两个模型:LiveGiftListModelLiveUserModel

    • LiveGiftListModel 是用来显示弹幕上右侧礼物图片picUrl和打赏的语句rewardMsg的,礼物有type字段
    • LiveUserModel 是用来显示送礼物的人的名称name和头像iconUrl
  • V1.4只需要导入#import "LiveGiftShow.h"

  • V1.5只需要导入#import "LiveGiftShowCustom.h",具体使用可参考V15TestVC.m,不建议同时使用LiveGiftShow.hLiveGiftShowCustom.h

  • V1.6只需要导入#import "LiveGiftShowCustom.h",具体使用可参考V15TestVC.m,向V1.5兼容。如有需要更新,只需要将LiveGiftShowCustom.hLiveGiftShowCustom.m替换为V1.6版本的文件即可。

  • @property (nonatomic ,weak) LiveGiftShow * giftShow;

 - (LiveGiftShow *)giftShow{
    if (!_giftShow) {
        LiveGiftShow * giftShow = [[LiveGiftShow alloc]init];
        [self.view addSubview:giftShow];
        _giftShow = giftShow;
        [giftShow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(@244);
            make.height.equalTo(@50);
            make.left.equalTo(self.view.mas_left);
            make.top.equalTo(self.view.mas_top).offset(100);
        }];
    }
    return _giftShow;
}
  • 在开发中使用
LiveGiftShowModel * listModel = [LiveGiftShowModel giftModel:self.giftArr[3] 
                                                   userModel:self.firstUser];
[self.giftShow addGiftListModel:listModel];

即可完成接入。每一次点击只需要[self.giftShow addGiftListModel:listModel];即可自动计数加一。最高支持显示9999。

特别说明

  • 在1.5+版本之后,只需要替换LiveGiftShowCustom.hLiveGiftShowCustom.m基本上即可完成版本更新。
  • 在V1.6+版本中,LiveGiftShowCustom.m
#pragma mark - 初始化
+ (instancetype)addToView:(UIView *)superView{
    LiveGiftShowCustom * v = [[LiveGiftShowCustom alloc]init];
    [superView addSubview:v];
    //布局
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
        //这个改动之后要注意修改LiveGiftShowView.h的kViewWidth
        make.width.equalTo(@244);
        //将主视图的高度设置0.01,保证弹幕后面的视图能响应点击事件。
        make.height.equalTo(@0.01);
        //这个可以任意修改
        make.left.equalTo(superView.mas_left);
        //这个参数在的设定应该注意最大礼物数量时不要超出屏幕边界。
        make.top.equalTo(superView.mas_top).offset(400);
    }];
    v.backgroundColor = [UIColor clearColor];
    return v;
}

自定义配置

  • LiveGiftShow V1.4管理所有弹幕的视图,在V1.7之后移除。
  • LiveGiftShowCustom V1.5之后管理所有弹幕的视图
两个弹幕之间的高度差 两个交换动画时长
kGiftViewMargin kExchangeAnimationTime
50.0 0.25
  • LiveGiftShowView一个弹幕的视图
弹幕背景宽 弹幕背景高 送礼者名称字号 送礼者名称文字颜色 礼物寄语字号 礼物寄语文字颜色
kViewWidth kViewHeight kNameLabelFont kNameLabelTextColor kGiftLabelFont kGiftLabelTextColor
240.0 44.0 12.0 whiteColor 10.0 orangeColor
每个数字图片宽度 弹幕几秒后消失 数字改变动画时长 弹幕消失动画时长
kGiftNumberWidth kTimeOut kNumberAnimationTime kRemoveAnimationTime
15.0 3 0.25 0.5

关于我

  • 如果在使用过程中遇到问题,或者想要与我分享/吐槽/建议/意见[email protected]

livesendgift's People

Contributors

jonhory avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.