|
1 | 1 | (ns status-im.switcher.animation |
2 | | - (:require [quo.react-native :as rn] |
3 | | - [reagent.core :as reagent] |
4 | | - [status-im.switcher.constants :as constants] |
5 | | - [status-im.ui.components.animation :as anim])) |
| 2 | + (:require [quo2.reanimated :as reanimated] |
| 3 | + [status-im.switcher.constants :as constants])) |
6 | 4 |
|
7 | | -(def bottom-tabs-opacity (anim/create-value 1)) |
8 | | -(def bottom-tabs-position (anim/create-value 0)) |
| 5 | +;; Component Animations |
| 6 | +(defn switcher-touchable-on-press-in |
| 7 | + [touchable-scale] |
| 8 | + (reanimated/animate-shared-value-with-timing touchable-scale 0.9 300 :easing1)) |
9 | 9 |
|
10 | | -;; TODO(parvesh): Use 300, after using dispatch-later for opening card(otherwise pending animation issue) |
11 | | -;; or OnAnimationEnd |
12 | | -(def layout-animation #js {:duration 250 |
13 | | - :create #js {:type (:ease-in-ease-out rn/layout-animation-types) |
14 | | - :property (:scale-xy rn/layout-animation-properties)} |
15 | | - :update #js {:type (:ease-in-ease-out rn/layout-animation-types) |
16 | | - :property (:scale-xy rn/layout-animation-properties)} |
17 | | - :delete #js {:type (:ease-in-ease-out rn/layout-animation-types) |
18 | | - :property (:scale-xy rn/layout-animation-properties)}}) |
| 10 | +(defn switcher-touchable-on-press-out |
| 11 | + [switcher-opened? close-button-opacity switcher-button-opacity button-touchable-scale] |
| 12 | + (reanimated/animate-shared-value-with-timing button-touchable-scale 1 300 :easing2) |
| 13 | + (if @switcher-opened? |
| 14 | + (do |
| 15 | + (reanimated/animate-shared-value-with-timing close-button-opacity 0 300 :easing2) |
| 16 | + (reanimated/animate-shared-value-with-timing switcher-button-opacity 1 300 :easing1)) |
| 17 | + (do |
| 18 | + (reanimated/animate-shared-value-with-timing close-button-opacity 1 300 :easing1) |
| 19 | + (reanimated/animate-shared-value-with-timing switcher-button-opacity 0 300 :easing2))) |
| 20 | + (swap! switcher-opened? not)) |
19 | 21 |
|
20 | | -(defn animate-layout [show? anim-values] |
21 | | - (let [{:keys [width height]} (constants/dimensions) |
22 | | - target-radius (- (max width height) |
23 | | - constants/switcher-button-radius)] |
24 | | - (rn/configure-next layout-animation) |
25 | | - (reset! (:switcher-screen-radius anim-values) (if show? target-radius 1)) |
26 | | - (reagent/flush))) |
27 | | - |
28 | | -(defn timing-animation [property toValue] |
29 | | - (anim/timing property {:toValue toValue |
30 | | - :duration 300 |
31 | | - :useNativeDriver true})) |
32 | | - |
33 | | -(defn animate-components [show? view-id anim-values] |
34 | | - (anim/start |
35 | | - (anim/parallel |
36 | | - (into |
37 | | - [(timing-animation (:switcher-button-opacity anim-values) (if show? 0 1)) |
38 | | - (timing-animation (:switcher-close-button-icon-opacity anim-values) (if show? 1 0)) |
39 | | - (timing-animation (:switcher-close-button-background-opacity anim-values) (if show? 0.2 0))] |
40 | | - (when (= view-id :home-stack) |
41 | | - [(timing-animation bottom-tabs-opacity (if show? 0 1)) |
42 | | - (timing-animation bottom-tabs-position (if show? (constants/bottom-tabs-height) 0))]))))) |
43 | | - |
44 | | -(defn animate [show? view-id anim-values] |
45 | | - (reagent/flush) |
46 | | - (animate-layout show? anim-values) |
47 | | - (animate-components show? view-id anim-values)) |
| 22 | +;; Layout Animations |
| 23 | +(defn switcher-layout-animations [view-id] |
| 24 | + (let [{:keys [width height]} (constants/dimensions) |
| 25 | + half-width (/ width 2) |
| 26 | + switcher-bottom-position (constants/switcher-bottom-position view-id) |
| 27 | + switcher-target-radius (Math/hypot |
| 28 | + half-width |
| 29 | + (- height constants/switcher-button-radius switcher-bottom-position)) |
| 30 | + switcher-size (* 2 switcher-target-radius) |
| 31 | + switcher-from-x (- half-width constants/switcher-button-radius) |
| 32 | + switcher-from-y (- height switcher-bottom-position constants/switcher-button-size constants/switcher-height-offset) |
| 33 | + switcher-to-x (- half-width switcher-target-radius) |
| 34 | + switcher-to-y (- height constants/switcher-button-size switcher-bottom-position switcher-target-radius) |
| 35 | + switcher-entering-animation (.duration (new reanimated/key-frame |
| 36 | + (clj->js |
| 37 | + {:from {:width constants/switcher-button-size |
| 38 | + :height constants/switcher-button-size |
| 39 | + :originX switcher-from-x |
| 40 | + :originY switcher-from-y |
| 41 | + :borderRadius constants/switcher-button-radius} |
| 42 | + :to {:width switcher-size |
| 43 | + :height switcher-size |
| 44 | + :originX switcher-to-x |
| 45 | + :originY switcher-to-y |
| 46 | + :borderRadius switcher-target-radius}})) 300) |
| 47 | + switcher-exiting-animation (.duration (new reanimated/key-frame |
| 48 | + (clj->js {:from {:width switcher-size |
| 49 | + :height switcher-size |
| 50 | + :originX switcher-to-x |
| 51 | + :originY switcher-to-y |
| 52 | + :borderRadius switcher-target-radius} |
| 53 | + :to {:width constants/switcher-button-size |
| 54 | + :height constants/switcher-button-size |
| 55 | + :originX switcher-from-x |
| 56 | + :originY switcher-from-y |
| 57 | + :borderRadius constants/switcher-button-radius}})) 300) |
| 58 | + container-from-x (- switcher-from-x) |
| 59 | + container-from-y (- switcher-from-y) |
| 60 | + container-to-x (- switcher-to-x) |
| 61 | + container-to-y (- switcher-to-y) |
| 62 | + container-entering-animation (.duration (new reanimated/key-frame |
| 63 | + (clj->js {:from {:originX container-from-x |
| 64 | + :originY container-from-y |
| 65 | + :transform [{:scale 0.9}]} |
| 66 | + :to {:originX container-to-x |
| 67 | + :originY container-to-y |
| 68 | + :transform [{:scale 1}]}})) 300) |
| 69 | + container-exiting-animation (.duration (new reanimated/key-frame |
| 70 | + (clj->js {:from {:originX container-to-x |
| 71 | + :originY container-to-y |
| 72 | + :transform [{:scale 1}]} |
| 73 | + :to {:originX container-from-x |
| 74 | + :originY container-from-y |
| 75 | + :transform [{:scale 0.9}]}})) 300)] |
| 76 | + {:switcher-entering-animation switcher-entering-animation |
| 77 | + :switcher-exiting-animation switcher-exiting-animation |
| 78 | + :container-entering-animation container-entering-animation |
| 79 | + :container-exiting-animation container-exiting-animation})) |
0 commit comments