我正在使用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>
);
};