React-Native使用ART实现水波纹动画、波浪线、声波音频波动效果(附源码)

上传者: daokedream | 上传时间: 2022-05-02 14:08:13 | 文件大小: 23KB | 文件类型: ZIP
笔者最近有个RN项目,需要在与设备通话的时候,App侧展示声波纹UI效果,以笔者的尿性又去折腾整理了一番,效果还是不错的,已在项目使用。 具体效果图可以参考 https://blog.csdn.net/daokedream/article/details/124453731。 在React Native中有个ART库,它可以绘制各种线(实线、虚线、曲线)、图形(矩形、圆、扇形)组合,让非常酷炫的绘图及动画变成了可能。 至于水波纹、波浪动画、声波音频这些常用的效果,一般都是贝塞尔曲线加持画出来的。 同样也非常适用想了解react-native art绘图入门的同学,可以看看其中的Demo部分,算是整理的比较详细了。 希望能帮助到有需要的同学,加油共勉!

文件下载

资源详情

[{"title":"( 16 个子文件 23KB ) React-Native使用ART实现水波纹动画、波浪线、声波音频波动效果(附源码)","children":[{"title":"WavePage","children":[{"title":"WaveDemo3.js <span style='color:#111;'> 1.64KB </span>","children":null,"spread":false},{"title":"WaveDemo2.js <span style='color:#111;'> 1.68KB </span>","children":null,"spread":false},{"title":"ReadMe <span style='color:#111;'> 228B </span>","children":null,"spread":false},{"title":"Chart","children":[{"title":"Circle.js <span style='color:#111;'> 781B </span>","children":null,"spread":false},{"title":"Wedge.js <span style='color:#111;'> 4.94KB </span>","children":null,"spread":false},{"title":"Rectangle.art.js <span style='color:#111;'> 2.92KB </span>","children":null,"spread":false}],"spread":true},{"title":"ARTDemo.js <span style='color:#111;'> 11.02KB </span>","children":null,"spread":false},{"title":"View","children":[{"title":"WaveView2.js <span style='color:#111;'> 4.13KB </span>","children":null,"spread":false},{"title":"WaveView4.js <span style='color:#111;'> 4.28KB </span>","children":null,"spread":false},{"title":"WaveView1.js <span style='color:#111;'> 6.17KB </span>","children":null,"spread":false},{"title":"WaveView5.js <span style='color:#111;'> 9.86KB </span>","children":null,"spread":false},{"title":"DancingLine.js <span style='color:#111;'> 3.42KB </span>","children":null,"spread":false},{"title":"SpeedCanvas.js <span style='color:#111;'> 7.20KB </span>","children":null,"spread":false},{"title":"WaveView3.js <span style='color:#111;'> 4.66KB </span>","children":null,"spread":false}],"spread":true},{"title":"IndexDemo.js <span style='color:#111;'> 1.32KB </span>","children":null,"spread":false},{"title":"WaveDemo1.js <span style='color:#111;'> 1.87KB </span>","children":null,"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明