0

我一直坚持在一段时间内动态突出显示一些文本。例如，我有这个文本：

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

我希望该功能在 180 秒内突出显示此文本背景。

我所做的是这样的：

视频链接

我使用的逻辑是我创建了两个状态 s1、s2 和 s1 作为空字符串，以及 s2 的全部内容。说明计时器，我从 s2 中删除 n 个字符并在 s1 中添加相同的 n 个字符，并在 s1 和 s2 中一起显示<Text>。

此功能正在运行，但动画不正确。我想要一些 CSS 过渡类型的平滑高亮动画，以便在一段时间内完全突出显示该文本。

谁能帮我使用React Native Animations API实现这个功能

提前致谢。

4

1 回答 1

0

要动态启动新动画，您需要一个条件。您可以使用 react-native 中的“动画”。而不是 state，设置一个 ref，并更改 ref 值。

import { Animated } from "react-native";

// this value can be animated one value to another
const animationRef = useRef<Animated.Value>(new Animated.Value(0));



if(condition){
    // pass array of animations
    Animated.sequence([
        Animated.timing(animationRef.current, {
            toValue: 1,
            // set the duration 
            duration: 500,
            useNativeDriver: false
        }),
        // delay is optional
        Animated.delay(1000),
        Animated.timing(animationRef.current, {
            toValue: 0,
            duration: 500,
          // useNativeDriver:true, might not work with the all properties that you need to animate. true might improve animation performance

            useNativeDriver: false
        })
    ]).start();

 }

现在在 jsx 中你需要设置你的组件：

   // Touchable opacity cannot be animated
    <TouchableOpacity style={styles.item}>
        <Animated.View
            style={[
                styles.itemBackground,
                {
                    backgroundColor: animationRef.current.interpolate({
                        inputRange: [0, 1],
                        // if value is 0 color:black, value is 1 color:white
                        outputRange: [colors.black, colors.white]
                    })
                }
            ]}
        />
   </TouchableOpacity>

Animated.View 位置应该是绝对的。将 CSS 的动态部分保留在组件中，但您可以将其他 CSS 保留在不同的文件中。

 //styles.itemBackground:

 itemBackground: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }
于 2021-09-06T16:23:30.657 回答