Question

我有一系列文本要在空白屏幕上闪烁，一个接一个地带动画。类似的东西：

state = {
  meditations: ["Take a deep breath", "embrace this feeling", "breath 
             deeply", ...]
}

我想一次只显示一个字符串，并为其不透明度设置动画。所以字符串淡入淡出，然后是下一个字符串，依此类推。

我是新手，对原生做出反应，并对如何解决这个问题感到很困惑。请问，我怎么处理这个问题，我已经阅读了文档，但仍然不清楚如何。

以下是我尝试过的内容，我从文档中对其进行了修改，但它会立即显示所有内容。我仍然试图看看如何让它们一个接一个地制作动画，一次只显示一个。感谢您的帮助。

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }
  
  renderMeditations() {
    let { fadeAnim } = this.state;
    return this.props.meditations.map((meditation, index) => {
         Animated.timing(                  // Animate over time
          this.state.fadeAnim,            // The animated value to drive
          {
            toValue: 2,                   // Animate to opacity: 1 (opaque)
            duration: 10000,              // Make it take a while
          }
        ).start(() => {
          this.setState({ fadeAnim: new Animated.Value(0) })
        });                        // Starts the animation
    
      return (
        <Animated.Text                // Special animatable View
          key={index}
          style={{
            ...this.props.style,
            opacity: fadeAnim,         // Bind opacity to animated value
          }}
        >
       {meditation}
      </Animated.Text>
      )
    })
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {this.renderMeditations()}
      </View>
    );
  }
}

export default class App extends React.Component {
  state = {
    meditations: ["Take a deep breath", "Calm down", "Relax", "Tell yourself all will be fine"]
  }
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView meditations={this.state.meditations} style={{fontSize: 28, textAlign: 'center', margin: 10}} />
      </View>
    )
  }
}

Answer 1

经过多次努力，我能够像react-native-animatable一样解决它：

＆＃13;

import React from "react";
import {
  View,
  Text,
  Animated
} from "react-native";


import * as Animatable from 'react-native-animatable';


class VideoScreen extends React.Component {

  state = {
    meditations: ["Take a deep breath", "embrace this feeling", "breath 
         deeply"],
    index: 0
  };

  render() {
    const { meditations, index } = this.state;
    return (
      <View style={{flex: 1}}>
        <Animatable.Text
          key={index}
          animation={'fadeIn'}
          iterationCount={2}
          direction="alternate"
          duration={2000}
          onAnimationEnd={() => {
            if (this.state.index < this.state.meditations.length - 1) {
              this.setState({ index: this.state.index + 1});
            }
          }}
          style={{
            position: "absolute",
            left: 0, right: 0,
            bottom: 40
          }}>
          {meditations[index]}
        </Animatable.Text>
      </View>
    );
  }
}

export default VideoScreen;

＆＃13;

Answer 2

map函数一次执行所以基本上你同时渲染/返回所有3个项目。我知道你的问题是动画正在运作。

如果您想要显示一个文本，那么另一个等等我建议迭代文本数组的索引而不是使用map函数。

类似的东西：

执行动画
增加指数
如果您位于数组的末尾，则索引= 0。

在一个循环中。检查setInterval，它可能会对你有所帮助。

React Native Animating文本列表

2 个答案: