一起学ReactNative(3) 实现网易云音乐旋转唱片效果
前言
先看一下整体完成效果
今天主要聊聊 这个唱片的旋转效果如何实现
这个效果实现其实非常简单 先来看一下效果图
如有发现任何问题的 都可以直接加我的QQ:469373256
效果图
红色线:scroll
粉色线:一个宽度跟手机宽度一样的view组件 内部实现了唱片的居中
黄色线:里面的内容跟粉色线一样 不过初始的时候不显示 只会在scroll滑动结束的时候进行触发
ok 这样简单的介绍了一下 以后 有没有觉得很简单呢
首先 scroll里面的内容或者scroll是无法实现旋转的效果的 那么如何让他能做到滑动的时候暂停旋转 然后松开的时候 继续当前的旋转呢
窍门就在黄色的部分 这个部分 默认情况是不显示出来的 只会在scoll滑动结束的时候才触发 因为这个效果太简单了 总共代码也有限 所以就不具体细说了 直接上代码
代码
ok 界面部分的代码 全部在这里 是不是觉得很简单
接下来 你要做的 其实就是2件事情
1.如何开始或停止旋转
2.如何显示或隐藏黄色的view部分
虽然说看起来 的确是没有多少事情要做了 但是 这里还是有一些问题需要解决 比如
如何获取scoll的滚动结束事件呢
在RN官方介绍对于scroll的介绍中 可以看到 关于消息事件的介绍 少之又少 很多人 我想到这里的时候 很容易就会直接用这个事件
但是事实证明是悲剧的 如果说使用了这个来实现的话 会触发多次 而不是像我们想的那样 滚动滑动结束的时候去触发他
所以我们这边应该使用一个没有标明出来的消息事件
这个消息事件 是在滚动条滚动结束的时候触发的 ok 这不就是我们想要的嘛
在这里有可能有人会说了 既然我已经知道触发了 为什么 我的代码 在这里却写了那么多东西 是干啥用的
首先来说一下 这部分代码 是为了获取scroll当前所处的item位置
因为网易云音乐有一个效果是这样的 当前滑动过去的时候 在滑动结束的时候 会直接播放当前选中的歌曲
所以咯 scroll虽然可以获取到包含在里面组件的总数 但是 你却无法获取到当前所处的item位置 如果得不到这个值的话 你这个效果不就是无法实现了嘛 所以这段代码 也是为以后实现音乐播放准备的
讲完了滑动结束 那是不是还得有滑动开始呢？
没错 所以 这边 又要引入一个新的消息事件 也是在rn官方找不到的
在这个事件里面 你要做几件事
1.将黄色的view部分隐藏
2.停止旋转动画
3.开始唱针的停止动画
看过了消息事件方面的 接下来 我们就来看一下 动画特效方面的
动画旋转
首先来解释一下这个代码的标注
红色部分：
是整体的旋转特效 代码不多 就几句
这是一个死循环的播放动画 只要一开始 就会一直不停的旋转
黄色部分：
我试过直接在外部调用stopAnimation来结束animate的动画 可是失效了
所以只能在前面加一个判断语句
绿色部分：
当黄色部分为假的时候 说明动画应该停止了 也就意味着 我这时候应该让黄色的View部分给隐藏了
ok 你看 就是这么简单 寥寥几句 就写完了 有没有觉得非常简单呢
一起学ReactNative(3) 实现网易云音乐旋转唱片效果相关推荐
- android 网易云音乐上滑动画,Android 仿网易云音乐 音轨跳动效果
网易云音乐的Loading效果,大家应该也比较熟悉了,效果是一个红色音轨不断跳动的效果,一般用于Loading等待时填充使用.本篇来自定义这个效果. Android 仿网易云音乐 音轨跳动View.g ...
- axure源文件_Axure教程：实现网易云音乐有声播放效果
为了方便讲解,我们首先在桌面新建一个文件夹,命名为音乐.1.将自己想要演示播放的MP3音乐文件放在这个文件夹里面.2.给播放页添加一个中继器,随便命名,我给它命名为[音乐地址链接器],用来链接播放本地 ...
- 模仿网易云音乐黑胶唱片的交互实现
今天在 .NET MAUI 中我们来实现这个交互效果,先来看看效果: 使用.NET MAU实现跨平台支持,本项目可运行于Android.iOS平台. 创建页面布局 项目模拟了网易云音乐的播放主界面,可 ...
- 网易云音乐黑胶唱片html,黑胶唱片感浓厚：网易云音乐MB1蓝牙音箱要“还原声音本真”...
网易云音乐的受欢迎程度,让大家知道了音乐播放器也能用出情怀,其界面设计.歌曲推荐.人性化创意等让许多用户欲罢不能.而在各大厂商的智能音箱纷纷登场之际,拥有庞大用户量和智能算法的网易云音乐却" ...
- 微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）
下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式,播放等并没贴出来 实现效果的范围 动态图效果预览: stylusW,panW是获取系统宽度计算后的参数 wxml部分: <!-- 黑 ...
- [MAUI]模仿网易云音乐黑胶唱片的交互实现
文章目录 创建页面布局 创建手势控件 创建影子控件 唱盘拨动交互 唱盘和唱针动画 项目地址 用过网易云音乐App的同学应该都比较熟悉它播放界面. 这是一个良好的交互设计,留声机的界面隐喻准确地向人们传 ...
- Android仿网易云音乐：留声机效果
参考文章: blog.csdn.net/jasper_succ- blog.csdn.net/xiangzhihon- blog.csdn.net/lzq33521/ar- 效果图 资源1(当前用的是 ...
- Android 贝塞尔曲线实战之网易云音乐鲸云特效，2021程序员进阶宝典
一阶这个比较简单,因为没有在网上找到可以直接输入数学公式的工具,就手工推导了下. 
- Word2007发布文章成功
- html css js php常用网页代码汇总合集（一）网页设计入门代码知识汇总1
- win10硬盘根目录下出现msdia80.dll解决办法
- Navicat 设置自动插入时间触发器
- arduino/Mixly心知天气
- java 设置pdf 编码格式_Java 在PDF中添加条形码
- k8s搭建--裸机搭建（Bare Metal）
- 省略to的动词不定式八种情况
- NLP-词汇表征与词嵌入
- 我的java学习-三角形
- JAVA 取余 余数
- 2019.4.11 一题 XSY 1551 ——广义后缀数组（trie上后缀数组）
- Vue 使用云存储（七牛云）