关于 Quamolit 动画方案设计的思考

brew install boot-clj boot compile-cirru # 生成 cljs 代码到 src/ boot build-simple # 生成应用到 target/ boot dev # 生成开发环境应用到 target/index.html

回顾 MVC

简单的思路, 我用函数随便写一下大概也能理解:

f1(model)=view  ; 数据映射到视图 f2(view)=UI     ; 视图绘制到屏幕上 h(m1)=m2        ; 怎样更新数据 g(UI, user)=h   ; h 指上一行的 h, 通过 UI 和用户操作判断怎样更新数据

Quamolit 的渲染方案

Quamolit 中动画的理解

可能不严谨但大致表达出点, 动画应该是这样的:

f(store, states, time, view0) = view1

• mount 过程的动画

• unmount 过程延迟删除节点, 并且动画

• props 或者 state 改变

其他种类的动画, 比如循环, 比如视差, 思路已经有了, 细节还得看第一版 Quamolit 已经考虑过一些问题, 所以算是积攒下来了

示例

(ns quamolit.component.task-toggler ; 命名空间, 无视   (:require [hsl.core :refer [hsl]]             [quamolit.util.iterate :refer [iterate-instant tween]] ; 我写了辅助函数             [quamolit.alias :refer [create-component group rect]])) ; 创建组件用的  (defn style-toggler [done-value] ; 样式对应 Canvas API, done-value 属于 0~1000   {:w 40,    :h 40,    :fill-style    (hsl      (tween [360 200] [0 1000] done-value) ; 我写的辅助函数, 取中间的插值      80      (tween [40 80] [0 1000] done-value))})  (defn handle-click [task-id]   (fn [event dispatch] (dispatch :toggle task-id))) ; Respo 风格的 dispatch action  ; instant, 也就是组件状态, 初始化的代码 (defn init-instant [args state]   (let [done? (first args)]     {:numb? true, :done-value (if done? 0 1000), :done-velocity 0})) ; numb? 是标记组件删除用的, 这个例子里没有, 但 unmount 再动画结束, 根据它删除 ; done-value, 把 done? 的 true/false 转成数字, 以便插值 ; done-velocity 速度, 默认是 0  ; props 和 state 更新时用的 (defn on-update [instant old-args args old-state state]   (let [old-done? (first old-args) done? (first args)]     (if (not= old-done? done?) ; props 里的 done? 如果改变的话, 甚至速度       (assoc         instant         :done-velocity         (if (> (:done-value instant) 500) -3 3)) ; 我用了 3 或者 -3 的速度       instant)))  ; tick 是时间循环, elapsed 是两次时间循环的时间差 (defn on-tick [instant tick elapsed]   (iterate-instant instant :done-value :done-velocity elapsed 1000 0)) ; iterate-instant 是辅助函数, 根据 value 和 velocity 算下个位置, 1000 和 0 是上下界  ; render 函数, 依赖 props, state, instant. 而 view0 是在框架中处理的 (defn render [done? task-id]   (fn [state mutate]     (fn [instant]       (comment .log js/console "done:" instant)       (rect         {:style (style-toggler (:done-value instant)), ; 颜色根据 instant 显示          :event {:click (handle-click task-id)}}))))  ; 创建组件 (def component-toggler  (create-component    :task-toggler    {:init-instant init-instant,     :on-tick on-tick,     :on-update on-update,     :render render}))

再看下创建更大的组件的例子, 这个 task 引用了上边的 toggler:

(ns quamolit.component.task   (:require [hsl.core :refer [hsl]]             [quamolit.alias :refer [create-component group rect]]             [quamolit.render.element :refer [translate alpha input]]             [quamolit.util.iterate :refer [iterate-instant]]             [quamolit.component.task-toggler :refer [component-toggler]])) ; 引用  (def style-block {:w 300, :h 40, :fill-style (hsl 40 80 80)})  (defn handle-input [task-id task-text]   (fn [event dispatch]     (let [new-text (js/prompt "new content:" task-text)]       (dispatch :update [task-id new-text]))))  (defn style-input [text]   {:w 400, :h 40, :fill-style (hsl 0 0 60), :text text})  (def style-remove {:w 40, :h 40, :fill-style (hsl 0 80 40)})  (defn handle-remove [task-id]   (fn [event dispatch] (dispatch :rm task-id)))  ; 初始化 instant, 注意 presence, index, 和对应的 velocity, 另外是 numb? 判断是否可删除 (defn init-instant [args state]   (let [index (last args)]     {:presence-velocity 0,      :index index,      :presence 0,      :numb? false,      :index-velocity 0}))  ; mount 和 init 其实是重复的, 在考虑是否合并 (defn on-mount [instant args state at-place?]   (assoc instant :presence-velocity 3))  ; tick 依然是时间循环里对 instant 做更新, 借助 -> 这个 Macro 简化写法 (defn on-tick [instant tick elapsed]   (comment .log js/console "on tick data:" tick elapsed)   (let [v (:presence-velocity instant)         new-instant (-> instant                      (iterate-instant                        :presence                        :presence-velocity                        elapsed                        1000                        0) ; 区间是 [0, 1000]                      (iterate-instant                        :index                        :index-velocity                        elapsed                        (:index-target instant) ; 变化的区间是这个 target, 尽管有点怪...                        (:index-target instant)))]     (if (and (< v 0) (= 0 (:presence new-instant))) ; v 小于零, 说明正在消失       (assoc new-instant :numb? true) ; 完全消失的时候, 设置 numb? 为 true, 可删除       new-instant)))  ; props 和 state 改变时调用 (defn on-update [instant old-args args old-state state]   (comment .log js/console "on update:" instant old-args args)   (let [old-index (last old-args) new-index (last args)]     (if (not= old-index new-index) ; index 改变时, y 轴位置变化, 所以加动画       (assoc         instant         :index-velocity         (/ (- new-index (:index instant)) 300)         :index-target         new-index)       instant)))  (defn on-unmount [instant tick]   (.log js/console "calling unmount" instant)   (assoc instant :presence-velocity -3)) ; unmount 时速度反向, 消失中  (defn render [task index]   (fn [state mutate]     (fn [instant]       (comment .log js/console "watch instant:" instant)       (group ; 看下从这里开始, 元素嵌套的写法, 跟 DOM 区别挺大的         {}         (alpha           {:style {:opacity (/ (:presence instant) 1000)}}           (translate             {:style              {:y (- (* 60 (:index instant)) 140), ; translate 手动布局中... y 位置按照 instant 算               :x (let [x (* 0.04 (- (:presence instant) 1000))] x)}} ; x 位置按照 instant 算             (translate               {:style {:x -200}}               (component-toggler (:done? task) (:id task))) ; 调用 toggler 组件了             (translate               {:style {:x -140}}               (input                 {:style (style-input (:text task)),                  :event                  {:click (handle-input (:id task) (:text task))}}))             (translate               {:style {:x 280}}               (rect                 {:style style-remove,                  :event {:click (handle-remove (:id task))}}))))))))  (def component-task  (create-component    :task    {:on-mount on-mount,     :init-instant init-instant,     :on-tick on-tick,     :on-update on-update,     :render render,     :on-unmount on-unmount}))

大致这样, 后面会试着写点有意思的例子出来