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

Loading indicator animation with useNativeDriver

This commit is contained in:
Roman Volosovskyi 2019-04-28 07:47:44 +03:00
parent e8ef7a4c33
commit 0b32ded791
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
2 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/ui/components/animation.cljs
View File

@ -57,5 +57,7 @@
(js->clj (.getLayout value-xy))) (js->clj (.getLayout value-xy)))
(defn easing [] js/ReactNative.Easing) (defn easing [] js/ReactNative.Easing)
(defn easing-in [] (.-in (easing)))
(defn easing-out [] (.-out (easing)))
(defn cubic [] (.-cubic (easing))) (defn cubic [] (.-cubic (easing)))

78
src/status_im/ui/components/connectivity/view.cljs
View File

@ -1,49 +1,65 @@
(ns status-im.ui.components.connectivity.view (ns status-im.ui.components.connectivity.view
(:require-macros [status-im.utils.views :refer [defview letsubs] :as views]) (:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
(:require [re-frame.core :as re-frame] (:require [reagent.core :as reagent]
[reagent.core :as reagent]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.connectivity.styles :as styles] [status-im.ui.components.connectivity.styles :as styles]
[status-im.utils.platform :as utils.platform]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.animation :as animation] [status-im.ui.components.animation :as animation]
[status-im.utils.utils :as utils])) [status-im.utils.utils :as utils]))
(defn easing [direction n]
{:toValue n
:easing ((if (= :in direction)
(animation/easing-in)
(animation/easing-out))
(.-quad (animation/easing)))
:duration 400
:useNativeDriver true})
(defn animated-bar-style [margin-value width color]
{:position :absolute
:width width
:transform [{:translateX
(animation/interpolate
margin-value
{:inputRange [0 1]
:outputRange [0 width]})}]
:height 3
:background-color color})
(views/defview loading-indicator [parent-width] (views/defview loading-indicator [parent-width]
(views/letsubs [anim-width (animation/create-value (* 0.15 parent-width)) (views/letsubs [blue-bar-left-margin (animation/create-value 0)
anim-x (animation/create-value 0) white-bar-left-margin (animation/create-value 0)]
easing-in (fn [n] {:toValue (* n parent-width) {:component-did-mount
:easing (.in (animation/easing) (.-quad (animation/easing))) (fn [_]
:duration 400}) (animation/start
easing-out (fn [n] {:toValue (* n parent-width) (animation/anim-loop
:easing (.out (animation/easing) (.-quad (animation/easing))) (animation/anim-sequence
:duration 400})] [(animation/parallel
{:component-did-mount (fn [_] [(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/start (animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/anim-loop (animation/parallel
(animation/anim-sequence [(animation/timing blue-bar-left-margin (easing :out 0.85))
[(animation/parallel (animation/timing white-bar-left-margin (easing :out 0.85))])
[(animation/timing anim-width (easing-in 0.6)) (animation/parallel
(animation/timing anim-x (easing-in 0.2))]) [(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/parallel (animation/timing white-bar-left-margin (easing :in 0.65))])
[(animation/timing anim-width (easing-out 0.15)) (animation/parallel
(animation/timing anim-x (easing-out 0.85))]) [(animation/timing blue-bar-left-margin (easing :out 0))
(animation/parallel (animation/timing white-bar-left-margin (easing :out 0))])]))))}
[(animation/timing anim-width (easing-in 0.6))
(animation/timing anim-x (easing-in 0.2))])
(animation/parallel
[(animation/timing anim-width (easing-out 0.15))
(animation/timing anim-x (easing-out 0))])]))))}
[react/view {:style {:width parent-width [react/view {:style {:width parent-width
:position :absolute :position :absolute
:top -3 :top -3
:height 3 :height 3
:background-color colors/white}} :background-color colors/white}}
[react/animated-view {:style {:margin-left anim-x [react/animated-view {:style (animated-bar-style blue-bar-left-margin
:width anim-width parent-width
:height 3 colors/blue)}]
:background-color colors/blue}}]])) [react/animated-view {:style (assoc (animated-bar-style white-bar-left-margin
parent-width
colors/white)
:left (* 0.15 parent-width))}]]))
(defonce show-connected? (reagent/atom true)) (defonce show-connected? (reagent/atom true))