设想在RN如何实现一段抽奖转盘的动画:20%前慢,20-80%快,80-90%减慢,90-100%摇摆一下回正。 难道用顺序动画去写?多种实现中感觉插值更方便,也许你没注意到它写动画中的作用。
官方代码:
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
outputRange: [300, 0, 1, 0, 0]
});
我们可以创建一个线性动画0-1,作为inputRange。然后outputRange输出"0deg"到终点角度,对应关系可以这么做:
inputRange: [0, 0.2, 0.8, 0.9, 1],
outputRange: ['0deg', '100deg', '800deg', '830deg', '810deg'],
输出是非线性的,以此为例可以做出你想要的动画效果。
实现代码:
let [zAnim,setzAnim] = useState(new Animated.Value(0));
let [dis,setDis]=useState(false)
let getDeg = () => {
return zAnim.interpolate({