react-native - 如何从静态 PNG 图像创建具有 12 个步骤（每个 30 度）的微调器动画？

Question

目标是创建一个基于自定义 PNG 图像的动画微调器加载器。

像这样的东西

我的问题是每次 X 次创建 30 度的旋转。不是很顺利，而是一步一步地模仿原来的微调器。

constructor(props) {
        super(props);

        this.state = {
            spinValue: new Animated.Value(0)
        };
    }

    _animSteps = () => {
        let steps = 11
        let sequence = []
        let deg = 0

        for (let i = 0; i <= steps; i++) {
            deg += 30
                sequence.push(
                    Animated.timing(
                        this.state.spinValue,
                        {
                            toValue: deg,
                            duration: 1000,
                            easing: Easing.linear,
                            useNativeDriver: true
                        }
                    )
                )
        }
        return sequence
    }

使成为：

Animated.loop(
    Animated.sequence(
        this._animSteps()
    )
).start()

<Animated.Image
                            style={[s.loader, { transform: [{ rotate: this.state.spinValue }] }]}
                            source={require('loader.png')}/>

标签： react-nativeanimation

Answer 1

解决方案：

constructor(props) {
        super(props);

        this.state = {
            spinValue: new Animated.Value(0)
        };
    }

    render() {
        let seq = []
        for (let i = 1; i < 13; i++) {
            seq.push(Animated.timing(
                this.state.spinValue,
                {
                    toValue: i,
                    duration: 0,
                    easing: Easing.linear,
                    useNativeDriver: true
                }
            ))
            seq.push(Animated.delay(60))
        }
        Animated.loop(Animated.sequence(seq)).start()

        const spin = this.state.spinValue.interpolate({
            inputRange: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            outputRange: ['0deg', '30deg', '60deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '270deg', '300deg', '330deg', '360deg']
        })

            return (
                <View style={[s.container, this.props.style]}>
                    <View style={s.loaderHolder}>
                        <Animated.Image
                            style={[s.loader, { transform: [{ rotate: spin }] }]}
                            source={require(Image.Source)}/>
                    </View>
                </View>
            )
               }