-
Notifications
You must be signed in to change notification settings - Fork 0
/
Bee.tsx
72 lines (61 loc) · 1.8 KB
/
Bee.tsx
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
import React, { FunctionComponent, useEffect, useState, useCallback, useRef } from 'react'
// Hooks
// Styles
import { Metrics, Colors, Fonts } from '../Theme';
// Utils
// Redux
// Components
import { StyleSheet, StatusBar, Text, View, ViewStyle, Animated } from 'react-native';
import Bee from '../Assets/Images/bee';
interface ScreenHeaderProps {
style: ViewStyle,
size: number,
width: number,
}
const ScreenHeader: FunctionComponent<ScreenHeaderProps> = ({
style,
size,
width,
}) => {
const deg2rad = (degrees: number) => degrees / (180 / Math.PI)
const angleVariance = (Math.random() * 80) - 40
const angle = deg2rad(angleVariance)
const height = width * Math.tan(angle)
const animatedValue = useRef<Animated.Value>(new Animated.Value(0))
let ANIMATION_DURATION = 5000 + (Math.random() * 2000)
Animated.loop(
Animated.sequence([
Animated.delay(Math.random() * ANIMATION_DURATION),
Animated.timing(animatedValue.current, { toValue: 1, duration: ANIMATION_DURATION, useNativeDriver: true }),
])
).start()
return (
<Animated.View style={
{ transform: [
{
translateX: animatedValue.current.interpolate({inputRange: [0, 1], outputRange: [-size, width + size]}),
},
{
translateY: animatedValue.current.interpolate({inputRange: [0, 1], outputRange: [0, height]})
},
// { scale: animatedValue.current.interpolate({inputRange: [0, 1], outputRange: [0.8, 1.2]}) },
]}
}>
<Bee
style={[ style,
{
width: size,
height: size,
transform: [{ rotate: `${45 + angleVariance}deg` }],
}]}
width={size}
height={size}
/>
</Animated.View>
)
}
const styles = StyleSheet.create({
container: {
},
})
export default ScreenHeader