ibiliplayer是什么_Bilibili移动端播放器进度条的小电视动画是如何实现的？
解开包简单的看了一下，B站用的Lottie动画库。
在线预览：https://www.lottiefiles.com/share/xm5dc8www.lottiefiles.com
json路径：
bili-universal.app\Frameworks\BBPlayer.framework\player_tvsquint.json
B站app的设计细节特别用心，比如登录页输入密码的地方，喜欢。
{
"v": "4.10.2",
"fr": 29.9700012207031,
"ip": 0,
"op": 25.0000010182709,
"w": 18,
"h": 18,
"nm": "tv_combine 1018",
"ddd": 0,
"assets": [],
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Eye Right",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 0,
"s": [9.938, 9.469, 0],
"e": [13.094, 9.469, 0],
"to": [0.52604168653488, 0, 0],
"ti": [-0.52604168653488, 0, 0]
}, {
"t": 24.00000097754
}],
"ix": 2
},
"a": {
"a": 0,
"k": [-2.493, 1.385, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [1.8, 4],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 20,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-2.524, 1.385],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "Eye Left",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 1,
"k": [{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.167,
"y": 0.167
},
"n": "0p833_0p833_0p167_0p167",
"t": 0,
"s": [4.906, 9.469, 0],
"e": [7.906, 9.469, 0],
"to": [0.5, 0, 0],
"ti": [-0.5, 0, 0]
}, {
"t": 24.00000097754
}],
"ix": 2
},
"a": {
"a": 0,
"k": [-2.493, 1.385, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [1.75, 4],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 20,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-2.524, 1.385],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "Tv",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [8.903, 9.401, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0.012, 0.995, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [14, 11],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 2.5,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "st",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 4,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [1, 1, 1, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [0.091, 1.101],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "Tianxian Right",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 33.382,
"ix": 10
},
"p": {
"a": 0,
"k": [12.281, 2.352, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [-2.493, 1.385, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [136.962, 114.812, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [1.5, 4],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 20,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-2.524, 1.385],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 6.85,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 5,
"ty": 4,
"nm": "Tianxian Left",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": -36.359,
"ix": 10
},
"p": {
"a": 0,
"k": [5.797, 2.328, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [-2.493, 1.385, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [122.727, 114.296, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [1.5, 4],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 20,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0, 0, 0, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-2.524, 1.385],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": -6.395,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 6,
"ty": 4,
"nm": "Pink 02",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 28,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [8.99, 9.471, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [-0.151, 0.799, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [16, 13],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 3.5,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0.98431372549, 0.447058823529, 0.6, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-0.151, 0.799],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}, {
"ddd": 0,
"ind": 7,
"ty": 4,
"nm": "Pink 01",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 14,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [9.012, 9.463, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0.075, 1.213, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [18, 15],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 4,
"ix": 4
},
"nm": "Rectangle Path 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0.98431372549, 0.447058823529, 0.6, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [0.075, 1.213],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}],
"nm": "Rectangle 1",
"np": 3,
"cix": 2,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 27.0000010997325,
"st": 0,
"bm": 0
}]
}
ibiliplayer是什么_Bilibili移动端播放器进度条的小电视动画是如何实现的？相关推荐
- android音乐播放器进度条误差研究
2019独角兽企业重金招聘Python工程师标准>>> 如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率 和 更新的 ...
- android实现音乐播放器(进度条)
|--效果图 |--依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. |--main. ...
- html音乐播放器进度条同步,网页音乐播放器完整版特效，自行控制，带进度条...
WWW.51JS.COM---[94OK] //---------这是区分播放器的音乐类型,你可以填加修改------// var RS = new Array("rm",&quo ...
- android音乐播放器进度条研究
如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率 和 更新的精度 频度和精度要相适应,才能保证流畅,并不是精度越高越好,也不是频度越高 ...
- iOS利用UIView自定义播放器进度条
前段时间做项目遇到播放器自定义进度条的需求,刚开始想的是继承自系统的UISlider去做,内部重写系统方法完成样式定制.后来遇到头疼的问题,在iphone6.7手机上样式显示正常,遇到plus手机进度 ...
- flutter 自定义播放器进度条
FijkPlayer 第三方的一个视频播放器,这是一个大佬基于比利比利播放器封装的,有常用的API 可自定义样式 pub传送门 默认的样式 展示: 自定义的样式 展示: **使用:** fijkpla ...
- MediaPlayer 音乐播放器进度条
今天学渣研究了一下使用MediaPlayer播放音乐时添加进度条,进度条现在用的是android自带的seekbar,后期会跟换UI的,在之前能够播放音乐的基础上,现在添加的主要功能有两个: 1实时显 ...
- AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...
- android mp3进度条和时间,AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...
最新文章
- Can't read [proguard.ClassPathEntry@1a0c10f] (No such file or directory)
- oracle查看数据库名和实例名
- ITK:自适应直方图均衡图像滤波器
- android 指针是什么意思,Android系统的智能指针（轻量级指针、强指针和弱指针）的实现原理分析（3）...
- Objective-C文件流操作
- Shiro 整合 SpringBoot
- 容器编排技术 -- Kubernetes kubectl get 命令详解
- SpringBoot(十四)_springboot使用内置定时任务Scheduled的使用（一）
- 老白聊数据-关于销售预测的那些事
- linux网络子系统分析（三）—— 设备无关层
- python中的列表推导与生成器
- 变砖的平板怎样重装android,台电平板电脑刷机教程,小编教你台电平板电脑怎么刷机...
- 【Unity技术积累】人物移动 坦克式移动 WASD 动画
- Java Grammar：数据类型
- 【图像融合】基于非下采样剪切波变换(NSST)实现红外图像和可见光图像融合matlab代码
- 牛客编程巅峰赛S1第2场 - 青铜白银
- js获取url地址参数
- Spark实现WordCount的11种方式，你知道的有哪些？
- B2C购物网普遍采用的营销策略
- php 二维数组中去重,[转]PHP二维数组去重数组去重