如何通过更改 React-Native 中的状态从一个图像过渡到另一个图像 [英] How do I transition from one image to another by changing state in React-Native

问题描述

我有两个图像，它们之间几乎没有区别，每个图像都对应一个特定的状态.当我改变状态时，我需要从一个平滑地过渡到另一个，这样效果就好像只有两个图像中不同的部分经历了动画，其余的图像保持原样.

I have two images with little difference between them and each corresponding to a particular state. I need to smoothly transition from one to the other when I change the state so that the effect feels like only the part which is different in the two images has undergone animation,the rest of the image staying as it is.

我希望它能够工作，以便当我在 stateChange 上渲染第二个图像时，只有第二个图像中的杆状部分看起来淡入，其余部分保持静止.

I want it to work so that when I render the second image on stateChange, only the rod like part in the second image appears to fade in,the rest remaining still.

我认为这可以在不使用任何动画库(如 react-transition-group)的情况下实现，可能是通过使用 React 中的一些生命周期方法，显然还有 AnimatedAPI.我面临的主要问题是，当我更新状态时，我无法控制之前渲染的图像.我以某种方式希望先前渲染的图像保留到新渲染的 Component 出现并执行其动画.这是我尝试做的.我有这个 ImageLoader 组件，它在为图像提供淡入动画的同时呈现图像.

I think this can be achieved without using any animation libraries like react-transition-group probably by using some of the life cycle methods in React and obviously, the AnimatedAPI. The major issue that I am facing is that when I update the state I have no control over the previous image that was rendered. I somehow want the previously rendered image to stay until newly rendered Component appears and does its animation. Here is what I tried to do. I have this ImageLoader Component which renders an image while providing a fading-in animation to it.

class ImageLoader extends React.Component {
  constructor(){
    super()
    this.opacity= new Animated.Value(0)
   }

    componentDidUpdate(){
   {this.onLoad()}

   } 

    onLoad = () => {
      this.opacity.setValue(0);
      Animated.timing(this.opacity, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
      }).start();
   }

  render() {
    return (
      <Animated.Image onLoad={this.onLoad}{...this.props}style={[
          {opacity: this.opacity,}, this.props.style,
       ]} 
     />
    );
  }
 }



export default class App extends React.Component {
 state={
 no:1,
}

  render() {
  let Dun=()=>{return this.state.no==1?
   <ImageLoader source={require('./assets/img1.PNG')}/>: <ImageLoader 

     source={require('./assets/img2.PNG')}/>
    }
   const calc=()=>{
   this.setState((state)=>({no:Math.abs(state.no-1)}));
}
return (
  <View style={styles.container}>
    <View style={{height:100,marginLeft:50}}>

    {Dun()}

    <Button onPress={()=>{calc()}}> Press</Button>
    </View>
  </View>
);
}
}

推荐答案

您可以使用 2 个动画图像来给人一种正在淡入另一个的印象.这是基于您的示例的解决方案:

You could use 2 animated images to give the impression that one is fading into the other. Here is a solution based on your example:

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

import images from 'src/images';

const styles = StyleSheet.create({
  image: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }
});

class ImageSwitcher extends React.Component {
  fadeInOpacity = new Animated.Value(0);

  fadeOutOpacity = new Animated.Value(1);

  state = {
    prevSource: null
  };

  componentDidMount() {
    this.onLoad();
  }

  componentDidUpdate() {
    this.onLoad();
  }

  componentWillReceiveProps({ source: newSource }) {
    const { source } = this.props;
    if (newSource !== source) {
      this.setState({ prevSource: source });
    }
  }

  onLoad = () => {
    this.fadeInOpacity.setValue(0);
    this.fadeOutOpacity.setValue(1);

    Animated.timing(this.fadeInOpacity, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true
    }).start();
    Animated.timing(this.fadeOutOpacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true
    }).start();
  };

  render() {
    const { prevSource } = this.state;

    return (
      <View
        style={{
          width: 200,
          height: 200
        }}
      >
        <Animated.Image {...this.props} style={[styles.image, { opacity: this.fadeInOpacity }]} resizeMode="cover" />
        {prevSource && (
          <Animated.Image {...this.props} style={[styles.image, { opacity: this.fadeOutOpacity }]} resizeMode="cover" source={prevSource} />
        )}
      </View>
    );
  }
}

export default class App extends React.Component {
  state = {
    source: images.first
  };

  handleToggle = () => this.setState(({ source }) => ({ source: source === images.first ? images.second : images.first }));

  render() {
    const { source } = this.state;

    return (
      <View style={{ flex: 1 }}>
        <ImageSwitcher source={source} />
        <TouchableOpacity onPress={this.handleToggle}>
          <Text>Toggle Image</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

这篇关于如何通过更改 React-Native 中的状态从一个图像过渡到另一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！