前言
个人一直比较喜欢网易云音乐,所以就想使用react native 仿写一个,当然开篇就是登录页面,我这边是以IOS的UI为准的,看到网易的登录页面后,被惊艳到了,想到底该怎么实现这种缥缈的波纹,有同学感兴趣的话,可以退出网易的账号,仔细观察下,还是有很多细节处理的很好的......本篇基于ReactNative实现点赞飘心动画实现
第一步
在构造函数中声明多个用来驱动动画的Animate变量,我这里创建了10个,当然你也可以创建更多,但是不建议,十个及以下最好,因为同时在页面上显示的圆圈不会那么多,并且因为这个动画是改变视图的宽高属性,无法调用原生的UI线程,纯粹的JS执行来执行动画,太多的话,非常容易掉帧.以及一个用来做视图于动画匹配的变量,可能有同学会好奇为什么要初始化这么多变量,我理解的是在React Native中任何可显示的内容都不可能凭空出现,如果页面上有十个view,那就一定有十个实例,即便他们都一样
constructor(props) {
super(props);
this.animViewIndex = 0;
this.viewArr = Array(10).fill()
this.viewArr.map((_, index) => this[`animView${index}`] = new Animated.Value(0))
}
第二步
在render函数中使用循环声明多个View,因为这个动画的本质其实就是圆圈的半径变大,然后透明度逐渐增大,所以需要控制的变量很少,我这里初始化圆圈的大小为74,这个跟中间的LOGO大小保持一致.
这里有个关于动画的细节需要说一下,在做图片的大小变形的时候,最好使用transform的scaleX,scaleY或者scale,因为在IOS中每次调整组件的宽高,都需要重新剪裁和缩放原始图片,这会带来很大的性能开销,图像大小跟内存消耗成正比,不过在我们这个示例中却无法使用,因为我们变动的是视图的大小,而非图片,如果使用scale的话,会造成视图的失真,比如边框变宽等问题,希望同学们注意
<View style={LoginIndexSty.common.outer}>
<TouchableOpacity onPress={() => this.startAnimate()}>
<Logo/>
</TouchableOpacity>
{
this.viewArr.map((_, index) => {
let s = 74;
let size = this[`animView${index}`].interpolate({
inputRange: [0, 1],
outputRange: [1, WIDTH * 1.4]
})
let border = this[`animView${index}`].interpolate({
inputRange: [0, 1],
outputRange: [s / 2, WIDTH * 0.7]
})
let opacity = this[`animView${index}`].interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 1, 0]
})
return <Animated.View
key={index}
style={[LoginIndexSty.common.animateContainer, {
width: size,
height: size,
// transform: [{scale: size}],
borderRadius: border,
opacity,
}]}/>
})
}
</View>
第三步
使用构造函数中定义的驱动动画的变量来跟我们的视图一一对应,然后根据动画的当前值,判断是否驱动下一个视图,目前动画的时间设置的是7秒钟,这个是根据我个人观察网易云音乐的时间得来的,具体的...可能得拿秒表计时一下...🤔
这里有一个细节,在最后的一行,是为了做随机时间执行动画,因为通过观察发现网易云音乐的波纹不是固定时间做动画的
startAnimate = () => {
this[`animView${this.animViewIndex}`].setValue(0)
let currentValue = this[`animView${this.animViewIndex}`].__getValue()
if (currentValue !== 0) {
this.animViewIndex++
}
Animated.timing(this[`animView${this.animViewIndex}`],
{
toValue: 1,
duration: 7000,
}
).start(() => {
this[`animView${this.animViewIndex}`].setValue(0)
})
if (this.animViewIndex > 8) {
this.animViewIndex = 0
}
this.animViewIndex++
setTimeout(() => this.startAnimate(), Math.floor(Math.random() * (1000)) + 500)
}
看成品(由于gif非高清的,我把波纹的颜色改成了白色😂,方便大家看效果)
如果觉得这些内容对你有用,那点个赞再走吧❤️,欢迎转发,还请注明出处,谢谢
