React-Native 纯ts代码实现滚轮选择器 —— 滚轮动画优化（三）

import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';

...
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
import WheelPickerRow from './WheelPickerRow';

const WheelPicker: React.FC<WheelPickerProps> = (props) => {
	...
	//声明滚动距离动画变量
    const scrollY = useSharedValue(0)

	//滚动距离绑定
    const scrollHandler = useAnimatedScrollHandler(
        (event: ReanimatedScrollEvent) => {
            'worklet';
            scrollY.value = event.contentOffset.y
        }
    );

    return (
        <View>
            <View
                style={[
                    styles.selector,
                    { width: props.wheelWidth, height: props.itemHeight },
                ]}
            />
            <Animated.FlatList
                ref={listRef}
		        ...
                ...
                //事件绑定
                onScroll={scrollHandler}
                renderItem={({ item, index }) => {
                    return (

                            <WheelPickerRow
		                        //传值
                                scrollY={scrollY}
	                              ...
                            />
                    );
                }}
            />
        </View>
    );
};

import Animated , { useDerivedValue, type SharedValue, useAnimatedStyle } from 'react-native-reanimated';

interface WheelPickerRowProps {
    idx: number;
    text: string;
    itemHeight: number;
    rowStyle?: ViewStyle;
    textStyle?: TextStyle;
    visibleNum: 1 | 2 | 3;
    scrollY: SharedValue<number>
}

const WheelPickerRow: React.FC<WheelPickerRowProps> = (props) => {
    const visibleNum = props.visibleNum + 2 //旋转跟位移会导致具体显示条目增加
    const itemHeight = props.itemHeight
    const deg = 90;//最后一个可视条目的旋转角度，之间的条目角度逐条递减
    const rad = (deg / 180) * 3.14;
    const _idx = props.idx - props.visibleNum;

    const initScrollY = _idx * itemHeight
    const upperScrollY = initScrollY - visibleNum * itemHeight//上边界的滚动距离
    const lowerScrollY = initScrollY + visibleNum * itemHeight//下边界滚动距离
    //旋转函数y=ax+b 
    const a = rad / (visibleNum * itemHeight)
    const b = -rad - upperScrollY * a

	//旋转函数使用的是线性函数，区间为[upperScrollY, lowerScrollY], y= ax + b
    const rotateX = useDerivedValue(() => {
        if (props.scrollY.value >= upperScrollY && props.scrollY.value <= lowerScrollY) {
            return `${a * props.scrollY.value + b}rad`
        }
        return '0rad'
    })

		//相隔条目的角度差
    const radEach = rad / visibleNum
    
    const animatedStyles = useAnimatedStyle(() => {
        let x = Number(rotateX.value.replace('rad', ''))
        let absX = Math.abs(x)

        let y = 0
        let opacity = 1
        if (x >= -rad && x <= rad) {
            const position = Math.floor(absX / radEach)
						//此处偏移量的计算参考上篇文章
            y = (itemHeight / 2) * (1 - Math.sin(Math.PI / 2 - absX));
            for (let j = 1; j <= position; j++) {
                absX = absX - radEach
                y = y + itemHeight * (1 - Math.sin(Math.PI / 2 - absX)); 
            }

						//透明度为指数函数
            opacity = Math.pow(1 / 4, Math.abs(x))
            if (_idx == 7) {
                console.log('xx' + Math.abs(x))
            }
            y = x > 0 ? y : -y
        }

        return {
            transform: [{translateY: y}, {rotateX: rotateX.value}], opacity
        }
    })

    return (
        <Animated.View
            style={[
                styles.row,
                props.rowStyle,
                { height: props.itemHeight, width: 'auto' },
                animatedStyles
            ]}
        >
            <Text style={[styles.rowTitle, props.textStyle]}>{props.text}</Text>
        </Animated.View>
    );
};

const styles = StyleSheet.create({
    row: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    rowTitle: {
        color: 'black',
        fontSize: 12,
        fontWeight: 'normal',
    },
});

export default React.memo(WheelPickerRow);