1+ /**
2+ * Created by wangdi on 24/12/16.
3+ */
4+ 'use strict' ;
5+ 6+ import React , { Component , PropTypes } from 'react' ;
7+ import { Animated , ART , Easing } from 'react-native' ;
8+ const { Surface, Group} = ART ;
9+ import AnimatedCircle from '../animated/AnimatedCircle' ;
10+ 11+ export default class ColorDotsLoader extends Component {
12+ static propTypes = {
13+ size : PropTypes . number ,
14+ betweenSpace : PropTypes . number ,
15+ color1 : PropTypes . string ,
16+ color2 : PropTypes . string ,
17+ color3 : PropTypes . string
18+ } ;
19+ 20+ static defaultProps = {
21+ size : 15 ,
22+ betweenSpace : 7 ,
23+ color1 : '#ff4500' ,
24+ color2 : '#ffd700' ,
25+ color3 : '#9acd32'
26+ } ;
27+ 28+ constructor ( props ) {
29+ super ( props ) ;
30+ const red = this . props . color1 ;
31+ const yellow = this . props . color2 ;
32+ const green = this . props . color3 ;
33+ this . state = {
34+ colors : [ red , red , red ] ,
35+ color : yellow ,
36+ x : new Animated . Value ( - this . props . size / 2 )
37+ } ;
38+ this . patterns = [
39+ [ yellow , red , red ] ,
40+ [ yellow , yellow , red ] ,
41+ [ yellow , yellow , yellow ] ,
42+ [ green , yellow , yellow ] ,
43+ [ green , green , yellow ] ,
44+ [ green , green , green ] ,
45+ [ red , green , green ] ,
46+ [ red , red , green ] ,
47+ [ red , red , red ] ,
48+ ] ;
49+ this . _animation = this . _animation . bind ( this ) ;
50+ this . timers = [ ] ;
51+ }
52+ 53+ render ( ) {
54+ const { size, betweenSpace} = this . props ;
55+ return (
56+ < Surface width = { size * 3 + betweenSpace * 2 } height = { size } >
57+ < Group >
58+ { this . state . colors . map ( ( item , i ) => {
59+ return < AnimatedCircle key = { i } fill = { item } radius = { size } x = { size / 2 + i * ( size + betweenSpace ) }
60+ y = { size / 2 } />
61+ } ) }
62+ < AnimatedCircle fill = { this . state . color } radius = { size } x = { this . state . x } y = { size / 2 } />
63+ </ Group >
64+ </ Surface >
65+ ) ;
66+ }
67+ 68+ componentDidMount ( ) {
69+ this . _animation ( ) ;
70+ }
71+ 72+ componentWillUnmount ( ) {
73+ this . unmounted = true ;
74+ this . timers . forEach ( ( id ) => {
75+ clearTimeout ( id ) ;
76+ } ) ;
77+ }
78+ 79+ _animation ( ) {
80+ const { size, betweenSpace, color1, color2, color3} = this . props ;
81+ const id1 = setTimeout ( ( ) => { this . setState ( { color : color3 } ) } , 600 ) ;
82+ const id2 = setTimeout ( ( ) => { this . setState ( { color : color1 } ) } , 1200 ) ;
83+ this . timers . push ( id1 ) ;
84+ this . timers . push ( id2 ) ;
85+ this . patterns . forEach ( ( item , i ) => {
86+ const id = setTimeout ( ( ) => {
87+ this . setState ( { colors : this . patterns [ i ] } ) ;
88+ } , i * 200 + 100 ) ;
89+ this . timers . push ( id ) ;
90+ } ) ;
91+ 92+ Animated . sequence ( [
93+ Animated . timing ( this . state . x , {
94+ toValue : size * 3 + betweenSpace * 2 + size / 2 ,
95+ duration : 600 ,
96+ easing : Easing . linear } ) ,
97+ Animated . timing ( this . state . x , {
98+ toValue : - size / 2 ,
99+ duration : 0 } ) ,
100+ Animated . timing ( this . state . x , {
101+ toValue : size * 3 + betweenSpace * 2 + size / 2 ,
102+ duration : 600 ,
103+ easing : Easing . linear } ) ,
104+ Animated . timing ( this . state . x , {
105+ toValue : - size / 2 ,
106+ duration : 0 } ) ,
107+ Animated . timing ( this . state . x , {
108+ toValue : size * 3 + betweenSpace * 2 + size / 2 ,
109+ duration : 600 ,
110+ easing : Easing . linear } )
111+ ] ) . start ( ( ) => {
112+ if ( ! this . unmounted ) {
113+ this . state . x . setValue ( - size / 2 ) ;
114+ this . setState ( { color : color2 } ) ;
115+ this . _animation ( ) ;
116+ }
117+ } ) ;
118+ }
119+ }
0 commit comments