status-im
/
status-react
mirror of https://github.com/status-im/status-react.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)))
(defn easing [] js/ReactNative.Easing)
(defn easing-in [] (.-in (easing)))
(defn easing-out [] (.-out (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
(:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
(:require [reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.ui.components.connectivity.styles :as styles]
[status-im.utils.platform :as utils.platform]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.animation :as animation]
[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/letsubs [anim-width (animation/create-value (* 0.15 parent-width))
anim-x (animation/create-value 0)
easing-in (fn [n] {:toValue (* n parent-width)
:easing (.in (animation/easing) (.-quad (animation/easing)))
:duration 400})
easing-out (fn [n] {:toValue (* n parent-width)
:easing (.out (animation/easing) (.-quad (animation/easing)))
:duration 400})]
{:component-did-mount (fn [_]
(animation/start
(animation/anim-loop
(animation/anim-sequence
[(animation/parallel
[(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.85))])
(animation/parallel
[(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))])]))))}
(views/letsubs [blue-bar-left-margin (animation/create-value 0)
white-bar-left-margin (animation/create-value 0)]
{:component-did-mount
(fn [_]
(animation/start
(animation/anim-loop
(animation/anim-sequence
[(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0.85))
(animation/timing white-bar-left-margin (easing :out 0.85))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0))
(animation/timing white-bar-left-margin (easing :out 0))])]))))}
[react/view {:style {:width parent-width
:position :absolute
:top -3
:height 3
:background-color colors/white}}
[react/animated-view {:style {:margin-left anim-x
:width anim-width
:height 3
:background-color colors/blue}}]]))
[react/animated-view {:style (animated-bar-style blue-bar-left-margin
parent-width
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))