Question

我正在玩Native Native，我对转换动画有问题。

Windows 10 - Hyper V，Visual Code Emulator Android - Ignite Boilerplate。

我正在尝试做什么：

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

我有什么：

见下图（我已经设置了一个setTimout来查看第一帧）。在第一次单击时，组件第一次以非常快的速度显示其自然宽度和高度，但0,001上的刻度无效。之后，动画从0,001到2开始。

使用其他点击次数，圆圈会以前一个圆圈的尺寸开始第一个框架。然后，动画开始了。但是再一次，比例：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，因为它太少了。

使用React Native进行动画转换无法正常工作

1 个答案: