0.1.2 • Published 4 years ago
@retailwe/ui-like-animation v0.1.2
like-animation 直播间点赞动画组件
引入
全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。
// app.json 或 index.json
"usingComponents": {
"wr-like-animation": "@retailwe/ui-like-animation/index"
}代码演示
基础用法
<wr-like-animation wr-class="like-animation" senceType="live" count="{{likeCount}}" height="680" width="160" iconSize="76"></wr-like-animation>API
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| count | 总点赞数量，通过监听count值的变化触发点赞效果 | number | 0 | - |
| height | canvas画布的高度 | number | 340 | - |
| width | canvas画布的宽度 | number | 140 | - |
| iconSize | 点赞气泡图标的大小 | number | 40 | - |
| iconUrl | 点赞气泡图标链接数组，支持网络图片、本地图片 | Array | 'https://.com//like1.png','https://.com//like2.png' | - |
| iconSize | 点赞气泡图标的大小 | number | 40 | - |
| senceType | 特殊应用情景，当senceType==='live'时，组件初始化时，会连续执行3s左右的动画，后续间隔20s执行一次动画。senceType为其它值时无效。 | string | |
外部样式类
| 类名 | 说明 |
|---|---|
| wr-class | 点赞动画画布的样式布局 |
其它
注意，动画采用setTimeout实现，这是因为调用canvas 2d的requestAnimationFrame API会导致部分机型动画卡顿，定格成静止画面。
动画实现原理可参考：小程序直播-疯狂点赞canvas动画实现原理解析