React Native - Animated.spring 在恢复动画时闪烁答案

【问题标题】：React Native - Animated.spring blinks when reverting the animationReact Native - Animated.spring 在恢复动画时闪烁
【发布时间】：2016-08-29 05:24:45
【问题描述】：

在我的 react native 应用程序中，我正在尝试创建一个抽屉。当我单击一个按钮时，它应该会打开，而且效果很好，但问题是当我关闭它时。当我点击关闭按钮时，动画会闪烁，有点像打开和关闭 2-3 次才确定关闭。

我就是这样做的

export default class Drawer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(0)
        }
    }

    showContent = () => {
        Animated.spring(this.state.height, {toValue:130}).start();
    }

    hideContent = () => {
        Animated.spring(this.state.height, {toValue:0}).start();
    }

    render() {
        return (
            <View>
                <TouchableHighlight 
                    onPress={this.showContent}
                    underlayColor="transparent"
                >
                    <Text>Show</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    onPress={this.hideContent}
                    underlayColor="transparent"
                >
                    <Text>Hide</Text>
                </TouchableHighlight>

                <Animated.View style={{height: this.state.height}}>
                    <Text>Content</Text>
                </Animated.View>
            </View>
        );
    }
}

【问题讨论】：

this.state.height 未在您发布的代码中的任何地方使用。请发布一个最小的可验证示例
@FuzzyTree 对此感到抱歉，没有注意到。我现在修好了

标签： javascript android animation react-native

【解决方案1】：

动画看起来“闪烁”的原因是因为您使用的是弹簧动画，一旦达到其最终值，它就会反弹或反弹。尝试将spring 替换为timing 以消除反弹：

showContent = () => {
    Animated.timing(this.state.height, {toValue:130}).start();
}

hideContent = () => {
    Animated.timing(this.state.height, {toValue:0}).start();
}

【讨论】：

这为我节省了很多时间。这对谷歌来说是个难题。有什么办法可以减少后坐力使其正常工作，还是只有某些弹簧不起作用的特性？
回答了我自己的问题。似乎与bounciness 属性有关。想想看，对吧？
强调一下，我只猜对了一半。 bounciness 为 0 且 speed 值较高时仍会出现一些闪烁。是否有文章或文档描述了何时为某些属性使用某些动画？

【解决方案2】：

刚刚遇到同样的问题。你仍然可以使用 Animated.spring 但它需要正确的最小高度来增加额外的“摆动空间”。似乎它可能会有所不同，在我的情况下，最小高度为 2，最大高度为 55。

【讨论】：

【解决方案3】：

我已经很晚了，但是我遇到了这个问题并通过使用配置 bounciness: 0 完全禁用闪烁来解决。

你可以找到更多关于in the documentation的信息。

【讨论】：