使用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>
);
}
}回答 2
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用户
发布于 2020-05-20 20:02:47
使用动画应用程序接口进行这些变换。
注意:沿着轴(即rotateX或rotateY)旋转透视会给你翻转的感觉。
始终使用useNativeDriver: true以获得更好的性能。
示例代码：
import React, {Component} from 'react';
import {View, Animated, StyleSheet, Button} from 'react-native';
export default class Container extends Component {
constructor() {
super();
this.animation = new Animated.ValueXY({x: 0, y: 0});
const inputRange = [0, 1];
const outputRange = ['0deg', '180deg'];
this.rotateX = this.animation.x.interpolate({inputRange, outputRange});
this.rotateY = this.animation.y.interpolate({inputRange, outputRange});
}
flip = (val) => {
this.animation[val].setValue(0);
Animated.timing(this.animation[val], {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
};
render() {
const {rotateX, rotateY} = this;
return (
<View style={styles.container}>
<Animated.View
style={{
...styles.item,
transform: [{rotateX}, {rotateY}, {perspective: 500}],
}}
/>
<Button title="flip x " onPress={() => this.flip('x')} />
<Button title="flip y " onPress={() => this.flip('y')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
item: {
height: 200,
width: 200,
backgroundColor: 'red',
marginBottom: 20,
},
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33938137
复制相关文章
相似问题
腾讯云开发者
