от
У меня есть два изображения с небольшой разницей между ними, каждое из которых соответствует определенному состоянию. Мне нужно плавно переходить от одного к другому, когда я меняю состояние, чтобы эффект ощущался так, как будто только часть, отличающаяся на двух изображениях, подверглась анимации, а остальное изображение осталось таким, как есть. Я хочу, чтобы он работал так, чтобы, когда я рендерил второе изображение в stateChange, появлялась только деталь в виде стержня во втором изображении, а остальное оставалось неподвижным. Я думаю, что этого можно достичь без использования каких-либо библиотек анимации, таких как
react, возможно, с использованием некоторых методов жизненного цикла в React и, очевидно, AnimatedAPI. Основная проблема, с которой я сталкиваюсь, заключается в том, что при обновлении состояния я не могу контролировать предыдущее изображение, которое было отрендерено. Я каким-то образом хочу, чтобы ранее отрендеренное изображение оставалось до тех пор, пока не появится вновь отрендеренный компонент и не выполнит его анимацию. Вот что я пытался сделать. У меня есть этот компонент ImageLoader, который рендерит изображение, в то же время предоставляя ему плавную анимацию.

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 (
      
    );
  }
 }



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

  render() {
  let Dun=()=>{return this.state.no==1?
   : 
    }
   const calc=()=>{
   this.setState((state)=>({no:Math.abs(state.no
    

        

Ваш ответ

Отображаемое имя (по желанию):
Конфиденциальность: Ваш электронный адрес будет использоваться только для отправки уведомлений.
Анти-спам проверка:
Чтобы избежать проверки в будущем, пожалуйста войдите или зарегистрируйтесь.

1 Ответ

0 голосов
от
Вы можете использовать 2 анимированных изображения, чтобы создать впечатление, что одно исчезает в другом. Вот решение, основанное на вашем примере:
import React from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react
    
...