javascript - React Native 中具有持续时间的动态文本背景高亮动画
问题描述
我一直坚持在一段时间内动态突出显示一些文本。例如,我有这个文本:
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实现这个功能
提前致谢。
解决方案
要动态启动新动画,您需要一个条件。您可以使用 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 }
推荐阅读
- node.js - 我收到警告:组件正在更改要控制的文本类型的不受控制的输入
- sql-server - 在 Always On 中将文件移动到新的 SQL Server 版本/实例
- nativescript - 如何通过 *ngIf 显示
- javascript - 如何绘制多个 d3js 可缩放树形图
- mysql - 在 MySQL 中创建 Diff Patch 函数(用于 varchar 字段)
- python - 如何处理python中的字符串异常
- sql - 找到每个球员最长的连续得分
- php - 无法将时间戳插入 MySQL 数据库
- reactjs - 通过历史状态恢复特定页面的滚动位置
- dictionary - Mapbox Bright 不会渲染:我是否遗漏了命令?