Dyfan

React Native实现点赞飘心动画

2020-09-05

前言

公司正在做直播项目,其中需要做一个类似YY,虎牙,斗鱼中的点赞飘心的动画.由于没有找到对应的库,就只能自己写一个了,目前采用的是ReactNative中的插值动画,其实实现起来也比较简单.上代码…..

第一步

在构造函数中声明多个用来驱动动画的Animate变量,以及一个用来做视图于动画匹配的变量

1
2
3
4
5
6
7
constructor(props) {
        super(props)
        for (let i = 0; i < 10; i++) {
            this[`HeartArg${i}`] = new Animated.Value(0)
        }
        this.viewNum = 0
    }

第二步

在render函数中使用循环声明多个View,我这里使用的是10个图片来进行动画的循环,其中要注意的是ref属性,这里是为了后续设置随机颜色而设置的变量,其中的top,right, transform, opacity都使用了插值函数,不过大家也可以通过这种方式实现对其他属性的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<View>
        {
          Array(10).fill().map((_, index) => {
                return <Animated.Image
                    key={index}
                    ref={_ => this[`animImg${index}`] = _}
                    style={[ChatRoomToolsSty.animImg, {
                        top: this[`HeartArg${index}`].interpolate({
                            inputRange: [0, 1, 2, 3],
                            outputRange: [10, -100, -200, -300]
                        }),
                        right: this[`HeartArg${index}`].interpolate({
                            inputRange: [0, 1, 2, 3],
                            outputRange: Math.floor(Math.random() + 0.5) === 0 ? [7, 30, 15, 7] : [7, 0, 30, 10]
                        }),
                        transform: [{
                            scale: this[`HeartArg${index}`].interpolate({
                                inputRange: [0, 1, 2, 3],
                                outputRange: [0.5, 1, 1.5, 1]
                            })
                        }],
                        opacity: this[`HeartArg${index}`].interpolate({
                            inputRange: [0, 1, 2, 3],
                            outputRange: [0.5, 1, 0.5, 0]
                        })
                    }]}
                    source={Images.action4}
                />
            })
        }
</View>

第三步

声明一个用来驱动动画的函数,其中的随机颜色用到了上一步中的ref声明, COLOR_ARR这个常亮根据产品需求可以自己定义一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
startAnimate = () => {
    this[`HeartArg${this.viewNum}`].setValue(0)
    //设置随机颜色
    let colorIndex = Math.floor(Math.random() * 10)
    this[`animImg${this.viewNum}`].setNativeProps({
        style: {
            tintColor: COLOR_ARR[colorIndex]
        }
    })
    //根据当前动画驱动值进行判断是否对新VIEW进行驱动
    let currentValue = this[`HeartArg${this.viewNum}`].__getValue()
    if (currentValue !== 0) {
        this.viewNum++
    }
    Animated.timing(
        this[`HeartArg${this.viewNum}`],
        {
            toValue: 3,
            duration: 2000,
            easing: Easing.linear
        }
    ).start(() => {
        this[`HeartArg${this.viewNum}`].setValue(0)
    })
    //如果当前正在驱动的VIEW的数量大于8,则重置回0,让动画循环
    if (this.viewNum > 8) {
        this.viewNum = 0
    }
    this.viewNum++
}

颜色数组可定义成下面这样👇

1
2
3
4
5
6
7
8
9
10
11
12
const COLOR_ARR = [
    '#9C89B8',
    '#F0A6CA',
    '#EFC3E6',
    '#F0E6EF',
    '#B8BEDD',
    '#5BC0EB',
    '#FDE74C',
    '#9BC53D',
    '#E55934',
    '#FA7921'
]

第四步

定义一个Btn按钮,开始吧😁

1
2
3
4
5
<ChatRoomToolsActionBtn
    source={Images.action4}
    onPress={() => {
          this.startAnimate()
             }}/>
看成品

如果觉得这些内容对你有用,那点个赞再走吧❤️,欢迎转发,还请注明出处,谢谢

Tags: react native
← React Native实现网易云音乐登录波纹动画 Hexo搭建过程 →
赏
使用支付宝打赏
使用微信打赏

扫描二维码，分享此文章