一起学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 你看 就是这么简单 寥寥几句 就写完了 有没有觉得非常简单呢