android - React Native 的动画转换无法正常工作

Question

我正在玩 React Native，我遇到了过渡动画的问题。

Windows 10 - Hyper V，视觉代码模拟器 Android - Ignite Boilerplate。

我正在尝试做的事情:

当我点击时，我想在点击位置显示一个带有从 0 到 2 的缩放动画的圆圈。

我有什么:

见下图(我设置了一个setTimout来查看第一帧)。第一次单击时，组件以其自然宽度和高度第一次快速显示，但 0,001 上的比例没有影响。之后，动画从 0,001 到 2 的比例开始。

随着其他点击，圆圈以前一个圆圈的尺寸开始第一帧。然后，动画开始。但是又一次，scale : 0 在第一帧没有效果。

这是午餐屏幕的代码:

export default class LaunchScreen extends Component {
  state = {
    clicks: []
  };
  handlePress(evt) {
    console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY)
    let xCoord = evt.nativeEvent.locationX;
    let yCoord = evt.nativeEvent.locationY;
    this
      .state
      .clicks
      .push({x: xCoord, y: yCoord});
    this.setState({clicks: this.state.clicks});
  }
  renderClick() {
    if (this.state.clicks.length > 0) {
      return this
        .state
        .clicks
        .map((item, i) =>< ClickAnimation key = {
          item.x
        }
        x = {
          item.x
        }
        y = {
          item.y
        } />)
    } else {
      return <View/>
    }

  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.scrollView}
          horizontal={true}
          showsHorizontalScrollIndicator={true}
          contentContainerStyle={styles.scrollView}>
          <TouchableWithoutFeedback
            style={styles.touchableWithoutFeedback}
            onPress=
            {evt => this.handlePress(evt)}>
            <View style={styles.scrollView}>
              {this.renderClick()}
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
      </View>
    )
  }
}

这里是圆的组成部分:

import React from 'react';
import PropTypes from 'prop-types';
import {Animated, View, Easing} from 'react-native';

export default class ClickAnimation extends React.Component {
    constructor() {
        super();
        console.log(this.state)
        this.state = {
            scaleAnim: new Animated.Value(0.001);
        };  
    }
    componentDidMount() {

        Animated
            .timing(this.state.scaleAnim, {
            toValue: 2,
            duration: 2000
        })
            .start();
       .scaleAnim
    }
    render() {
        return (<Animated.View
            style={{
            zIndex: 10,
            borderColor: "blue",
            borderRadius: 400,
            borderWidth: 1,
            position: "absolute",
            top: this.props.y,
            left: this.props.x,
            width: 60,
            height: 60,
            backgroundColor: "red",
            transform: [
                {
                    scaleY: this.state.scaleAnim
                        ? this.state.scaleAnim
                        : 0
                }, {
                    scaleX: this.state.scaleAnim
                        ? this.state.scaleAnim
                        : 0
                }
            ]
        }}/>);
    }
}

你知道为什么会这样吗？

Answer 1

我找到了解决方案。

这伴随着这个问题:

https://github.com/facebook/react-native/issues/6278

我已经看到了，这就是我写 0,001 的原因。但是 0,001 还是太少了。使用 0,01 效果很好。

所以答案是:

只需将 0.001 替换为 0.01，因为它太少了。