葡京娱乐总站平台直播应用送礼大动画实现

仲、序列帧播放方案执行

个体基本页面分析和重计划

虽未是只有社交平台达成才来个人资料,但是所有社交网络被,个人资料都是任重而道远要素。最好的个人资料页会因此照片、简介及兴列表“介绍”一个人口。个人资料页还应包括近期动态或者任何验证该用户互动水平的指标,以及他的个成就(收欢迎程度、影响力或是在拖欠网络中之活跃度),页面上还要提供关爱、加为好友或是其他与死人链接的效果。

他人的个人主页:

对生伙房来说,个人资料中尽紧要的元素莫过于作品暨菜单这片宗,这是整个产品的着力元素,其次是关爱及粉丝人数。他人的个人资料页是如下三个问题:

1.关注与粉丝点击区域过小,很为难点击中要超时;对于参加时间和外信息之牵线是否要值得推敲;

2.民用介绍,超过一定字数限制之私房介绍隐藏了,点击才不过进行,此处阅读更多尺寸过大、视觉略显突兀,可改变以箭头进行带提醒即可;

3.作和菜谱,两单相同重要之要素以选项卡的款式显得没有问题,但点击菜谱跳反至新页面,与正常操作不符,对操作的连贯性不利,建议以挑选项卡下直接显示。

别人的民用基本

改要下图:

自己的个人主页:

在[我]面临,将首页的开创菜单入口置于页面右侧上比赛,方便用户快速创建菜谱,同时削弱不必要之要素,突出作品与菜谱。

2.2 了解图片加载

每当咱们折腾明白是什么导致内存激增前, 我们先行了解一下图于磁盘加载,
到写副内存, 最后显示到屏幕上各自都起了呀. 大致分为如下步骤:

  1. 啊磁盘中之图样创建映射
  2. IO操作读取图片数据流
  3. 图表解码位图拷贝, 写副内存
  4. 硬件绘制渲染到屏幕

活介绍

一个提供了食材食品、厨房用品购买同菜谱查询、分享的移动采用。

4.1.2 资源创新流程

坐对上家公司之代码保密, 此处不齐实际代码

咱俩当高达平等有些节中提及的鲜种植更新方式,
它们要的不同的尽管在”资源创新”这无异于步骤

图 4.1.2.a 整包更新的流程图

整包更新流程图.png

图 4.1.2.b 增量更新的流程图

增量更新流程图.png

莫知道诸位发现个别单流程共同之处没? 它们都亟待检测资源版本号大小,
包括游戏补丁、热还补丁这同样手续都必不可少. 相比叫增补丁类的,
资源创新不用太考虑灰度发布、回滚机制当题材, 但还是照样用专注资源核对,
内部测试, 以及日志监控等保持,
我记忆在前任公司便遇到了有些地段下载下来的资源包有问题,
所以不管是CDN的题目或资源本身有问题, 前端都要呢极其深的情况做好打算,
这才是万均的策.

援我及小商家, 我老大兼mentor, 达文哥, 告诫的同一句箴言

毫不相信后台下发的数都是没错的

约莫意思这样, 原句没坐下去, 旋即句话没不是赖后台同学很,
或者甩锅给后台
, 而是要prepare for the worst.

左右端测试都是一家人, 遇到题目我们先看是未是和谐问题,
不要互相甩锅..本是跟根生相煎何太着急, 如果有题目虽一样片搓一暂停,
一中断很就再来平等停顿

生厨房首页分析和重设

咱俩知晓一个app,不管是呀品种的,做什么的,最要害的凡当关注该目标用户,所有的计划性决策都应该建立于这个之上,要呢对象用户解决问题,达成他们之目的。一般的话,目标用户从很的自由化来分,可大约分为两类,一凡是发生明显目标的用户;二是未曾明显对象的用户,即闲逛型用户。一个好的app首页应该为好满足这半近乎用户之需要。

自从生伙房首页的信息结构图可以看看,搜索全食谱分类可是饱来显著目标的用户,剩下内容可满足闲逛型用户。但这里有酷挺一个题目,针对闲逛型用户,他们太要之是会直接看到最中心之始末——分享的菜系,考虑到菜谱这样的消息类,其出示方式在视觉上应有重新直观、更发出冲击力,内容量上应该力所能及太刷新,满足闲逛的需求。

[下厨房]信息结构图

[下厨房]首页

自打根据上述分析来拘禁,下厨房首页有三个问题:

1.下伙房首页的底情节均用二破点击才能够看出核心内容,使得用户查看内容时要来回切换;

2.图中黄色框内的情占据了多之屏幕空间,使首页显示头重脚轻,其中内容而进展削减合并;

3.首页有内容仅仅来三三两两屏多,不克满足闲逛用户的急需。

釜底抽薪方案

对合信息架构进行重构,信息进行模块化整理,相似信息统一;尽可能突出核心内容,从信息结构与视觉上进展突出。具体方案如下:

1.针针对目标明显的用户,将分类搜索齐领到至导航栏;

2.拿消息进行模块化整理,分为推荐专题关注老三单子标签;

3.潜伏、去除不必要的音信,将本周极受欢迎的内容一直坐首页,可尽刷新;早饭、午餐、晚餐、流行菜单、榜单属专题标签下,都转移呢大图展示,丰富视觉感受;之前的填补加厨友实际是好友动态的示,产伙房的厨友们才是互补加厨友的真的入口,这里合并归入关注标签下。

重设计[下厨房]首页信息结构图

重设计[下厨房]

其三、序列帧动画引擎源代码和Demo

FXAnimationEngine –
Github跳转

本着该Demo近期会见其他从一平和特别介绍, 此处占坑, 等待跳反链接

效益介绍

下伙房:发现菜单、找到厨友

摆:发现贩食材、食品等

社区:关注其他“吃货”,找到同样美食轨迹的同道人

我:展示以及治本个人的音信资料,创建自己之菜谱

4.1 礼物资源下载策略

日前痴迷捣腾吃的,在四处寻找菜谱的过程被便发现了外——下伙房,使用过程痛并愉快着,在此间我就算对准利用中发现的题目开展解析以及更设计(主要对[下厨房]和[我]少单模块),细节部分后再说。

2.2.1 映射文件

当我们由此[UIImage imageWithContentsOfFile:]自磁盘加载图片数据流,
实际上只是是啊这个图片创建了一个文书映射数据,
图片文件既无真的让加载到内存,
更无于解码成位图的款式而供应Core
Animation传递让底层硬件进行渲染, 故此时内存并无见面明白多,
也未会见起因解码操作造成CPU使用增多的情形.
但由网络下充斥图片数未分包在内.

大概提及一下炫耀文件:

A mapped file uses virtual memory techniques to avoid copying
pages of the file into memory until they are actually needed.

直译就是一个照文件指虚拟内存技术来避免当她们还从来不真的使及经常即便为拷贝到内存中.

下面来平等组对比说明一下:

本着照组一

- (void)test1 {
    UIImage *frame = [UIImage imageWithContentsOfFile:filePath];
    // 确保超出局部作用域后, 依旧保持对这个Image对象的强引用
    self.frame = frame;
}
// 待上方函数执行完后, 再查看内存使用情况

对待组二

- (void)test2 {
    UIImage *frame = [UIImage imageWithContentsOfFile:filePath];
    self.imageview.image = frame;
}

咱俩可发现比组二的内存占用明显较对照组同样一旦多.
即透过imageWithContentsOfFile:创造的UIImage对象后, 内存并没有显著增强,
等我们拿拖欠UIImage对象赋值给UIImageView的image属性后的某个时刻,
内存才出现显著增长.

此地又留几独问题:

  1. 我们还了解imageWithName:道加载的图样, 会被系统缓存,
    那么首先坏经过该方式开展如达到少单比组的实验, 结果如何呢?
  2. 通过imageWithName:办法第2、3..n浅加载同名图片时,
    加载的图纸数流会不会见更叫解码? 期间CPU占用起无来增?
  3. 尝试将创建的UIImage对象桥接赋值给CALayer的contents属性, 结果如何?

下一场国际惯例, 上点滴布置图

同一、直播应用礼物动画的常见方案

单纯个人了解, 实现iOS侧动画配置化常见方案来如下几栽:

iOS方案 优点 缺点
Core Animation(此处不计CAKeyFrameAnimation) 效果流畅逼真 安卓需重新实现; 配置化成本高, 需自定义模型、协议、转换方法等(iOS侧已有现成工具, 某几家直播公司想必也有自己的动画配置化工具); 不解决动态配置问题, 则只能随包更新.
序列帧播放(CAKeyframeAnimation、CADisplaylink、ImageView等) 设计哥工具可直接导出动画序列帧图片, 简单易用; 多平台兼容 效果略差; 图片帧数多易导致资源大
Cocos2d-x 效果好; 多平台兼容 学习成本; 相应动画制作工具; 必须引入Cocos2d库;
Lottie 横跨三端, iOS, Android, React Native. 设计师可以完全按照自己的想法设计. 无需考虑实现这一块. 内存占用? 作者本人尚未使用过, 不敢妄自评论

得看到, 序列帧播放方案是中间最简便易行易行的一个. 在我看来,
花椒直播所以底就算是立套方案, 他们各一个卡通,
都见面相应一个布局文件config.ini及针对应该动画的持有班帧图片.

