1

我正在使用clock(react-native-reanimated)制作进度计时器动画。它工作正常,但我想知道进度动画何时完成,因为我想在完成后更改图标名称clock state

clock config

 const runTiming = (clock, quizDurationTiming) => {
 const state = {
    finished  : new Value(0),
    position  : new Value(0),
    frameTime : new Value(0),
    time      : new Value(0)
};
const config = {
    toValue  : new Value(1),
    duration : quizDurationTiming * 10,
    easing   : Easing.in(Easing.ease)
};

return block([
    cond(
        not(clockRunning(clock)),
        [
            set(state.time, 0),
            set(state.position, 0),
            set(state.frameTime, 0),
            set(state.position, 0),
            set(config.toValue, 1)
        ],
        timing(clock, state, config)
    ),

    state.position
 ]);
};

progressTimer.js

const SpecialTestTimer = ({ quizDurationTiming }) => {
const clock = useClock();
const progress = useValue(0);

useCode(
    () => [
        cond(and(not(clockRunning(clock))), startClock(clock)),
        set(progress, runTiming(clock, quizDurationTiming))
    ],
    []
);
const IsCompleted = CheckAnimationIsCompleteOrNot

return (
    <View style={styles.container}>
        <ProgressTimer {...{ progress }} />

        <View style={{ position: 'absolute', right: 5 }}>
            <Icon name={IsCompleted?'progress-complete':'progress-clock'} size={heightToDp('3%')} color={'#ffffff'} />
        </View>
    </View>
 );
};
4

0 回答 0