From 401ad8ecad549d572ad7996f36ed8ccf28f1a5e3 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Mon, 10 Oct 2016 17:12:53 +0300 Subject: [PATCH] Tab text animations (#293) --- src/status_im/components/main_tabs.cljs | 2 + src/status_im/components/tabs/styles.cljs | 12 +++--- src/status_im/components/tabs/tab.cljs | 47 +++++++++++++++-------- src/status_im/components/tabs/tabs.cljs | 9 +++-- src/status_im/navigation/handlers.cljs | 1 + 5 files changed, 45 insertions(+), 26 deletions(-) diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 99716d2301..a323bdbff4 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/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}]]]]]) diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index 8ceb227e88..60e66a6462 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/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,19 +36,21 @@ :alignItems :center}) (def tab-title - {:fontSize 14 - :color "#6e93d8"}) + {:font-size 12 + :height 16 + :color "#6e93d8"}) (def tab-icon {:width 24 :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 diff --git a/src/status_im/components/tabs/tab.cljs b/src/status_im/components/tabs/tab.cljs index ffd72cd758..f504ba7845 100644 --- a/src/status_im/components/tabs/tab.cljs +++ b/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 - :tension 30})))) + (anim/start (anim/spring val {:toValue to-value + :tension 40})))) (defview tab [_] - (let [icon-anim-value (anim/create-value 10) - text-anim-value (anim/create-value 20) - on-update (comp (animation-logic icon-anim-value) - (animation-logic text-anim-value))] + (let [icon-anim-value (anim/create-value 0) + text-anim-value (anim/create-value 0) + icon-reverse-anim-value (anim/create-value 0) + 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 text-anim-value 20)) + (anim/set-value icon-anim-value 8) + (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} - [animated-view {:style (st/animated-offset (if (= selected-view-id view-id) - icon-anim-value - 0))} + [view {:style (st/tab-container (= selected-view-id view-id))} + [animated-view {:style (st/animated-offset (cond + (= selected-view-id view-id) icon-anim-value + (= 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 text-anim-value)} - [text {:style st/tab-title} title]])]])}))) + [animated-view {:style (st/animated-offset (cond + (= selected-view-id view-id) text-anim-value + (= 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 + " ")]]]])}))) diff --git a/src/status_im/components/tabs/tabs.cljs b/src/status_im/components/tabs/tabs.cljs index fc6de8b40f..9abe6b0adf 100644 --- a/src/status_im/components/tabs/tabs.cljs +++ b/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))]]) diff --git a/src/status_im/navigation/handlers.cljs b/src/status_im/navigation/handlers.cljs index 675b47d3f9..c9521f396f 100644 --- a/src/status_im/navigation/handlers.cljs +++ b/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