React Native如何将插值旋转初始值设为插值范围的中间值

问题原因 #

你当前的初始wiggleRef值为0，插值规则将0映射到-6deg，因此初始渲染就会显示-6度的旋转状态，不符合0度的预期。

解决方案（改动最小的实现方式） #

只需要调整2处代码即可保留原有摆动逻辑的同时实现初始0度：

1. 将wiggleRef的初始值改为0.5，刚好对应插值区间[-6deg,6deg]的中点0deg
2. 微调动画序列的时长，保证摆动速度和原有逻辑一致

修改后的完整代码如下：

// 初始值改为0.5，对应初始旋转0度
let wiggleRef = React.useRef(new Animated.Value(0.5)).current;

function wiggle(count){
  if (count == 6) return;
  Animated.sequence([
    // 从0度转到6度，时长减半和原有摆动速度一致
    Animated.timing(wiggleRef, { toValue: 1, duration: 150, easing: Easing.linear, useNativeDriver: true }),
    // 从6度转到-6度
    Animated.timing(wiggleRef, { toValue: 0, duration: 300, useNativeDriver: true }),
    // 从-6度回到0度
    Animated.timing(wiggleRef, { toValue: 0.5, duration: 150, useNativeDriver: true })
  ]).start(e=> {if (e.finished) wiggle(count + 1)});
}

// 插值规则不需要改动
const wiggleInterpol = wiggleRef.interpolate({
  inputRange: [0,1],
  outputRange: ['-6deg', '6deg']
});

<AnimatedIcon 
  name='pill' 
  color='black' 
  style={{ 
    transform: [{rotate: wiggleInterpol }], 
    paddingBottom: marginRightRef, 
    fontSize:logoRef, 
    marginRight: marginRightRef, 
    marginTop: marginTopRef
  }}
/>

额外优化建议：给Animated.timing配置增加useNativeDriver: true可以大幅提升动画流畅度，避免JS线程阻塞导致的掉帧问题。

可选替代方案 #

如果你不想修改初始值，也可以调整插值规则实现初始0度：

// 初始值保持0不变
let wiggleRef = React.useRef(new Animated.Value(0)).current;

// 插值改为三段映射，0对应0度
const wiggleInterpol = wiggleRef.interpolate({
  inputRange: [-1, 0, 1],
  outputRange: ['-6deg', '0deg', '6deg']
});

// 动画序列改为从0到1，再到-1，最后回到0即可
function wiggle(count){
  if (count == 6) return;
  Animated.sequence([
    Animated.timing(wiggleRef, { toValue: 1, duration: 150, easing: Easing.linear, useNativeDriver: true }),
    Animated.timing(wiggleRef, { toValue: -1, duration: 300, useNativeDriver: true }),
    Animated.timing(wiggleRef, { toValue: 0, duration: 150, useNativeDriver: true })
  ]).start(e=> {if (e.finished) wiggle(count + 1)});
}

内容的提问来源于stack exchange，提问作者skylineg