status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Tab text animations (#293) 

Former-commit-id: 401ad8ecad
This commit is contained in:
Alexander Pantyuhov 2016-10-10 17:12:53 +03:00
parent c15fca6bd3
commit 51ef4f5790
5 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/components/main_tabs.cljs
View File

@ -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}]]]]])

12
src/status_im/components/tabs/styles.cljs
View File

@ -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

47
src/status_im/components/tabs/tab.cljs
View File

@ -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
" ")]]]])})))

9
src/status_im/components/tabs/tabs.cljs
View File

@ -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))]])

1
src/status_im/navigation/handlers.cljs
View File

@ -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