互动游戏-转盘

渲染转盘

const dailGood = [{..},{..},{..},{..},{..},{..},{..},{..}];
{dailGood.map((item,index)=>{
    const rotateTemp = index * 45;
    return (
        <View style={{
            ...
            transform: [{ rotateZ: `${rotateTemp}deg` }],
        }}>...</View>
    )
})}

旋转

旋转动画计算

rotate = (i) => {
    const { dailGood } = this.state;
    const length = dailGood.length;
    const oneTimeRotate = length / 2 - i / length;
    Animated.timing(this.state.rotateDeg, {
        toValue: oneTimeRotate,
        duration: 3000,
        isInteraction: false,
        easing: Easing.out(Easing.poly(4)),
        useNativeDriver: true,
    }).start((res) => {
        if (res.finished) {
            ...
        }
    });
};

旋转视图代码

<Animated.View
    style={{
        ...
        transform: [
            {
                rotate: this.state.rotateDeg.interpolate({
                    inputRange: [0, 3],
                    outputRange: ['0deg', '1080deg'],
                }),
            },
        ],
    }}
></Animated.View>

效果