Fix animation to wrong index
This commit is contained in:
@@ -54,6 +54,7 @@ function ImageViewing({
|
|||||||
lightbox,
|
lightbox,
|
||||||
openProgress,
|
openProgress,
|
||||||
onFlyAway,
|
onFlyAway,
|
||||||
|
onChangeIndex,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
onPressSave,
|
onPressSave,
|
||||||
onPressShare,
|
onPressShare,
|
||||||
@@ -61,6 +62,7 @@ function ImageViewing({
|
|||||||
lightbox: Lightbox
|
lightbox: Lightbox
|
||||||
openProgress: SharedValue<number>
|
openProgress: SharedValue<number>
|
||||||
onFlyAway: () => void
|
onFlyAway: () => void
|
||||||
|
onChangeIndex: (index: number) => void
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onPressSave: (uri: string) => void
|
onPressSave: (uri: string) => void
|
||||||
onPressShare: (uri: string) => void
|
onPressShare: (uri: string) => void
|
||||||
@@ -207,6 +209,7 @@ function ImageViewing({
|
|||||||
onPageSelected={e => {
|
onPageSelected={e => {
|
||||||
setImageIndex(e.nativeEvent.position)
|
setImageIndex(e.nativeEvent.position)
|
||||||
setIsScaled(false)
|
setIsScaled(false)
|
||||||
|
onChangeIndex(e.nativeEvent.position)
|
||||||
}}
|
}}
|
||||||
onPageScrollStateChanged={e => {
|
onPageScrollStateChanged={e => {
|
||||||
setIsDragging(e.nativeEvent.pageScrollState !== 'idle')
|
setIsDragging(e.nativeEvent.pageScrollState !== 'idle')
|
||||||
@@ -424,6 +427,8 @@ function ImageViewingRoot({
|
|||||||
}) {
|
}) {
|
||||||
const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
|
const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
|
||||||
const openProgress = useSharedValue(0)
|
const openProgress = useSharedValue(0)
|
||||||
|
const isAnimatable = useSharedValue(false)
|
||||||
|
const isInitialIndex = useSharedValue(true)
|
||||||
|
|
||||||
if (!activeLightbox && nextLightbox) {
|
if (!activeLightbox && nextLightbox) {
|
||||||
setActiveLightbox(nextLightbox)
|
setActiveLightbox(nextLightbox)
|
||||||
@@ -436,13 +441,21 @@ function ImageViewingRoot({
|
|||||||
nextLightbox.thumbDims
|
nextLightbox.thumbDims
|
||||||
) {
|
) {
|
||||||
openProgress.value = withClampedSpring(1)
|
openProgress.value = withClampedSpring(1)
|
||||||
|
isAnimatable.value = true
|
||||||
} else {
|
} else {
|
||||||
openProgress.value = 1
|
openProgress.value = 1
|
||||||
|
isAnimatable.value = false
|
||||||
}
|
}
|
||||||
|
isInitialIndex.value = true
|
||||||
} else {
|
} else {
|
||||||
openProgress.value = withClampedSpring(0)
|
// TODO: Support animation to non-initial index.
|
||||||
|
if (isAnimatable.value && isInitialIndex.value) {
|
||||||
|
openProgress.value = withClampedSpring(0)
|
||||||
|
} else {
|
||||||
|
openProgress.value = 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [nextLightbox, openProgress])
|
}, [nextLightbox, openProgress, isAnimatable, isInitialIndex])
|
||||||
|
|
||||||
useAnimatedReaction(
|
useAnimatedReaction(
|
||||||
() => openProgress.value === 0,
|
() => openProgress.value === 0,
|
||||||
@@ -463,6 +476,9 @@ function ImageViewingRoot({
|
|||||||
lightbox={activeLightbox}
|
lightbox={activeLightbox}
|
||||||
openProgress={openProgress}
|
openProgress={openProgress}
|
||||||
onRequestClose={onRequestClose}
|
onRequestClose={onRequestClose}
|
||||||
|
onChangeIndex={index => {
|
||||||
|
isInitialIndex.value = index === activeLightbox.index
|
||||||
|
}}
|
||||||
onFlyAway={() => {
|
onFlyAway={() => {
|
||||||
'worklet'
|
'worklet'
|
||||||
openProgress.value = 0
|
openProgress.value = 0
|
||||||
|
|||||||
Reference in New Issue
Block a user