reactjs - 我们如何在反应原生文本上制作动画效果?
问题描述
我有一个待办事项列表,每个列表项都有一个复选框。当我选中该框时,动画删除效果应该从左到右显示。怎么做?
解决方案
不幸的是,您不能直接为打击设置动画,但我使用了一些技巧来实现相同的效果。
import React from 'react';
import { Animated, Easing, Text, View, StyleSheet } from 'react-native';
export default function App() {
const ref = React.useRef(View.prototype);
const animatedValue = React.useRef(new Animated.Value(0)).current;
const [textWidth, setTextWidth] = React.useState(0);
const [textHeight, setTextHeight] = React.useState(0);
React.useEffect(() => {
ref.current.measure((x, y, w, h) => {
setTextWidth(w);
setTextHeight(h);
animateStrike();
});
}, []);
const animateStrike = () => {
Animated.timing(animatedValue, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
}).start();
};
const strikeWidth = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, textWidth],
extrapolate: 'clamp',
});
return (
<View style={styles.container}>
<View>
<Text style={styles.text} ref={ref}>
Some Dummy Text
</Text>
<Animated.View
style={[
styles.strike,
{ width: strikeWidth, top: textHeight / 2 + 1 },
]}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: '400',
},
strike: {
position: 'absolute',
height: 2,
backgroundColor: 'red',
},
});
你可以在这里查看演示。
推荐阅读
- javascript - JavaScript 对象属性引用问题
- sharepoint-2013 - 添加 SharePoint 列表项,但不查看
- ios - UIBarButtonItem 标题文本对齐
- pact-jvm - 如何更新 pact jvm requestFilter 中的传入请求?
- php - 按用户实体参考视图过滤不起作用
- java - 应用性能监控工具 Spring Boot
- ios - Swift 闭包中“弱自我”的 Objective-C 等价物是什么?
- python - 无法安装 pip install ibm-db
- wpf - 拖放到可编辑的组合框上
- asp.net-identity - Identity Server 4 和保护内部保留角色