zoukankan      html  css  js  c++  java
  • RN animated组动画

    代码:

    export default class AnimationGroupScene extends Component {
    
        constructor() {
            super()
            this.animatedValue1 = new Animated.Value(0)
            this.animatedValue2 = new Animated.Value(0)
            this.animatedValue3 = new Animated.Value(0)
        }
    
        componentDidMount() {
            this.animate()
        }
    
        animate() {
            this.animatedValue1.setValue(0)
            this.animatedValue2.setValue(0)
            this.animatedValue3.setValue(0)
            const createAnimation = function (value, duration, easing, delay = 0) {
                return Animated.timing(
                    value,
                    {
                        toValue: 1,
                        duration,
                        easing,
                        delay
                    }
                )
            }
            Animated.parallel([
                createAnimation(this.animatedValue1, 2000, Easing.ease),
                createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
                createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
            ]).start()
        }
    
    
        render() {
    
            const scaleText = this.animatedValue1.interpolate({
                inputRange: [0, 1],
                outputRange: [0.5, 2]
            })
            const spinText = this.animatedValue2.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '720deg']
            })
            const introButton = this.animatedValue3.interpolate({
                inputRange: [0, 1],
                outputRange: [-100, 400]
            })
    
            return (
                <View style={styles.container}>
                    <Animated.View
                        style={{transform: [{scale: scaleText}]}}>
                        <Text>Welcome</Text>
                    </Animated.View>
                    <Animated.View
                        style={{marginTop: 20, transform: [{rotate: spinText}]}}>
                        <Text
                            style={{fontSize: 20}}>
                            to the App!
                        </Text>
                    </Animated.View>
                    <Animated.View
                        style={{top: introButton, position: 'absolute'}}>
                        <TouchableHighlight
                            onPress={this.animate.bind(this)}
                            style={styles.button}>
                            <Text>启动组动画</Text>
                        </TouchableHighlight>
                    </Animated.View>
    
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            marginTop: 20,
            justifyContent: 'center',
            alignItems: 'center',
        },
        button: {
            marginTop: 20,
            backgroundColor: '#808080',
            height: 35,
             140,
            borderRadius: 5,
            justifyContent: 'center',
            alignItems: 'center',
        },
    
    });
  • 相关阅读:
    SpringMVC请求静态资源
    Spring视图和视图解析器
    @ModelAttribute运行流程
    SpringMVC模型数据处理
    SpringMVC简单映射请求参数介绍
    队列和栈的问题
    非比较排序——计数排序、基数排序、桶排序
    递归
    对数器的使用
    常见的比较排序
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/10184731.html
Copyright © 2011-2022 走看看