Question

任何人都可以分享一个本机动画的代码示例，该示例将图像从左移到右，然后移回起点并重复该动作吗？

更新：

下面的答案很有帮助，但是没有用。我用它来创建以下动画，该动画将图像从左向右移动（我正在使用RN 0.62.2）。

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

const test = require('../images/test.png');

export class Splash extends React.Component {
    constructor(props) {
        super(props);
        this.state = { xValue: new Animated.Value(-100) }
    }

  moveLR = () => {
        Animated.timing(
          this.state.xValue,
          {
            toValue: 100,
            duration: 1000, // the duration of the animation
            easing: Easing.linear, // the style of animation
            useNativeDriver: true
          }
        ).start();
  }

  moveRL = () => {
    Animated.timing(
      this.state.xValue,
      {
        toValue: -100,
        duration: 3000, // the duration of the animation
        easing: Easing.linear, // the style of animation
        useNativeDriver: true
      }
    ).start();
  }

  componentDidMount = () => {
    this.moveLR();
  }

  render = () => {
    return (
      <View style={styles.mainContainer}>
        <Animated.Image
            style={{ width: 170, height: 146 }}
            source={test}
            style={{ width: 170, height: 146,
                transform: [{ translateX: this.state.xValue }] }}>
        </Animated.Image>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  animationView: {
    backgroundColor: 'red',
    width: 100,
    height: 100
  }
})

Answer 1

Yossi更新：

下面的代码在RN 0.62.2中对我不起作用。我接受了答案，但我对其进行了修改，并且现在可以在问题中包含有效的代码。

原始答案：

在开始之前，我需要向您介绍动画动画的两种类型的值：

Animated.Value（），我们在其中定义一个值，当我们想要在单轴（X或Y）上移动元素，更改元素的大小等时很有用。这就是我们将在此处使用的这章，这是最常用的。

Animated.ValueXY（）中，我们定义了一个向量，可用于在两个轴上移动元素。

使用这些值，我们可以定义几种类型的Animated动画。我们将一一发现它们，并对其进行每次测试。在这个例子中，我只会谈论Animated.timing（）在这里，您可以看到一个代码示例，该示例将从左到右移动一个红色框，并在用户决定时停止，您可以尝试一下并判断它是否对您有用：

// Test.js

import React from 'react'
import { StyleSheet, View, Animated } from 'react-native'

class Test extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    leftPosition : new Animated.Value (0)
  }
  
  const stopAnimation = () => {
    this.setState({
      leftPosition : this.state.leftPosition // this forces the left position to remain the same considering the `componentDidMount` method already happened
    })
  }
  mooveLR (){
    Animated.timing(
      this.state.leftPosition,
      {
        toValue: 100,
        duration: 3000, // the duration of the animation
        easing: Easing.linear, // the style of animation 
      }
    ).start() // starts this annimation once this method is called
  }
  
  mooveRL (){
    Animated.timing(
      this.state.leftPosition,
      {
        toValue: 0,
        duration: 3000, // the duration of the animation
        easing: Easing.linear, // the style of animation 
      }
    ).start() // starts this annimation once this method is called
  }
  
  componentDidMount(){
    this.state.leftPosition === 0 ? mooveLR () : mooveRL () // repeats always when the red box return to its initial position : leftPosition === 0
  }
  render() {
    return (
      <View style={styles.main_container}>
        <Animated.View style={[styles.animation_view], left : this.state.leftPosition}>
        </Animated.View>
        <TouchableOpacity onPress = { () => this.stopAnimation ()}>
          <Text>Stop animation</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  animation_view: {
    backgroundColor: 'red',
    width: 100,
    height: 100
  }
})

export default Test

希望它会有所帮助问候

Answer 2

我已经解决了这个问题：

import {
  Easing
} from 'react-native';

react-native中的简单动画：从左向右移动图像

更新：

2 个答案:

Yossi更新：

原始答案：