使用React Native在视图上显示3D动画
使用React Native在视图上显示3D动画
提问于 2015-11-26 19:58:18
我想在我的React Native应用程序中实现翻转效果，类似于下面描述的：
https://www.codementor.io/reactjs/tutorial/building-a-flipper-using-react-js-and-less-css
我的问题是。我能以某种方式实现它与一些库的帮助，如‘动画’https://facebook.github.io/react-native/docs/animations.html，或者我必须玩‘纯’CSS样式。
在React Native中，这类动画的“最佳实践”是什么？
class CardBack extends Component {
render() {
return (
<TouchableOpacity onPress={this.flip}>
<View style={styles.scrumCardBorder}>
<View style={styles.cardBack}>
</View>
</View>
</TouchableOpacity>
);
}
flip() {
this.setState({flipped: !this.state.flipped})
}
}
class CardFront extends Component {
render() {
return (
<TouchableOpacity>
<View style={styles.scrumCardBorder}>
<View style={styles.cardFront}>
<Text style={styles.cardValue}>5</Text>
</View>
</View>
</TouchableOpacity>
);
}
}Stack Overflow用户
发布于 2020-04-25 16:27:18
我们可以使用transform和Interpolate来制作3D旋转动画。
class RotateAnimation extends React.Component {
_rotateValue = new Animated.Value(0);
startAnimated = () => {
Animated.timing(this._rotateValue, {
toValue: 360,
duration: 800,
useNativeDriver: true
}).start()
}
getTransform = () => {
const rotate = this._rotateValue.interpolate({
inputRange: [0, 180, 360],
outputRange: ['0deg', '180deg', '360deg'],
extrapolate: 'clamp',
})
if (this.props.horizontal) {
return {
transform: {
perspective: WINDOW_WIDTH,
rotateX: rotate
}
}
}
return {
transform: {
perspective: WINDOW_WIDTH,
rotateY: rotate
}
}
}
render() {
return (<Animated.View style={[style, ]} />
{this.props.children}
</Animated.View>)
}
}如果您想在某个点周围使用变换。可以尝试使用this。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33938137
复制相关文章
相似问题
腾讯云开发者
