Animate floating screen border radius (#16384)

This commit is contained in:
Parvesh Monu 2023-06-26 15:59:43 +05:30 committed by GitHub
parent 43ef6db7b9
commit 4a4974b541
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 16 deletions

View File

@ -88,3 +88,21 @@ export function screenZIndex(screenState) {
} }
}); });
} }
export function screenBorderRadius(screenState) {
return useDerivedValue(function () {
'worklet';
switch (screenState.value) {
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
return 0;
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
return 20;
}
});
}

View File

@ -3,12 +3,13 @@
[react-native.reanimated :as reanimated])) [react-native.reanimated :as reanimated]))
(defn screen (defn screen
[{:keys [screen-left screen-top screen-width screen-height screen-z-index]}] [{:keys [screen-left screen-top screen-width screen-height screen-border-radius screen-z-index]}]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:left screen-left {:left screen-left
:top screen-top :top screen-top
:width screen-width :width screen-width
:height screen-height :height screen-height
:border-radius screen-border-radius
:z-index screen-z-index} :z-index screen-z-index}
{:background-color (colors/theme-colors colors/white colors/neutral-95) {:background-color (colors/theme-colors colors/white colors/neutral-95)
:overflow :hidden :overflow :hidden

View File

@ -85,12 +85,15 @@
shell.constants/open-screen-without-animation shell.constants/open-screen-without-animation
shell.constants/close-screen-without-animation))] shell.constants/close-screen-without-animation))]
{:screen-state screen-state {:screen-state screen-state
:screen-left (worklets.shell/floating-screen-left screen-state width switcher-card-left-position) :screen-left (worklets.shell/floating-screen-left screen-state
width
switcher-card-left-position)
:screen-top (worklets.shell/floating-screen-top screen-state switcher-card-top-position) :screen-top (worklets.shell/floating-screen-top screen-state switcher-card-top-position)
:screen-z-index (worklets.shell/floating-screen-z-index screen-state) :screen-z-index (worklets.shell/floating-screen-z-index screen-state)
:screen-width (worklets.shell/floating-screen-width screen-state :screen-width (worklets.shell/floating-screen-width screen-state
width width
shell.constants/switcher-card-size) shell.constants/switcher-card-size)
:screen-border-radius (worklets.shell/floating-screen-border-radius screen-state)
:screen-height (worklets.shell/floating-screen-height screen-state :screen-height (worklets.shell/floating-screen-height screen-state
height height
shell.constants/switcher-card-size)})) shell.constants/switcher-card-size)}))

View File

@ -80,6 +80,10 @@
[screen-state screen-height switcher-card-size] [screen-state screen-height switcher-card-size]
(.screenHeight ^js floating-screen-worklets screen-state screen-height switcher-card-size)) (.screenHeight ^js floating-screen-worklets screen-state screen-height switcher-card-size))
(defn floating-screen-border-radius
[screen-state]
(.screenBorderRadius ^js floating-screen-worklets screen-state))
(defn floating-screen-z-index (defn floating-screen-z-index
[screen-state] [screen-state]
(.screenZIndex ^js floating-screen-worklets screen-state)) (.screenZIndex ^js floating-screen-worklets screen-state))