来自 CSS 代码的 React Native 自定义加载器动画答案

【问题标题】：React Native custom loader Animation from CSS code来自 CSS 代码的 React Native 自定义加载器动画
【发布时间】：2021-02-14 14:34:48
【问题描述】：

我在重新创建一个 CSS loader animation 在带有动画 API 的 React Native 中。

我的 React Native 尝试： screen record.

CSS代码如下：

.whitePillar {
    width: 8px;
    height: 50px;
    margin-right:5px;
    background-color: #FFF;
    animation: animation 1s infinite;
    float: left;
}

.whitePillar :nth-child(10) {
    animation-delay: 0.9s;  
}
.whitePillar :nth-child(9){
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;  
}   
.whitePillar :nth-child(8) {
    animation-delay: 0.7s;  
}
.whitePillar :nth-child(7){
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;  
}
.whitePillar :nth-child(6) {
    animation-delay: 0.5s;  
}
.whitePillar :nth-child(5) {
    animation-delay: 0.4s;
}
.whitePillar :nth-child(4){
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;      
}
.whitePillar :nth-child(3) {
    animation-delay: 0.2s;  
}
.whitePillar :nth-child(2) {
    animation-delay: 0.1s;
}

@keyframes animation {
    50% {
        transform: translateX(-25px) scaleY(0.5);
    }

}

React Native 代码如下：

<View style={styles.loaderContainer}>
      <View style={styles.pillarsWrapper}>
             {[...Array(numberOfPillars)].map((value, index) => (
                   <LoaderPillar
                        delay={index*100}
                        key={index}
                   />
              ))}
      </View>
</View>

LoaderPillar 代表每一个单独的白色柱子：

<Animated.View
    style={[styles.pillar, pillarAnimation]}
 />

我已经使用这个在 LoaderPillar 上完成了动画：

const [ pillarAnimationTranslate ] = useState(new Animated.Value(0));
const [ pillarAnimationScale ] = useState(new Animated.Value(1));

const pillarAnimation = {
    transform: [{translateX: pillarAnimationTranslate}, {scaleY: pillarAnimationScale}]
};

useEffect(() => {
    Animated.loop(Animated.timing(pillarAnimationScale, {
        toValue: 0.5,
        duration: 500,
        delay: delay,
        useNativeDriver: true,
        easing: Easing.ease
    })).start();
}, [pillarAnimationScale]);

useEffect(() => {
    Animated.loop(Animated.timing(pillarAnimationTranslate, {
        toValue: -25,
        duration: 500,
        delay: delay,
        useNativeDriver: true,
        easing: Easing.ease
    })).start()

}, [pillarAnimationTranslate]);

我是 React Native 动画的新手，所以我什至不知道我是否走在正确的轨道上。我认为问题在于 CSS 中的关键帧部分——那个百分比（50%）——我不知道如何重新创建它。任何有关升级甚至完全改变的建议将不胜感激。提前谢谢你。

【问题讨论】：

标签： react-native animation css-animations

【解决方案1】：

编辑：仍然不工作，但非常接近最终结果。我将这个问题分为两部分：首先制作 scale 动画，然后添加 translate 动画 - 这样更容易。

代码：

const [ pillarAnimationTranslate ] = useState(new Animated.Value(0));

Animated.loop(
    Animated.sequence([
        Animated.timing(
            pillarAnimationScale,
            {
                toValue: 1,
                duration: 500,
                delay: delay,
                useNativeDriver: true,
                easing: Easing.ease
            }
        ),
        Animated.timing(
            pillarAnimationScale,
            {
                toValue: 0,
                duration: 500,
                useNativeDriver: true
            })
        ])
).start();

然后使用插值函数：

const scale = pillarAnimationScale.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.5]
});

const pillarAnimation = {
    transform: [{scaleY: scale}]
};

并在 ned 返回的动画视图中（如原帖）；

return (
    < Animated.View
        style={[styles.pillar, pillarAnimation]}
    />
);

我现在遇到的问题是迭代的不一致，正如您在下面的 GIF 中看到的那样（第一次迭代是完美的，然后由于某种原因变得混乱，它应该始终是一个完美的波浪）：

有人看到导致不一致迭代的原因吗？

【讨论】：