如何解决使用插值反应本机动画不起作用
我有入职和点组成部分。我想在点上插入不透明度动画。但这是行不通的。我是否以错误的方式使用onScroll?感谢任何帮助
const Onboarding = () => {
const { width } = useOrientation();
const scrollX = new Animated.Value(0);
const onScroll = (event: any) => {
Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }]);
};
return (
<Box flex={1} backgroundColor="mainBackground">
<Box flex={3}>
<Animated.ScrollView onScroll={onScroll} horizontal>
{slides.map((data,index) => (
<Slide key={index} data={data} {...{ index,scrollX }}
/>
))}
</Animated.ScrollView>
</Box>
<Box
flex={1}
>
{slides.map((_,index) => (
<Dot key={index + 1} currentIndex={divide(scrollX,width)} {...{ index }}
/>
))}
</Box>
</Box>
);
};
const Dot = ({currentIndex,index}:DotProps) => {
const opacity = interpolate(currentIndex,{
inputRange:[index-1,index,index+1],outputRange:[0.5,1,0.5],extrapolate:Extrapolate.CLAMP,})
return (
<Animated.View
style={{ opacity,backgroundColor: "#2CB9B0",width: 8,height: 8,borderRadius: 4
}}
/>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。