Kantongku: animasi bar Uangmu Nyawamu (smooth width + shimmer + pulse kritis)
This commit is contained in:
@@ -224,6 +224,53 @@ export function DashboardScreen() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bar HP: width bergerak halus mengikuti data
|
||||||
|
useEffect(() => {
|
||||||
|
Animated.timing(hpAnim, {
|
||||||
|
toValue: hpPct,
|
||||||
|
duration: 800,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start();
|
||||||
|
}, [hpPct, hpAnim]);
|
||||||
|
|
||||||
|
// Shimmer: kilau menyapu di atas bar
|
||||||
|
useEffect(() => {
|
||||||
|
const loop = Animated.loop(
|
||||||
|
Animated.timing(shimmerX, {
|
||||||
|
toValue: 480,
|
||||||
|
duration: 2200,
|
||||||
|
useNativeDriver: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
loop.start();
|
||||||
|
return () => loop.stop();
|
||||||
|
}, [shimmerX]);
|
||||||
|
|
||||||
|
// Denyut saat kritis
|
||||||
|
useEffect(() => {
|
||||||
|
let loop: Animated.CompositeAnimation | null = null;
|
||||||
|
if (hpPct < 40) {
|
||||||
|
loop = Animated.loop(
|
||||||
|
Animated.sequence([
|
||||||
|
Animated.timing(pulse, {
|
||||||
|
toValue: 0.5,
|
||||||
|
duration: 480,
|
||||||
|
useNativeDriver: true,
|
||||||
|
}),
|
||||||
|
Animated.timing(pulse, {
|
||||||
|
toValue: 1,
|
||||||
|
duration: 480,
|
||||||
|
useNativeDriver: true,
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
loop.start();
|
||||||
|
} else {
|
||||||
|
pulse.setValue(1);
|
||||||
|
}
|
||||||
|
return () => loop?.stop();
|
||||||
|
}, [hpPct, pulse]);
|
||||||
|
|
||||||
const hasTodayActivity = today.income > 0 || today.expense > 0;
|
const hasTodayActivity = today.income > 0 || today.expense > 0;
|
||||||
const monthNet = monthIncome - monthExpense;
|
const monthNet = monthIncome - monthExpense;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user