Question

我正在尝试旋转一个图像它基本上是为了显示硬币被翻转（硬币投掷动画）我已经将这个基本动画应用到图像但它没有动画，

我在模拟器上测试时图像静止

这是我的index.android.js文件：

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Animated,
  Easing
} from 'react-native';

export default class animateTest extends Component {

  constructor(props) {
      super(props);
      this.spinValue = new Animated.Value(0);
    }

    spin() {
      this.spinValue.setValue(0);
      Animated.timing(
        this.spinValue, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: true,
          easing: Easing.linear
        }
      ).start();
    }

  render() {
    const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});

    return (
      <View style={styles.ViewStyle}>
      <Animated.Image
            style={[
              styles.coinStyle,
               {
                transform: [
                  { rotate: spin }
                ]
              }
            ]}
             source={require('./Images/Coin_Tail.png')}
            style={styles.coinStyle} />
      </View>
    );
  }
}
const styles = {
  coinStyle: {
    width: 150,
height: 150,
  },
  ViewStyle: {
    flex: 1,
    justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'black'
  }
};

AppRegistry.registerComponent('animateTest', () => animateTest);

Answer 1

您的代码有两个问题：

1）在render函数中，您的图像有一个重复的style道具，它会使用变换样式覆盖第一个样式。要修复它，请删除第二个样式支柱

2）你的代码没有触发旋转动画，你可以在按下事件时添加一个可触摸的方法来调用你的spin方法。要进行快速测试，您可以添加

  componentDidMount() {
    this.spin();
  }

在图像上设置的旋转动画不能在react-native中工作

1 个答案: