zoukankan      html  css  js  c++  java
  • react-native Animated, 旋转动画

    Animated 仅封装了四个可以动画化的组件:

      ViewTextImage、ScrollView

    可以使用 Animated.createAnimatedComponent()来封装你自己的组件。

    下面是使用 Image 旋转的例子

    import React, {Component} from 'react';
    import { StyleSheet, View, Animated, Easing } from 'react-native';
    
    const circle = require('../../resources/img/loginCircle.png');
    class Index extends Component {
        constructor(props) {
            super(props);
            this.spinValue = new Animated.Value(0)
            this.state = {
            };
        }
        componentDidMount(){
            this.spin();
        }
        //旋转方法
        spin = () => {
            this.spinValue.setValue(0)
            Animated.timing(this.spinValue,{
              toValue: 1, // 最终值 为1,这里表示最大旋转 360度
              duration: 4000,
              easing: Easing.linear
           }).start(() => this.spin())
        }
        render() {
            const { user, pwd, fadeAnim} = this.state;
            //映射 0-1的值 映射 成 0 - 360 度  
            const spin = this.spinValue.interpolate({
                inputRange: [0, 1],//输入值
                outputRange: ['0deg', '360deg'] //输出值
              })
            return(
                <View style={styles.container}>
                        <Animated.Image style={[styles.circle,{transform:[{rotate: spin }]}]} source={circle}/>
                </View>
            );
        }
    }
    const styles = StyleSheet.create({
        container:{
            flex:1,
            alignItems:'center',
            justifyContent:'center',
            backgroundColor:'#00a0e4'
        },
        circle:{
            position:'absolute',
             300,
            height: 306
        }
    });
    export default Index;

    https://reactnative.cn/docs/0.50/animations.html#content

  • 相关阅读:
    常见的兼容问题
    css3新增伪类
    完美的js运动框架
    C++ 常用宏
    多线程代码段 自清理线程
    寒假自学(十一)
    寒假自学(十)
    寒假自学(九)
    寒假自学(八)
    寒假自学(七)
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/9298127.html
Copyright © 2011-2022 走看看