Voyz's Studio.

React学习笔记（六）

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. 旋转和移动
Total : 137
2021
2020
2019
2018
技术贴 JavaScript Flutter 算法题 热题HOT100 哈希表 滑动窗口 回溯算法 链表 二分法 矩阵 动态规划 贪心算法 指针 快速排序 迭代 二叉树 数组 快慢指针 排序 背包问题 单调栈 栈 DFS 岛屿问题 React Native React 旅行记 效率工具 python 小程序 英语 生活 足球 算法 性能优化 ES6 TypeScript koa