Question

我正在尝试对某些组件进行动画处理。我只想更改视图宽度的大小。我一直在寻找制作简单动画的最简单方法。我使用的是“动画”库。我无法完成这项工作

我正在寻找一些教程，但是它不起作用。由于某种原因，代码没有重新调整“ Animated.View”的初始宽度，因此它是在构造函数中声明的变量，就像“ animationwidth = new Animated.Value（11）;”。我不知道问题出在变量的声明中，是“ Animated.View”样式还是“ animated.timing”函数

import React, { Component } from 'react';
import {Animated,Text,Alert,View, Image, Button} from 'react-native';

export default class Game extends Component {
    constructor(props) {
        super(props);
        this.state = {
            opa: 1
        };
        animationwidth = new Animated.Value(11);

    }
    componentDidmount(){
        Animated.timing(this.animationwidth, {
            toValue: 300
        }).start()
    }

    render(){
        return(
            <View style={{flex:1,alignItems:'center',backgroundColor:'green',justifyContent:'center'}}>
                <Animated.View style={{ height:250, width:this.animationwidth ,backgroundColor:'blue'}}/>
            </View>
        )
    }
}

Answer 1

您忘了将状态包括在animationwidth中：

像这样更改您的Animated.View组件样式：

<Animated.View style={{ height:250, width:this.state.animationwidth ,backgroundColor:'blue'}}/>

如果没有动画。在Animated计时函数中添加duration属性，还可以将状态添加到animationwidth中：

        Animated.timing(this.state.animationwidth, {
        toValue: 300,
        duration: 1000
    }).start()
}

根据您的代码，View的宽度将从11开始，以300结尾

Answer 2

这里的问题是渲染方法没有再次调用，因为状态没有再次更新。您需要在componentDidmount中更新一些状态变量，因此render方法将再次调用。添加一个状态变量，然后在componentDidMount中切换该变量

    this.state = {
        isShowing : false
    };

    componentDidmount(){
      this.setState({isShowing:!this.state.isShowing})
      Animated.timing(this.animationwidth, {
        toValue: 300
      }).start()
    }

我应该如何使用库“ Animated”为React本机组件制作动画

2 个答案: