离开屏幕时无缝重复动画图像

问题描述

当您的图像具有动画效果并在屏幕外不断移动时，您如何使其无限重复。

import React,{ useState,useEffect } from 'react';
import { StyleSheet,View,Image,Animated,Easing,Dimensions } from 'react-native';
import cloudPic from './assets/cloud.png';
import hill3Pic from './assets/hill3.png';

export default function App() {

  const windowWidth = Dimensions.get('window').width;
  const cloudWidth = Image.resolveAssetSource(cloudPic).width;
  const hill3Width = Image.resolveAssetSource(hill3Pic).width;
  console.log('HIll3pic:',hill3Pic)
  console.log('hill3widdth:',hill3Width)
  const cloudLeftPos = new Animated.Value(cloudWidth * -0.7)
  const hill3LeftPos = new Animated.Value(hill3Width * -0.7)

  useEffect(() => {
    cycleCloudAnimation()
    cycleHill3Animation()
  },[]);

  const cycleHill3Animation = () => {
    Animated.sequence([
      Animated.timing(
        hill3LeftPos,{
          tovalue: windowWidth,duration: 6000,easing: Easing.linear,useNativeDriver: false
        }
      )
    ]).start(() => {
      hill3LeftPos.setValue(hill3Width * -0.7)
      cycleHill3Animation()
    })
  }

  const cycleCloudAnimation = () => {
    Animated.sequence([
      Animated.timing(
        cloudLeftPos,useNativeDriver: false
        }
      )
    ]).start(() => {
      cloudLeftPos.setValue(cloudWidth * -0.7)
      cycleCloudAnimation()
    })
  }


  return (
    <View style={{ backgroundColor: 'black',flex: 1 }}>

      <Animated.View style={{ left: cloudLeftPos }}>
        <Image
          style={styles.cloud}
          source={require('./assets/cloud.png')}
        />
      </Animated.View>

      <Animated.View style={{ position: 'absolute',bottom: 0,left: hill3LeftPos }}>
        <Image
          style={styles.hill3}
          source={require('./assets/hill3.png')}

        />
      </Animated.View>

    </View >


  );
}

const styles = StyleSheet.create({
  cloud: {

  },hill3: {
    bottom: 0
  }
});

我正在尝试使用 Animated 移动图像，结果如下

如您所见，图像结束时有空白的黑色空间。有没有办法重复图像，使其无限向右移动并无缝重置动画，就像有一个无限宽的图像一样？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）