Tab text animations (#293)

src/status_im/components/main_tabs.cljs

@@ -102,6 +102,7 @@
 
 (defview main-tabs []
   [view-id [:get :view-id]
+   prev-view-id [:get :prev-view-id]
    tab-animation? [:get :prev-tab-view-id]]
   [view common-st/flex
    [status-bar {:type :main}]
@@ -111,4 +112,5 @@
             :pointerEvents (if tab-animation? :none :auto)}
       (doall (map #(tab-view %) tab-list))
       [tabs {:selected-view-id view-id
+             :prev-view-id     prev-view-id
              :tab-list         tab-list}]]]]])

src/status_im/components/tabs/styles.cljs

@@ -2,7 +2,7 @@
   (:require [status-im.components.styles :refer [color-white]]))
 
 (def tabs-height 60)
-(def tab-height 56)
+(def tab-height 58)
 
 (defn tabs-container [hidden? animation? offset-y]
   {:position        :absolute
@@ -36,7 +36,8 @@
    :alignItems     :center})
 
 (def tab-title
-  {:fontSize   14
+  {:font-size 12
+   :height    16
    :color     "#6e93d8"})
 
 (def tab-icon
@@ -44,11 +45,12 @@
    :height       24
    :marginBottom 1})
 
-(def tab-container
+(defn tab-container [active?]
   {:flex           1
    :height         tab-height
    :justifyContent :center
-   :alignItems     :center})
+   :alignItems     :center
+   :top            (if active? 0 8)})
 
 (defn tab-view-container [offset-x]
   {:position       :absolute

src/status_im/components/tabs/tab.cljs

@@ -10,16 +10,20 @@
             [status-im.components.tabs.styles :as st]
             [status-im.components.animation :as anim]))
 
-(defn animation-logic [val]
+(defn animation-logic [val to-value]
   (fn []
-    (anim/start (anim/spring val {:toValue 0.1
+    (anim/start (anim/spring val {:toValue to-value
-                                  :tension 30}))))
+                                  :tension 40}))))
 
 (defview tab [_]
-  (let [icon-anim-value (anim/create-value 10)
+  (let [icon-anim-value         (anim/create-value 0)
-        text-anim-value (anim/create-value 20)
+        text-anim-value         (anim/create-value 0)
-        on-update       (comp (animation-logic icon-anim-value)
+        icon-reverse-anim-value (anim/create-value 0)
-                              (animation-logic text-anim-value))]
+        text-reverse-anim-value (anim/create-value 0)
+        on-update               (comp (animation-logic icon-anim-value 0)
+                                      (animation-logic text-anim-value 0)
+                                      (animation-logic icon-reverse-anim-value 0)
+                                      (animation-logic text-reverse-anim-value 30))]
     (r/create-class
       {:component-did-mount
        on-update
@@ -27,19 +31,28 @@
        on-update
        :component-will-receive-props
        (fn []
-         (anim/set-value icon-anim-value 5)
+         (anim/set-value icon-anim-value 8)
-         (anim/set-value text-anim-value 20))
+         (anim/set-value text-anim-value 30)
+         (anim/set-value icon-reverse-anim-value -8)
+         (anim/set-value text-reverse-anim-value -8))
        :reagent-render
-       (fn [{:keys [view-id title icon selected-view-id]}]
+       (fn [{:keys [view-id title icon selected-view-id prev-view-id]}]
          [touchable-highlight {:style    st/tab
                                :disabled (= view-id selected-view-id)
                                :onPress  #(dispatch [:navigate-to-tab view-id])}
-          [view {:style st/tab-container}
+          [view {:style (st/tab-container (= selected-view-id view-id))}
-           [animated-view {:style (st/animated-offset (if (= selected-view-id view-id)
+           [animated-view {:style (st/animated-offset (cond
-                                                        icon-anim-value
+                                                        (= selected-view-id view-id) icon-anim-value
-                                                        0))}
+                                                        (= prev-view-id view-id) icon-reverse-anim-value
+                                                        :else 0))}
             [image {:source {:uri icon}
                     :style  st/tab-icon}]]
-           (when (= selected-view-id view-id)
+           [animated-view {:style (st/animated-offset (cond
-             [animated-view {:style (st/animated-offset text-anim-value)}
+                                                        (= selected-view-id view-id) text-anim-value
-              [text {:style st/tab-title} title]])]])})))
+                                                        (= prev-view-id view-id) text-reverse-anim-value
+                                                        :else 0))}
+            [text {:style st/tab-title}
+             (if (or (= selected-view-id view-id)
+                       (= prev-view-id view-id))
+               title
+               " ")]]]])})))

src/status_im/components/tabs/tabs.cljs

@@ -13,10 +13,11 @@
             [status-im.components.tabs.tab :refer [tab]]
             [status-im.components.animation :as anim]))
 
-(defn create-tab [index data selected-view-id]
+(defn create-tab [index data selected-view-id prev-view-id]
   (let [data (merge data {:key              index
                           :index            index
-                          :selected-view-id selected-view-id})]
+                          :selected-view-id selected-view-id
+                          :prev-view-id     prev-view-id})]
     [tab data]))
 
 (defn animation-logic [{:keys [hidden? val]}]
@@ -53,7 +54,7 @@
                                :pointerEvents (if @chats-scrolled? :none :auto)}]
                children))})))
 
-(defn tabs [{:keys [tab-list selected-view-id]}]
+(defn tabs [{:keys [tab-list selected-view-id prev-view-id]}]
   [tabs-container
    [view st/tabs-inner-container
-    (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])
+    (doall (map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))]])

src/status_im/navigation/handlers.cljs

@@ -58,6 +58,7 @@
   (fn [db [_ view-id]]
     (-> db
         (assoc :prev-tab-view-id (:view-id db))
+        (assoc :prev-view-id (:view-id db))
         (replace-view view-id))))
 
 (register-handler :on-navigated-to-tab