From 5f802ac6eb5b77d9d96bba53ff814fa2a80843aa Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Thu, 15 Jun 2023 15:37:43 +0530 Subject: [PATCH] Animate home stack border radius (#16284) --- src/js/worklets/shell/home_stack.js | 50 ++++++++++--------- .../shell/components/home_stack/style.cljs | 1 + .../contexts/shell/shared_values.cljs | 29 +++++------ src/utils/worklets/shell.cljs | 36 +++++++------ 4 files changed, 62 insertions(+), 54 deletions(-) diff --git a/src/js/worklets/shell/home_stack.js b/src/js/worklets/shell/home_stack.js index a98e36aec5..8fdfa1be14 100644 --- a/src/js/worklets/shell/home_stack.js +++ b/src/js/worklets/shell/home_stack.js @@ -1,8 +1,8 @@ -import { useDerivedValue, withTiming, withSequence } from 'react-native-reanimated'; +import { useDerivedValue, withTiming, withSequence, withDelay } from 'react-native-reanimated'; import * as constants from './constants'; // Derived values for each stack (communities, chat, wallet, browser) -export function stackOpacity (stackId, selectedStackId) { +export function stackOpacity(stackId, selectedStackId) { return useDerivedValue( function () { 'worklet' @@ -11,7 +11,7 @@ export function stackOpacity (stackId, selectedStackId) { ); } -export function stackZIndex (stackId, selectedStackId) { +export function stackZIndex(stackId, selectedStackId) { return useDerivedValue( function () { 'worklet' @@ -21,51 +21,43 @@ export function stackZIndex (stackId, selectedStackId) { } // Derived values for home stack (container) -export function homeStackOpacity (homeStackState) { +export function homeStackOpacity(homeStackState) { return useDerivedValue( function () { 'worklet' switch (homeStackState.value) { case constants.OPEN_WITH_ANIMATION: return withTiming(1, constants.LINEAR_EASING); - break; case constants.CLOSE_WITH_ANIMATION: return withTiming(0, constants.LINEAR_EASING); - break; case constants.OPEN_WITHOUT_ANIMATION: return 1; - break; case constants.CLOSE_WITHOUT_ANIMATION: return 0; - break; } } ); } -export function homeStackTop (homeStackState, top) { +export function homeStackTop(homeStackState, top) { return useDerivedValue( function () { 'worklet' switch (homeStackState.value) { case constants.OPEN_WITH_ANIMATION: return withTiming(0, constants.LINEAR_EASING); - break; case constants.CLOSE_WITH_ANIMATION: return withTiming(top, constants.LINEAR_EASING); - break; case constants.OPEN_WITHOUT_ANIMATION: return 0; - break; case constants.CLOSE_WITHOUT_ANIMATION: return top; - break; } } ); } -export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackState, left) { +export function homeStackLeft(selectedStackId, animateHomeStackLeft, homeStackState, left) { return useDerivedValue( function () { 'worklet' @@ -74,16 +66,12 @@ export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackS switch (homeStackState.value) { case constants.OPEN_WITH_ANIMATION: return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, constants.LINEAR_EASING)) - break; case constants.CLOSE_WITH_ANIMATION: return withTiming(leftValue, constants.LINEAR_EASING); - break; case constants.OPEN_WITHOUT_ANIMATION: return 0; - break; case constants.CLOSE_WITHOUT_ANIMATION: return leftValue; - break; } } else { return 0; @@ -92,7 +80,7 @@ export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackS ); } -export function homeStackPointer (homeStackState) { +export function homeStackPointer(homeStackState) { return useDerivedValue( function () { 'worklet' @@ -103,23 +91,37 @@ export function homeStackPointer (homeStackState) { ); } -export function homeStackScale (homeStackState, minimizeScale) { +export function homeStackScale(homeStackState, minimizeScale) { return useDerivedValue( function () { 'worklet' switch (homeStackState.value) { case constants.OPEN_WITH_ANIMATION: return withTiming(1, constants.LINEAR_EASING); - break; case constants.CLOSE_WITH_ANIMATION: return withTiming(minimizeScale, constants.LINEAR_EASING); - break; case constants.OPEN_WITHOUT_ANIMATION: return 1; - break; case constants.CLOSE_WITHOUT_ANIMATION: return minimizeScale; - break; + } + } + ); +} + + +export function homeStackBorderRadius(homeStackState) { + return useDerivedValue( + function () { + 'worklet' + switch (homeStackState.value) { + case constants.OPEN_WITH_ANIMATION: + return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, {duration: 0})); + case constants.CLOSE_WITH_ANIMATION: + case constants.CLOSE_WITHOUT_ANIMATION: + return 20; + case constants.OPEN_WITHOUT_ANIMATION: + return 0; } } ); diff --git a/src/status_im2/contexts/shell/components/home_stack/style.cljs b/src/status_im2/contexts/shell/components/home_stack/style.cljs index b2bac39db2..a487cc5131 100644 --- a/src/status_im2/contexts/shell/components/home_stack/style.cljs +++ b/src/status_im2/contexts/shell/components/home_stack/style.cljs @@ -10,6 +10,7 @@ :left (:home-stack-left shared-values) :opacity (:home-stack-opacity shared-values) :pointer-events (:home-stack-pointer shared-values) + :border-radius (:home-stack-border-radius shared-values) :transform [{:scale (:home-stack-scale shared-values)}]} {:border-bottom-left-radius 20 :border-bottom-right-radius 20 diff --git a/src/status_im2/contexts/shell/shared_values.cljs b/src/status_im2/contexts/shell/shared_values.cljs index 756ff11a31..f294c95b82 100644 --- a/src/status_im2/contexts/shell/shared_values.cljs +++ b/src/status_im2/contexts/shell/shared_values.cljs @@ -62,20 +62,21 @@ [{:keys [selected-stack-id home-stack-state]} dimensions] (let [home-stack-position (calculate-home-stack-position dimensions) animate-home-stack-left (reanimated/use-shared-value (not (utils/home-stack-open?)))] - {:animate-home-stack-left animate-home-stack-left - :home-stack-left (worklets.shell/home-stack-left - selected-stack-id - animate-home-stack-left - home-stack-state - (clj->js (:left home-stack-position))) - :home-stack-top (worklets.shell/home-stack-top - home-stack-state - (:top home-stack-position)) - :home-stack-opacity (worklets.shell/home-stack-opacity home-stack-state) - :home-stack-pointer (worklets.shell/home-stack-pointer home-stack-state) - :home-stack-scale (worklets.shell/home-stack-scale - home-stack-state - (:scale home-stack-position))})) + {:animate-home-stack-left animate-home-stack-left + :home-stack-left (worklets.shell/home-stack-left + selected-stack-id + animate-home-stack-left + home-stack-state + (clj->js (:left home-stack-position))) + :home-stack-top (worklets.shell/home-stack-top + home-stack-state + (:top home-stack-position)) + :home-stack-opacity (worklets.shell/home-stack-opacity home-stack-state) + :home-stack-pointer (worklets.shell/home-stack-pointer home-stack-state) + :home-stack-border-radius (worklets.shell/home-stack-border-radius home-stack-state) + :home-stack-scale (worklets.shell/home-stack-scale + home-stack-state + (:scale home-stack-position))})) (defn floating-screen-derived-values [screen-id {:keys [width height]} switcher-card-left-position switcher-card-top-position] diff --git a/src/utils/worklets/shell.cljs b/src/utils/worklets/shell.cljs index c21b2036ab..ff00299f71 100644 --- a/src/utils/worklets/shell.cljs +++ b/src/utils/worklets/shell.cljs @@ -6,19 +6,19 @@ ;; Derived values for Bottom tabs (defn bottom-tabs-height - [home-stack-state-sv container-height extended-container-height] + [home-stack-state container-height extended-container-height] (.bottomTabsHeight ^js bottom-tabs-worklets - home-stack-state-sv + home-stack-state container-height extended-container-height)) (defn bottom-tab-icon-color - [id selected-stack-id-sv home-stack-state-sv pass-through-sv selected-tab-color default-color + [id selected-stack-id home-stack-state pass-through-sv selected-tab-color default-color pass-through-color] (.bottomTabIconColor ^js bottom-tabs-worklets id - selected-stack-id-sv - home-stack-state-sv + selected-stack-id + home-stack-state pass-through-sv selected-tab-color default-color @@ -35,29 +35,33 @@ ;; Derived values for Home stack (container) (defn home-stack-opacity - [home-stack-state-sv] - (.homeStackOpacity ^js home-stack-worklets home-stack-state-sv)) + [home-stack-state] + (.homeStackOpacity ^js home-stack-worklets home-stack-state)) (defn home-stack-pointer - [home-stack-state-sv] - (.homeStackPointer ^js home-stack-worklets home-stack-state-sv)) + [home-stack-state] + (.homeStackPointer ^js home-stack-worklets home-stack-state)) (defn home-stack-scale - [home-stack-state-sv scale] - (.homeStackScale ^js home-stack-worklets home-stack-state-sv scale)) + [home-stack-state scale] + (.homeStackScale ^js home-stack-worklets home-stack-state scale)) (defn home-stack-left - [selected-stack-id-sv animate-home-stack-left home-stack-state-sv left-home-stack-position] + [selected-stack-id animate-home-stack-left home-stack-state left-home-stack-position] (.homeStackLeft ^js home-stack-worklets - selected-stack-id-sv + selected-stack-id animate-home-stack-left - home-stack-state-sv + home-stack-state left-home-stack-position)) (defn home-stack-top - [home-stack-state-sv top-home-stack-position] - (.homeStackTop ^js home-stack-worklets home-stack-state-sv top-home-stack-position)) + [home-stack-state top-home-stack-position] + (.homeStackTop ^js home-stack-worklets home-stack-state top-home-stack-position)) + +(defn home-stack-border-radius + [home-stack-state] + (.homeStackBorderRadius ^js home-stack-worklets home-stack-state)) ;; Derived values for floating screen (defn floating-screen-left