react-native Animated, 旋转动画

雨点打透心脏的1/2处 2022-02-22 16:12 409阅读 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 条评论，409人围观）

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

相关阅读

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

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

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

相关 animation动画

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

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

相关 android----动画Animation

android的动画模式分成两种形式：frame和tweened frame:画面转动画 XML中使用：translate、rotate

ゝ一纸荒年。/ 2022年08月09日 12:42/ 0 赞/ 240 阅读

相关 Animation用法_animation动画效果

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

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

相关【CSS 】动画animation

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

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

相关 9、animation动画

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

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

相关 react-native Animated, 旋转动画

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

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

相关 jq animate动画

animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行

矫情吗；*/ 2021年07月25日 00:25/ 0 赞/ 521 阅读

相关 css动画 animation

通过关键帧来模拟动画,必须是块级元素才能产生动画 onAnimationEnd监听帧动画结束 1、定义动画类型法一:@keyf

青旅半醒/ 2021年07月24日 23:41/ 0 赞/ 462 阅读

相关 CSS Animations 动画

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

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