谢兴趣的意中人可以换至最后一有礼物资源的下载策略、资源目录结构等系内容,
更建议尝试去追究一下花椒、映客等主流直播应用之bundle目录以及document中的资源.

2.2.2 浅谈CALayer的隐式动画以及业务

自从达等同节被,
我们发现当给UIImageView的image属性或CALayer的contents属性赋值Image对象后的某个说话,
内存和CPU占用才会现出鲜明变化. 那是以每一样糟Runloop循环, Core
Animation都见面在那个开创办一个卡通事务,
在本次Runloop结束时才去实施有添加到该事情里之所有动画操作.
此刻图才被解码加载入内存,
图片数会叫解码为渲染可用的bitmap数据.
一些有关细节而圈自己其他一样首分享.

浅谈CALayer隐式动画及作业


季、礼物资源下载策略和资源目录结构

2.3 解决内存激增问题

脚下我们面临的题材是不管采取何种实现方案, 在实施序列帧动画时,
所有图片都见面于解码成为位图并载入内存中.

送礼物作为观众打赏支持主播的同等栽艺术, 也是直播应用之平等十分收入来,
每个直播平台都蕴含送礼就无异于效应, 并且都管礼金动画效果做的专门炫酷.
如此之动画片效果还增加配花或帅哥主播的同句子”谢谢某某某送的死去活来飞机~”,
是不是思考都发生接触小震动, 感觉瞬间改为了全场的焦点?

4.2 资源目录结构设计

任由谁直播平台, 每个礼物都见面相应一个逻辑id,
我们可由此人事的id作为该赠品的资源目录名,
然后以该目录外以错过划分不同类别的图片子目录, 如下所示

- 10000             // 一级目录, 礼物id
    - - gift        // 二级目录, 小礼物序列帧图片
    - - giftlist    // 二级目录, 礼物列表序列帧图片 
    - - giftanim    // 二级目录, 大动画序列帧图片

立马只是里的一样栽设计, 也有平台会采用如下形式, 所以主要要看需求使自然

- gift
    - - 10000
- giftlist
    - - 10000
- giftanim
    - - 10000   

此外, 有的平台尚会见以id_version, 即礼物id+礼物版本的款式来命名,
这样可一本万利配置使后台可灵活下发给前端具体要去播放哪个动画的某版本了

- 10000_11  // id为10000, 版本为11的礼物资源目录
- 10000_12

梦幻城堡

2.3.2 解决方案

那有什么措施可免为? 可也老是播放到哪一样幅时就错过加载那一帧之图,
即每次只有加载一摆设图纸及内存中. 这样当播放到下一样张图片时,
上同一摆放图纸都任其他引用, 系统本来会对那个进行释放.

旋即就是是极其简单易行有效之一致模仿方案.
但是我们鞭长莫及借助CAAnimation及其派生类CAKeyframeAnimation来兑现就无异方案,
因为拥有的图片都见面解码导致占用大量的内存.

然而咱好透过CADisplayLink来落实该方案,
选CADisplayLink的因是她于NSTimer精度要高多,
正常状况下CADisplayLink的回调会以屏幕每次刷新时触发,
即一般1/60秒触发一样差, 适合用来做UI的重绘,
因此好由此其来周期性的更迭关键帧图片, 从而达到播放动画的效应.
那么具体怎么开吧?

于CADisplayLink的回调中获两不行屏幕刷新的间隔时间,
通过持续的长间隔时间来判断究竟的时间是否曾经满足下一样帧的播放时刻,
如果大于下一致轴的广播时刻就是好轮换为产一样帧图片了,
直至最后一布置关键帧也播放完成.

推个例, 我们如果当1秒内播放了一个饱含5摆设关键帧图片的动画片,
每张图的停留时间、切换时如下图2.3.2.a所示.
所以第0秒的时段便从头展示第一布置关键帧, 直到1.0秒即一刻时常, 动画播放结束.

图 2.3.2.a

此外, 如果还用更优化,
我们可入图片异步解码、图片预加载逻辑等方案.

  • 异步图片解码, 图片解码是如出一辙宗于耗时、比较占CPU的操作,
    对于无解码的图, 系统一般会以主线程对那个进行解码,
    所以可以透过当异步线程进行图纸强制解压缩, 从而休占UI线程.
    关于图片解码的详情, 强烈推荐讨论 iOS
    中图纸的消除压缩.

  • 图预加载, 这个就算是以进一步节约上下文切换时,
    即前后两张图纸切换的时间. 就是如果完成当上同样帧图片播放完时,
    我们毫不等下一致摆设图纸解码完成后还拓展图纸的切换,
    而是可以直接由曾解码图片的休养生息存队列中取出直接进行切换.
    预加载我个人觉得实在主要就是是阈值的最优异选择,
    可参看预加载与智能预加载一文.

  • 字节对齐(byte alignment)对Core
    Animation性能的震慑

