React Native填坑之旅--动画篇
动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。 无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些。 填坑材料Animated动画API提供了一些现成的组件: 一个绕着屏幕转的动画绕着屏幕转的动画: <--<
| |
V--^
基本代码export default class AnimatedSquare extends React.Component {
constructor(props) {
super(props);
// 1
this.state = {
pan: new Animated.ValueXY
}
}
getStyle() {
return [
styles.square,{
transform: this.state.pan.getTranslateTransform()
}
];
}
render() {
return (
<View style={styles.container}> <Animated.View style={this.getStyle()} /> </View> ); } }
解释一下: 依赖和样式依赖项: import React from 'react';
import {
Dimensions,StyleSheet,View,Animated
} from 'react-native';
let {
width,height
} = Dimensions.get('window');
const SQUARE_DIMENSIONS = 30;
样式: const styles = StyleSheet.create({
container: {
flex: 1
},square: {
width: SQUARE_DIMENSIONS,height: SQUARE_DIMENSIONS,backgroundColor: 'blue'
}
});
动起来我们准备让这个目标物体,一个方框,从左上角: const SPRING_CONFIG = {tension: 2,friction: 3};
componentDidMount() {
Animated.spring(this.state.pan,{
...SPRING_CONFIG,toValue: {x: 0,y: height - SQUARE_DIMENSIONS} // return to start
}).start();
}
我们指定了 依次的动动动。。。我们可以让几个动画按照顺序依次执行。这些动画会一个挨一个的执行。 componentDidMount() {
Animated.sequence([
Animated.spring(this.state.pan,{
...SPRING_CONFIG,y: height - SQUARE_DIMENSIONS} //animate to bottom left
}),Animated.spring(this.state.pan,{
...SPRING_CONFIG,toValue: {x: width - SQUARE_DIMENSIONS,y: height - SQUARE_DIMENSIONS} // animated to bottom right
}),y: 0} //animate to top right
}),y: 0} // return to start
})
]).start(cb);
}
我们定义了四个弹簧动画。这个四个一组的动画执行的顺序就是前文指定的顺序。 重复动画调用动画的 componentDidMount() {
this.startAndRepeat();
}
startAndRepeat() {
this.triggerAnimation(this.startAndRepeat);
}
triggerAnimation(cb) {
Animated.sequence([
Animated.spring(this.state.pan,y: 0} // return to start
})
]).start(cb);
}
调用 完整代码import React from 'react';
import {
Dimensions,height
} = Dimensions.get('window');
const SQUARE_DIMENSIONS = 30;
const SPRING_CONFIG = {tension: 2,friction: 3};
export default class AnimatedSquare extends React.Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY
}
// bind
this.startAndRepeat = this.startAndRepeat.bind(this);
this.getStyle = this.getStyle.bind(this);
this.startAndRepeat = this.startAndRepeat.bind(this);
this.triggerAnimation = this.triggerAnimation.bind(this);
}
componentDidMount() {
this.startAndRepeat();
}
startAndRepeat() {
this.triggerAnimation(this.startAndRepeat);
}
getStyle() {
return [
styles.square,{
transform: this.state.pan.getTranslateTransform()
}
];
}
triggerAnimation(cb) {
Animated.sequence([
Animated.spring(this.state.pan,y: 0} // return to start
})
]).start(cb);
}
render() {
return (
<View style={styles.container}> <Animated.View style={this.getStyle()} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 },square: { width: SQUARE_DIMENSIONS,backgroundColor: 'blue' } });
更多相关代码请移步:https://github.com/future-challenger/petshop/tree/master/client/petshop (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |