zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

More tweaks to animation (#5082)

zio/stable
Hailey 2024-09-02 03:15:31 -07:00 committed by GitHub
parent 05ac76fc89
commit 4abcd65ccf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/custom-animations/CountWheel.tsx
View File

@ -151,12 +151,12 @@ export function CountWheel({
{formattedCount} {formattedCount}
</Text> </Text>
</Animated.View> </Animated.View>
{shouldAnimate ? ( {shouldAnimate && (likeCount > 1 || !isLiked) ? (
<Animated.View <Animated.View
entering={exitingAnimation} entering={exitingAnimation}
// Add 2 to the key so there are never duplicates // Add 2 to the key so there are never duplicates
key={key + 2} key={key + 2}
style={[a.absolute, {width: 50}]} style={[a.absolute, {width: 50, opacity: 0}]}
aria-disabled={true}> aria-disabled={true}>
<Text <Text
style={[ style={[

5
src/lib/custom-animations/CountWheel.web.tsx
View File

@ -83,7 +83,6 @@ export function CountWheel({
return ( return (
<View> <View>
<View <View
aria-disabled={true}
// @ts-expect-error is div // @ts-expect-error is div
ref={countView}> ref={countView}>
<Text <Text
@ -98,9 +97,9 @@ export function CountWheel({
{formattedCount} {formattedCount}
</Text> </Text>
</View> </View>
{shouldAnimate ? ( {shouldAnimate && (likeCount > 1 || !isLiked) ? (
<View <View
style={{position: 'absolute'}} style={{position: 'absolute', opacity: 0}}
aria-disabled={true} aria-disabled={true}
// @ts-expect-error is div // @ts-expect-error is div
ref={prevCountView}> ref={prevCountView}>

48
src/lib/custom-animations/LikeIcon.tsx
View File

@ -99,37 +99,33 @@ export function AnimatedLikeIcon({
entering={ entering={
shouldAnimate ? circle1Keyframe.duration(300) : undefined shouldAnimate ? circle1Keyframe.duration(300) : undefined
} }
style={[ style={{
{ position: 'absolute',
position: 'absolute', backgroundColor: s.likeColor.color,
backgroundColor: s.likeColor.color, top: 0,
top: 0, left: 0,
left: 0, width: size,
width: size, height: size,
height: size, zIndex: -1,
zIndex: -1, pointerEvents: 'none',
pointerEvents: 'none', borderRadius: size / 2,
borderRadius: size / 2, }}
},
]}
/> />
<Animated.View <Animated.View
entering={ entering={
shouldAnimate ? circle2Keyframe.duration(300) : undefined shouldAnimate ? circle2Keyframe.duration(300) : undefined
} }
style={[ style={{
{ position: 'absolute',
position: 'absolute', backgroundColor: t.atoms.bg.backgroundColor,
backgroundColor: t.atoms.bg.backgroundColor, top: 0,
top: 0, left: 0,
left: 0, width: size,
width: size, height: size,
height: size, zIndex: -1,
zIndex: -1, pointerEvents: 'none',
pointerEvents: 'none', borderRadius: size / 2,
borderRadius: size / 2, }}
},
]}
/> />
</> </>
) : null} ) : null}

2
src/lib/custom-animations/LikeIcon.web.tsx
View File

@ -93,6 +93,7 @@ export function AnimatedLikeIcon({
zIndex: -1, zIndex: -1,
pointerEvents: 'none', pointerEvents: 'none',
borderRadius: size / 2, borderRadius: size / 2,
opacity: 0,
}} }}
/> />
<View <View
@ -108,6 +109,7 @@ export function AnimatedLikeIcon({
zIndex: -1, zIndex: -1,
pointerEvents: 'none', pointerEvents: 'none',
borderRadius: size / 2, borderRadius: size / 2,
opacity: 0,
}} }}
/> />
</View> </View>