预先放大上按序列帧播放方案实现之卡通引擎FXAnimationEngine,
Demo中实现了直播中礼物队列、礼物配置、礼物列表,
另外还分别用动画引擎和原先生Core Animation去播放序列帧动画为做比较.

2.3.1 解压后底图所占内存大小

图片解码后底格式为位图形式.
位图是出于同组像素(pixel)组成的, 每一个像素就意味着图片中的一个点.
比如大规模的JPEG, 以及PNG格式的图片文件都是各项图图片.

咱还需知道, JPEG和PNG图片实际上还是一致种编码/压缩后底各项图格式,
它们是匪能够直接用来图片渲染之, 所以得事先对其缩减的数据开展解码/解压缩操作.

那等同布置解压后底各图其所占内存大小怎么计算为?

此地设我们发相同摆放32位的PNG格式图片, 其像素格式为RGBA四组成部分组成,
每部分占用8各项, 该图片尺寸为160px * 320px.

32位的图片意味着其每个像素占32位, 即4个字节.
又根据图片尺寸计算出总像素数量为 160*320 个像素.
所以该图片解码后所占内存大小就为 像素总数 * 单位像素的字节数
即 (160*320) * 4 / 1024 = 200 KB.

从而可想而知, 假设一个队帧动画生80布置图, 200 * 80 / 1024 = 15.625
mb, 就会占15mb的内存. 序列帧图片越多, 占用内存越大!

4.1.1 两种植办法较

方式 基本思路 优点 缺点
整包更新 所有的动画资源按目录结构进行压缩, 客户端通过比较资源包版本号发现有更新后, 仅需下载一个资源包压缩文件, 并进行解压替换即可 简单易实现, 客户端每次仅需下载一个资源包 随着资源包逐渐增大, 下载及解压时间也会延长, 从而直接影响用户体验; 即使是仅是资源中的某个图片发生改变, 客户端都要重新下载整个资源包, 容错率低且浪费流量
增量更新 每个动画资源单独压缩并上传CDN, 若客户端发现资源版本号有变化, 再对服务器下发的资源列表跟本地资源列表求差集运算从而得出增量, 单个动画资源的下载地址或者md5可作为唯一标识进行比较. 得出增量后, 客户端再对每个增量资源包进行下载, 每下载完一个即可"投入使用" 不怕资源变更频繁; 仅需下载有新增或有变更的资源包, 更节省时间以及流量; 逻辑略复杂于整包更新, 比如下载中途用户把应杀掉, 下次需要找出未更新完的增量资源并继续下载

正文主要描述的尽管是特别礼动效的兑现. 全文共3000配左右,
大概阅读时间吧5~12分钟.

2.1 实现方式

队帧播放动画一方案的切实实现必须能够满足以下要求:

  1. 图表展示: CALayer、UIImageView
  2. 论日间隔逐帧播放:
    CAKeyframeAnimation、UIImageView、定时器类(CADisplayLink、NSTimer、dispatch_source_t)+切换关键帧逻辑
  3. 提供有班帧播放收的风波: CAAnimationDelegate、CATransaction
    CompletionBlock、定时器类+回调触发逻辑

重组方式多, 比如: CALayer+CAKeyframeAnimation+delegate,
UIImageView+定时器, CALayer+定时器类等等.

咱事先选定这同模拟组合展开实施: CALayer+CAKeyframeAnimation+delegate

// 伪代码
- (void)startAnimation {
    UIImage *frame = [UIImage imageWithContentsOfFile:...];
    NSArray<UIImage *> *frames = @[(id)frame.CGImage, ...];
    CAKeyframeAnimation *keyframeAnim = ...;
    keyframeAnim.contents = frames;
    ...
    keyframeAnim.delegate = self;
    [xxx.layer addAnimation:keyframeAnim forKey:@"xxx"];
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    // 触发动画播放结束(全部播放完、中途结束)回调
    ...
}

使此你都下载了Demo, 可以打开Debug
Navigator(cmd+6)简单翻看内存增长或留意Xcode
Instrument-Allocations中VM:ImageIO_PNG_Data无异于件,
就见面看有内存增长波峰. 而且序列帧图片越多, 波峰越明显.

那其它方案是否出现了一致之问题也? 是的, 其他方案一样会这么,
换成UIImageView自带的animationImages来开序列帧播放或是其他组成措施,
也起内存激增的情况.

天使