-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
72 lines (62 loc) · 1.62 KB
/
index.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// @flow
import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet, Animated, Dimensions, Easing } from 'react-native'
const Y = Dimensions.get('window').height
export type EmojiDropProps = {
emoji: string
}
export type EmojiRainProps = {
count?: number
} & EmojiDropProps
function drops(count: number = 25, props: EmojiDropProps) {
const list = []
for (let i = 0; i < count; i++) {
list.push(<EmojiDrop key={i} {...props} />)
}
return list
}
export function EmojiRain(props: EmojiRainProps) {
return (
<View style={styles.container} pointerEvents="none">
{drops(props.count, props)}
</View>
)
}
export function useDropAnimation() {
const [animated] = useState(new Animated.Value(0))
const [style] = useState({
position: 'absolute',
top: 0, left: `${Math.random() * 100}%`
})
const [scale] = useState(1.2 + Math.random())
function animation() {
Animated.timing(animated, {
toValue: 1,
delay: Math.round(Math.random() * 2500),
duration: 2500 + Math.round(Math.random() * 3000),
easing: Easing.in(Easing.ease),
useNativeDriver: true
}).start()
}
useEffect(animation, [1])
return {
...style,
transform: [{
translateY: animated.interpolate({
inputRange: [0, 1],
outputRange: [-50, Y + 50]
}),
}, { scale }]
}
}
function EmojiDrop(props: EmojiDropProps) {
const style = useDropAnimation()
return <Animated.Text style={style}>{props.emoji}</Animated.Text>
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0, bottom: 0,
left: 0, right: 0
}
})