本机如何动画滚动位置和元素高度动画

Question

我正在使用一个反应原生列表，它将列表元素扩展到全高。

假设列表偏移为'o'，视口高度为'H'，元素pos为'py'，元素高度为'h'。

这包括两个步骤：

1. 将列表视图滚动到所需的偏移量：o - ＆gt; o + py
2. 调整元素高度：h - ＆gt; ħ

我希望能够同时为这两个属性设置动画，但不会闪烁。

我目前使用的方法是

lisview.scrollTo({y: o + py}, {animated: true})
var mh = new Animated.Value(h);
this.setState({height: mh});
Animated.timing(mh, {toValue: H}).start();

但动画并不流畅。我想知道同时为滚动和高度设置动画的最佳方法。在此先感谢!!

Answer 1

有点晚了，但我希望答案可以帮助别人。

我遇到了同样的问题。人们无法轻松控制滚动动画，因为它是在本机代码中完成的。我不能说我找到了一个很好的解决方案，但它为我工作。

我所做的是减少动画持续时间并增加延迟。它导致了类似的用户体验。代码如下：

lisview.scrollTo({y: o + py, animated: true})
var mh = new Animated.Value(h);
this.setState({height: mh});
// Default animation duration is 500, so it will be a little faster
Animated.timing(mh, {toValue: H, duration: 100, delay: 300}).start();

最后的效果是看到滚动到位置并且还看到高度动画的结尾没有任何故障。测试了许多不同的高度。

希望它有所帮助。

Answer 2

您可以使用parallel同时启动一系列动画。有一个很好的动画指南here，包括平行动画。