react-native-reanimated-keyframes/App.js at main · funcsio/react-native-reanimated-keyframes · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, {useState} from 'react';
import {Text, StyleSheet, Pressable} from 'react-native';
import Animated, {Keyframe, Easing} from 'react-native-reanimated';

const EASING_BEZIER = Easing.bezier(0.22, 1, 0.36, 1);

const App = () => {
  const [visibility, setVisibility] = useState(false);

  const enteringAnimation = new Keyframe({
    0: {
      borderRadius: 0,
      transform: [{rotate: '0deg'}],
      easing: EASING_BEZIER,
    },
    33: {
      borderRadius: 20,
      transform: [{rotate: '0deg'}],
      easing: EASING_BEZIER,
    },
    66: {
      borderRadius: 50,
      transform: [{rotate: '45deg'}],
      easing: EASING_BEZIER,
    },
    100: {
      borderRadius: 100,
      transform: [{rotate: '90deg'}],
      easing: EASING_BEZIER,
    },
  });

  const exitAnimation = new Keyframe({
    0: {
      opacity: 1,
      transform: [{scale: 1}],
      easing: EASING_BEZIER,
    },
    100: {
      opacity: 0,
      transform: [{scale: 6}],
      easing: EASING_BEZIER,
    },
  });

  return (
    <>
      <Animated.View style={styles.root}>
        {visibility && (
          <Animated.View
            entering={enteringAnimation.duration(2000)}
            exiting={exitAnimation.duration(1000)}
            style={[styles.dot]}
          />
        )}
        <Pressable
          android_ripple={{
            color: '#aaa',
            radius: 100,
            borderless: false,
          }}
          style={styles.button}
          onPress={() => setVisibility(currentState => !currentState)}>
          <Text style={styles.buttonText}>
            {!visibility ? 'Mount' : 'Un-Mount'}
          </Text>
        </Pressable>
      </Animated.View>
    </>
  );
};

const DOT_SIZE = 200;
const styles = StyleSheet.create({
  root: {
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#000',
    height: '100%',
  },
  dot: {
    height: DOT_SIZE,
    width: DOT_SIZE,
    borderRadius: DOT_SIZE,
    backgroundColor: '#fafafa',
    margin: 10,
  },
  button: {
    alignItems: 'center',
    minWidth: 130,
    position: 'absolute',
    backgroundColor: '#651fff',
    paddingHorizontal: 20,
    paddingVertical: 10,
    transform: [
      {
        translateY: -200,
      },
    ],
  },
  buttonText: {
    color: '#fff',
    fontWeight: '300',
    fontSize: 20,
  },
});

export default App;