Question

这是我第一次使用本机的动画库制作动画。是否可以在屏幕中央设置动画？如果是这样，我该怎么做？

这是我的代码如下：我的屏幕左上角基本上有一个60x60的盒子，可以向下移动屏幕的1/2并且宽度超过1/2。我希望它横向扩展大约150像素。问题是盒子没有在屏幕中央扩展

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    View,
    Animated,
    Dimensions,
    Easing
} from 'react-native';

const {width,height} = Dimensions.get('window')
export default class App extends Component {

    constructor(){
        super()

        this.state = {
            width: new Animated.Value(60),//Animated.Value/ValueXY used to hook up animation attributes, also for single values
            height: new Animated.Value(60),
            animateXY : new Animated.ValueXY({x:0,y:0})//for vectors
        }
    }

    componentWillMount(){
        //called when an instance of a component is being created and inserted into the DOM
        Animated.sequence([
            //function where we add the ending results
            Animated.timing(
                this.state.animateXY,
                {
                toValue: {x:0, y:height/2},
                duration: 2000
            }),
            Animated.timing(
                this.state.animateXY,
                {
                    toValue: {x:width/2, y:height/2},
                    duration: 2000,
                }),
            Animated.timing(
                this.state.width,
                {
                    toValue: 150,
                    duration: 3000
                }),

        ]).start()

    }
  render() {
    return (
        <View>
            <Animated.View
                style={
                    {
                        width: this.state.width,
                        height:this.state.height,
                        backgroundColor:"teal",
                        position:'absolute',
                        top: this.state.animateXY.y,
                        left: this.state.animateXY.x,

                    }
                }
            />
        </View>

    );
  }
}

任何建议都可以！谢谢！杰马

Answer 1

您没有更新身高。也许在你的情况下，你只能使用宽度，因为它是一个正方形

屏幕中央的动画框扩展（React Native Animated）

1 个答案: