Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Animated, //使用Animated组件
Easing, //引入Easing渐变函数
} from 'react-native';
class ReactNativeDemo extends Component {
constructor(props:any) {
super(props);
//使用Animated.Value设定初始化值(缩放度,角度等等)
this.state = {
bounceValue: new Animated.Value(0),
rotateValue: new Animated.Value(0),
};
}
componentDidMount() {
//在初始化渲染执行之后立刻调用动画执行函数
this.startAnimation();
}
startAnimation() {
this.state.bounceValue.setValue(0);
this.state.rotateValue.setValue(0);
Animated.parallel([
//通过Animated.spring等函数设定动画参数
//可选的基本动画类型: spring, decay, timing
Animated.spring(this.state.bounceValue, {
toValue: 3, //变化目标值
friction: 20, //friction 摩擦系数,默认40
}),
Animated.timing(this.state.rotateValue, {
toValue: 1,
duration: 800,
easing: Easing.out(Easing.quad),
}),
//调用start启动动画,start可以回调一个函数,从而实现动画循环
]).start(()=>this.startAnimation());
}
render() {
return (
<View style={styles.container}>
<Animated.Image source={require('./bsb.jpeg')}
style={{width: 100,
height: 100,
transform: [
//将初始化值绑定到动画目标的style属性上
{scale: this.state.bounceValue},
//使用interpolate插值函数,实现了从数值单位的映射转换
{rotateZ: this.state.rotateValue.interpolate({
inputRange: [0,1],
outputRange: ['0deg', '360deg'],
})},
]}}>
</Animated.Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});
AppRegistry.registerComponent('ReactNativeDemo', () =>ReactNativeDemo);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment