iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
On iOS, if attempting to animate a text component and a view component in parallel, preceded by an Animated.delay (or setTimeout), the text component will not animate:
doAnimate = () => {
Animated.sequence([
// Removing the delay here will fix the issue.
Animated.delay(1000),
Animated.parallel([
Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// If you remove "useNativeDriver" below, the animation works.
Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
])
]).start();
// This also fails to animate the text component:
// setTimeout(() => {
// Animated.parallel([
// Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// ]).start();
// }, 1000);
}
componentDidMount() {
setTimeout(this.doAnimation, 3000);
}
render() {
return (
<View style={styles.container}>
<Animated.Text style={[styles.textContainer, {
opacity: this.textAnimation
}]}>
Welcome to React Native!
</Animated.Text>
<Animated.View style={[styles.squareContainer, {
opacity: this.squareAnimation
}]}>
</Animated.View>
</View>
);
}
If you remove "useNativeDriver" from the "textAnimation", the animation works. Also, making the textAnimation interpolate from viewAnimation does not work (that's how my code originally worked, but I broke them out into separate animations to test what was going wrong).
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.3
react-native: 0.54.2 => 0.54.2
Steps to Reproduce
See code snippet above, alternatively you can check out my example repo:
git clone https://github.com/dannycochran/animationBug
cd animationBug
yarn install
react-native run-ios
Expected Behavior
The animations for both the View and Text component work, as they do on Android.
Actual Behavior
The text opacity never animates.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
克隆链接的 animationBug 示例,运行 yarn install 和 react-native run-ios,并在 Animated.parallel 之前使用 Animated.delay 或 setTimeout 重现失败。首先跟踪报告中显示的 Animated.sequence、Animated.parallel 和 useNativeDriver 路径。完成的标准是:延迟后,文本和视图的 opacity 动画都能在 iOS 上运行,就像在 Android 上一样。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100