• 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',
        },
    
    });
  • 相关阅读:
    day16_包(Package)丶API丶JavaBean
    day12_类中成员之方法
    day18_面向对象的三大特征之多态
    day14_面向对象的三大特征之继承
    react记录
    如何使用Houdini进行程序化优化?
    程序员健康指南
    uniapp 自定义导航
    uniapp :uviewui
    markdown
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/10184731.html
Copyright © 2020-2023  润新知