javascript 我将如何根据百分比为按钮的宽度设置动画，它的 backgroundColor 也是如此？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48740325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would I animate the width of a button based on percentage, and the same for it's backgroundColor?
提问by VDog
I have some <AnimatedButton />
我有一些 <AnimatedButton />
I want to animate it to go from 100% width to 40% width depending on a prop that is a boolean called isFullWidth.
我想动画它从 100% 宽度到 40% 宽度取决于一个名为isFullWidth.
I have:
我有：
class AnimatedButton extends Component {
constructor(props) {
super(props);
this.state = { width: new Animated.Value(100) };
}
toggleWidth() {
const endWidth = this.props.isFullWidth ? 40 : 100;
Animated.timing(this.state.width, {
toValue: endWidth,
duration: 200,
easing: Easing.linear,
}).start();
}
render() {
<TouchableOpacity
style={{ width: `${this.state.width}%` }}
onPress={this.props.onPress}
>
// more stuff
</TouchableOpacity>
}
}
The problem is that it just jumps into the appropriate percentage without animating. I tried setting the width to just this.state.animatedValueand rather than use percentage, just use pixels, e.g. 150 to 400 and back, and it works fine as expected.
问题是它只是在没有动画的情况下跳到适当的百分比。我尝试将宽度设置为 justthis.state.animatedValue而不是使用百分比，只使用像素，例如 150 到 400 并返回，它按预期工作正常。
Same question applies for going from say rgba(220, 100, 50, 0.8)to rgba(30, 70, 30, 1.0)and back?
同样的问题适用于打算从说rgba(220, 100, 50, 0.8)要rgba(30, 70, 30, 1.0)和背？
回答by Henrik R
I would suggest you to read more about interpolationbecause it is very useful when doing almost any kind of animation in React Native.
我建议你阅读更多关于插值的内容，因为它在 React Native 中执行几乎任何类型的动画时都非常有用。
Basically with interpolateyou can map some animated values to so other values. In your case you want to map number between 40-100 to a percent string like 50%. Second thing you want to do is to map number between 40-100 to color from (as an example) red to blue.
基本上，interpolate您可以将一些动画值映射到其他值。在您的情况下，您希望将 40-100 之间的数字映射到像50%. 您要做的第二件事是将 40-100 之间的数字映射到从（例如）红色到蓝色的颜色。
Read interpolate docs fully and experiment with it and ask if you have questions after that :)
完整阅读 interpolate docs 并对其进行试验，然后询问您是否有问题:)
So I would do it like this:
所以我会这样做：
class AnimatedButton extends Component {
constructor(props) {
super(props);
this.state = { width: new Animated.Value(100) };
}
toggleWidth() {
const endWidth = this.props.isFullWidth ? 40 : 100;
Animated.timing(this.state.width, {
toValue: endWidth,
duration: 200,
easing: Easing.linear,
}).start();
}
render() {
<TouchableOpacity
style={{
width: this.state.width.interpolate({
inputRange: [0, 1],
outputRange: ['0%', '100%'],
}),
backgroundColor: this.state.width.interpolate({
inputRange: [40, 100],
outputRange: ['rgba(30, 70, 30, 1.0)', 'rgba(220, 100, 50, 0.8)'],
}),
}}
onPress={this.props.onPress}
>
// more stuff
</TouchableOpacity>;
}
}
