Kantongku: animasi bar HP pakai scaleX (fix error native animated width)
This commit is contained in:
@@ -214,12 +214,12 @@ export function DashboardScreen() {
|
|||||||
hpMsg = `Saldo cukup ${coverageDays} dari ${remainingDays} hari — jaga pengeluaran ⚔️`;
|
hpMsg = `Saldo cukup ${coverageDays} dari ${remainingDays} hari — jaga pengeluaran ⚔️`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bar HP: width bergerak halus mengikuti data
|
// Bar HP: scaleX bergerak halus mengikuti data (native driver aman)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Animated.timing(hpAnim, {
|
Animated.timing(hpAnim, {
|
||||||
toValue: hpPct,
|
toValue: hpPct,
|
||||||
duration: 800,
|
duration: 800,
|
||||||
useNativeDriver: false,
|
useNativeDriver: true,
|
||||||
}).start();
|
}).start();
|
||||||
}, [hpPct, hpAnim]);
|
}, [hpPct, hpAnim]);
|
||||||
|
|
||||||
@@ -420,11 +420,16 @@ export function DashboardScreen() {
|
|||||||
styles.hpFill,
|
styles.hpFill,
|
||||||
{
|
{
|
||||||
backgroundColor: hpBarColor,
|
backgroundColor: hpBarColor,
|
||||||
width: hpAnim.interpolate({
|
|
||||||
inputRange: [0, 100],
|
|
||||||
outputRange: ['0%', '100%'],
|
|
||||||
}),
|
|
||||||
opacity: pulse,
|
opacity: pulse,
|
||||||
|
transform: [
|
||||||
|
{
|
||||||
|
scaleX: hpAnim.interpolate({
|
||||||
|
inputRange: [0, 100],
|
||||||
|
outputRange: [0, 1],
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
transformOrigin: 'left',
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -958,6 +963,7 @@ const styles = StyleSheet.create({
|
|||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
hpFill: {
|
hpFill: {
|
||||||
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
borderRadius: 7,
|
borderRadius: 7,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user