-
Notifications
You must be signed in to change notification settings - Fork 5
/
GeneratePath.js
66 lines (60 loc) · 1.58 KB
/
GeneratePath.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
import React, { Component } from 'react';
import { ART, Easing, Animated } from 'react-native';
const { Surface, Group, Rectangle, Shape } = ART;
import Svg, { Circle, G, Text, Path, Line, Use } from 'react-native-svg';
const Animatee = {
G: Animated.createAnimatedComponent(G),
Path: Animated.createAnimatedComponent(Path),
Text: Animated.createAnimatedComponent(Text),
}
import * as shape from 'd3-shape';
import * as d3 from 'd3';
export default class GeneratePath extends Component {
constructor(props) {
super(props);
this.state= {
fillColor: new Animated.Value(0),
scaleX: new Animated.Value(0)
};
}
componentDidMount() {
this.executeMe();
}
executeMe() {
Animated.parallel([
Animated.timing(this.state.fillColor, {
toValue: 1,
duration: 150,
delay: 100 + 100 * this.props.idx,
useNativeDriver: true
}),
Animated.sequence([
Animated.timing(this.state.scaleX, {
toValue: 1,
duration: 150,
delay: 100 + 100 * this.props.idx,
useNativeDriver: true
}),
Animated.timing(this.state.scaleX, {
toValue: 0,
duration: 50,
useNativeDriver: true
})
])
]).start();
}
render() {
const anim = { transform: [{translateX: this.state.scaleX}] }
return (
<Animatee.Path
opacity={this.state.fillColor.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
})}
key={this.props.key}
d={this.props.d}
stroke= 'white'
strokeWidth={1} />
);
}
}