先看效果
QQ20170629-102158.gif
componentDidMount() {
Animated.spring(this.state.scaleAnimate, {
toValue: 1,
velocity: 6,//初始速度
friction: 3,//摩擦力值
tension: -6,//彈跳的速度值
duration: 1500,//
}).start();
}
style={[styles.alertStyle,
{
transform: [
{ //縮放效果
scale: this.state.scaleAnimate.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0.8, 1.2, 1],
})
},
{ //偏移效果
translateY:this.state.scaleAnimate.interpolate({
inputRange:[0,1],
outputRange:[400,0]
})
},{ //旋轉(zhuǎn)效果
rotateX:this.state.scaleAnimate.interpolate({
inputRange:[0,0.5,1],
outputRange:['0deg','180deg','0deg']
})
}
]
}
]}
