mirror of
https://github.com/status-im/status-mobile.git
synced 2025-01-13 18:25:45 +00:00
Animate home stack border radius (#16284)
This commit is contained in:
Parvesh Monu
GitHub
parent
b58a9beef2
commit
5f802ac6eb
@ -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;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user