Voyz's Studio.

React学习笔记(六)

字数统计: 637阅读时长: 3 min
2019/04/25 Share

渐变动画

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
import React ,{ Component } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native';

import {
truePage,
trueButton,
trueViewPort
} from '@ctrip/crn';


export default class Page1 extends Page {
constructor(props){
super(props);
this.state={
fadeAnim: new Animated.Value(0),
}
// this.push = this.push.bind(this)
}

componentDidMount() {
Animated.timing( // 随时间变化而执行动画
this.state.fadeAnim, // 动画中的变量值
{
toValue: 1, // 透明度最终变为1,即完全不透明
duration: 10000, // 让动画持续一段时间
}
).start(); // 开始执行动画
}

render() {
let { fadeAnim } = this.state;
return (
<ViewPort>
<View style={style.box}>
<Animated.View style={[style.fadeDiv,{opacity: fadeAnim}]}>
<Text style={style.text}>
Fading in
</Text>
</Animated.View>
</View>
<Button
onPress = {() => {this.push('page2',{"a":"b"})}}
style={style.button}>
Go to Page2
</Button>
</ViewPort>
);
}

}

const style = StyleSheet.create({
box:{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
fadeDiv:{
width: 250,
height: 50,
backgroundColor: 'powderblue',
},
text:{
fontSize: 28,
textAlign: 'center',
margin: 10
},
button: {
backgroundColor: '#333333',
},
})

旋转和移动

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React ,{ Component } from 'react';
import { Animated, Text, View, StyleSheet,Easing } from 'react-native';

import {
Page,
Button,
ViewPort
} from '@ctrip/crn';


export default class Page1 extends Page {
constructor(props){
super(props);
this.state={
fadeAnim: new Animated.Value(0),
spinValue: new Animated.Value(0),
moveValue: new Animated.Value(0),
}
}


componentDidMount() {

Animated.sequence([

Animated.timing(
this.state.moveValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
),
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 5000,
easing: Easing.linear
}
),
Animated.timing(
this.state.spinValue,
{
toValue: 1,
duration: 4000,
easing: Easing.linear
}
)

]).start();

}

render() {
let { fadeAnim } = this.state;
let { spinValue } = this.state;
let { moveValue } = this.state;

const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});

const move = moveValue.interpolate({
inputRange: [0,0.3,1],
outputRange: [0,100,0]
})

return (
<ViewPort>
<View style={style.box}>

<Animated.View style={[style.fadeDiv,{opacity: fadeAnim}]}>
<Text style={style.text}>
Fading in
</Text>
</Animated.View>

<Animated.View style={[style.rotatebox,{transform: [{rotate: spin}]}]}>
<Text style={style.text}>Roatate</Text>
</Animated.View>

<Animated.View style={{marginTop: move}}>
<Text style={style.text}>Move</Text>
</Animated.View>

</View>
<Button
onPress = {() => {this.push('page2',{"a":"b"})}}
style={style.button}>
Go to Page2
</Button>
</ViewPort>
);
}

}

const style = StyleSheet.create({
box:{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
fadeDiv:{
width: 250,
height: 50,
backgroundColor: 'powderblue',
},
text:{
fontSize: 15,
textAlign: 'center',
margin: 10,
// line-height:60
},
button: {
backgroundColor: '#333333',
},
rotatebox:{
backgroundColor: '#338833',
width: 100,
height: 60,
}
})
CATALOG
  1. 1. 渐变动画
  2. 2. 旋转和移动