gpt4 book ai didi

animation - 使用 react-native 动画 blurRadius 属性

转载 作者:行者123 更新时间:2023-12-04 13:46:50 24 4
gpt4 key购买 nike

我开始在我的 react-native 项目中为图像制作动画,但不知何故我无法为 blurRadius 制作动画属性(property)。 TranslateScale工作得很好。
这是我用于 interpolat 的代码模糊、缩放和平移的 e 值:

// Compute image position
const imageTranslate = this.state.scrollY.interpolate({
inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
outputRange: [IMAGE_MAX_HEIGHT / 2, 0, -IMAGE_MAX_HEIGHT / 3],
extrapolate: 'clamp',
});
// Compute image blur
const imageBlur = this.state.scrollY.interpolate({
inputRange: [0, IMAGE_MAX_HEIGHT],
outputRange: [0, 100],
extrapolate: 'clamp',
});
// Compute image scale
const imageScale = this.state.scrollY.interpolate({
inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
outputRange: [2, 1, 1],
extrapolate: 'clamp',
});

这是我的形象:
return (
<Animated.Image
blurRadius={imageBlur}
source={this.props.imgSrc}
style={[
animatedImageStyles.backgroundImage,
{ transform: [{ translateY: imageTranslate }, { scale: imageScale }] }
]}
/>
);

我绑定(bind)了 this.state.scrollY ScrollView 上的值滚动。

最佳答案

您可以添加事件监听器以获取动画模糊值并更改状态。然后把你的 blurValue状态在 blurRadius支柱。

this.state.blurAnimation.addListener(({value}) => this.setState({blurValue:value}));

关于animation - 使用 react-native 动画 blurRadius 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44825679/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com