react-native Animated, 旋转动画

雨点打透心脏的1/2处 2022-02-22 16:12 423阅读 0赞

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',
            width: 300,
            height: 306
        }
    });
    export default Index;

![840302-20180712101436563-662631370.gif][]

[840302-20180712101436563-662631370.gif]: /images/20220222/67985b1a6d01427a9cae78f48acc4ebc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Property Animation属性动画：rotation旋转(2)

Android Property Animation属性动画：rotation旋转(2) 附录的文章1，说明了如何简单的实现一个Android的属性动画Propert

野性酷女/ 2024年02月17日 16:49/ 0 赞/ 96 阅读

相关 animation:动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

怼烎@/ 2023年07月11日 08:48/ 0 赞/ 25 阅读

相关 animation动画

一、集成方法：分两步： 1、首先使用animation 注册动画，如： .mydiv{ -webkit-animation:mymove 5s inf

柔情只为你懂/ 2023年01月07日 02:30/ 0 赞/ 342 阅读

相关 Animation用法_animation动画效果

动画类型 Android的animation由四种类型组成 XML中 <table> <tbody> <tr> <td><spa

偏执的太偏执、/ 2022年08月07日 15:59/ 0 赞/ 314 阅读

相关【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且

╰半橙微兮°/ 2022年07月13日 08:14/ 0 赞/ 286 阅读

相关 9、animation动画

除了前面章节介绍的3d变换可以做动画，还可以通过animation来做动画。下面分别介绍animation的各属性。 1、@keyframes @keyframes定义了

系统管理员/ 2022年04月06日 04:22/ 0 赞/ 302 阅读

相关 animation动画效果

animation属性开发工具与关键技术：DW、animation动画效果作者：黄桂康撰写时间：2019.02.20 animation属性是

梦里梦外;/ 2022年03月18日 08:56/ 0 赞/ 389 阅读

相关 react-native Animated, 旋转动画

import React, {Component} from 'react'; import { StyleSheet, View, Animated, Eas

雨点打透心脏的1/2处/ 2022年02月22日 16:12/ 0 赞/ 424 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 479 阅读

相关 CSS Animations 动画

包含所有前缀的`CSS`关键帧。您需要做的就是选择一个动画并在`CSS`动画中使用它。 animations.css .animationStart{

小咪咪/ 2021年07月04日 16:12/ 0 赞/ 542 阅读