礼物展示面板 | 普通礼物播放效果 | 全屏礼物播放效果 |
| |
礼物系统结构图 | 礼物系统时序图 |
TUIGiftListView
:礼物面板,呈现礼物列表,发送礼物及充值。TUIGiftPlayView
:播放礼物的面板,自动监听礼物消息。TUIGiftListView
提供了 setGiftList
接口,可用于设置礼物素材。let giftListView: TUIGiftListView = TUIGiftListView(groupId: xxx) //生成礼物面板对象let giftList: [TUIGift] = ... //这里可替换成自己的礼物素材数组giftListView.setGiftList(giftList) //设置礼物面板的素材
TUIGift
的参数及说明如下:giftId: String
:礼物 IDgiftName: String
:礼物名称imageUrl: String
:礼物面板展示图像animationUrl: String
:SVGA 动画 Urlprice: Int
:礼物价格extInfo: [String: AnyCodable]
:自定义扩展信息animationUrl
为空,则礼物播放效果为普通播放,播放的内容为 imageUrl 所链接的图像;若 animationUrl
不为空,则播放效果为全屏播放,播放的内容为对应的 svga 动画。TUIGiftListView
的代理 TUIGiftListViewDelegate
中的 onSendGift
代理函数 ,获取礼物个数和礼物信息,在预处理完后可调用 TUIGiftListView
的 sendGift
函数用于礼物的实际发送。giftListView.delegate = selfextension ViewController:TUIGiftListViewDelegate
{
func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {//...此处为预处理,如校验当前用户的余额等操作let receiver = TUIGiftUser()//...此处设置礼物接受者信息view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)}}
TUIGiftPlayView
自身会接收并播放礼物消息。let giftDisplayView: TUIGiftPlayView = TUIGiftPlayView(groupId:xxx)
TUIGiftPlayView
需要全屏接入TUIGiftPlayView
的代理 TUIGiftPlayViewDelegate
中的 giftPlayView:onPlayGift
代理函数。extension ViewController: TUIGiftPlayViewDelegate {func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser) {//...可在此处自行处理}}
TUIGiftPlayView
的 playGiftAnimation
进行动画播放,调用时机是在收到 TUIGiftPlayViewDelegate
的 onPlayGiftAnimation
回调。extension ViewController: TUIGiftPlayViewDelegate {func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {//...}}
TUIGiftListView
提供了 setBalance
接口,可用于设置礼物面板上显示的余额值。giftListView.setBalance(xxx)
TUIGiftListView
的代理 TUIGiftListViewDelegate
中的 onRecharge
代理函数可用于接收礼物展示面板抛出的充值按钮点击事件,在这里对接自己的充值系统。extension ViewController:TUIGiftListViewDelegate
{
func onRecharge(giftListView view: TUIGiftListView) {//...此处可用于对接自己的充值系统,充值完毕后,可调用view.setBalance(xxx)设置礼物展示面板的余额显示}}
// 源码路径:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
private lazy var giftPanelView: TUIGiftListView = {let view = TUIGiftListView(groupId: liveRoomInfo.roomId.value)giftCloudServer.queryGiftInfoList { [weak self] error, giftList inguard let self = self else { return }DispatchQueue.main.async {if error == .noError {view.setGiftList(giftList)} else {self.makeToast("query gift list error, code = \\(error)")}}}return view}()
giftCloudServer.queryGiftInfoList
的逻辑,得到一个自定义的礼物列表 [TUIGift]
,通过 view.setGiftList
设置礼物列表即可。animationUrl 要求是一个SVGA动画。
// 源码路径:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
private lazy var giftPanelView: TUIGiftListView = {let view = TUIGiftListView(groupId: liveRoomInfo.roomId.value)giftCloudServer.queryBalance { [weak self] error, balance inguard let self = self else { return }DispatchQueue.main.async {if error == .noError {view.setBalance(balance)} else {self.makeToast("query balance error, code = \\(error)")}}}return view}()
giftCloudServer.queryBalance
的逻辑,得到礼物余额,通过view.setBalance
更新礼物余额即可。// 源码路径:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {let receiver = TUIGiftUser()receiver.userId = liveRoomInfo.anchorInfo.value.userIdreceiver.userName = liveRoomInfo.anchorInfo.value.name.valuereceiver.avatarUrl = liveRoomInfo.anchorInfo.value.avatarUrl.valuereceiver.level = "0"giftCloudServer.sendGift(sender: TUILogin.getUserID() ?? "",receiver: receiver.userId,giftModel: giftModel,giftCount: giftCount) { [weak self] error, balance inguard let self = self else { return }if error == .noError {view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)view.setBalance(balance)} else {self.makeToast(.balanceInsufficientText)}}}
giftCloudServer.sendGift
的逻辑,可以消费礼物的话,则通过GiftListView
的sendGift
发送礼物消息,之后再通过setBalance
更新礼物余额。// 源码路径://TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
//TUILiveKit/Source/LiveRoom/View/Anchor/Living/AudienceLivingView.swift
func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {giftCacheService.request(urlString: gift.animationUrl) { error, data inguard let data = data else { return }if error == 0 {DispatchQueue.main.async {giftPlayView.playGiftAnimation(animationData: data)}}}}
giftCacheService.request
的逻辑,加载动画成功得到data
(Data
类型),然后通过TUIGiftPlayView
的playGiftAnimation
播放礼物动画。
本页内容是否解决了您的问题?