Alternatives and detailed information of quamolit.cljs

Quamolit: a tiny animation library

Demo(check browser compatibility first) http://repo.tiye.me/Quamolit/quamolit/

Features:

declarative component markups for Canvas
animation abstractions
persistent data by default with ClojureScript

Still prototype... Quamolit requires ctx.addHitRegion(opts), which is an experimental technology.

Design

Quamolit is trying to combine two things:

declarative programming experience like React
pixels manipulating and animations in HTML5 Canvas

Usage

[quamolit "0.1.6"]

Browser docs/ for a little more details.

You may require Quamolit with higher level APIs:

(quamolit.core/render-page store states-ref target)
(quamolit.core/configure-canvas target)
(quamolit.core/setup-events target dispatch)

(ns quamolit.main
  (:require [quamolit.core :refer [render-page
                                   configure-canvas
                                   setup-events]]
            [quamolit.util.time :refer [get-tick]]
            [quamolit.updater.core :refer [updater-fn]]
            [devtools.core :as devtools]))

(defonce store-ref (atom []))

(defonce states-ref (atom {}))

(defonce loop-ref (atom nil))

(defn dispatch [op op-data]
  (let [new-tick (get-tick)
        new-store (updater-fn @store-ref op op-data new-tick)]
    (reset! store-ref new-store)))

(defn render-loop []
  (let [target (.querySelector js/document "#app")]
    (render-page @store-ref states-ref target)
    (reset! loop-ref (js/requestAnimationFrame render-loop))))

(defn -main []
  (let [target (.querySelector js/document "#app")]
    (configure-canvas target)
    (setup-events target dispatch)
    (render-loop)))

(set! js/window.onload -main)

(set! js/window.onresize configure-canvas)

(defn on-jsload []
  (js/cancelAnimationFrame @loop-ref)
  (js/requestAnimationFrame render-loop)
  (.log js/console "code updated..."))

Also you may use lower level APIs directly by copy/paste this Gist:

(defn init-state [arg1 arg2])
(defn update-state [old-state state-arg1 state-arg2])
(defn init-instant [args state at-place?])
(defn on-tick [instant tick elapsed])
(defn on-update [instant old-args args old-state state])
(defn on-unmount [instant tick])
(defn remove? [instant])
(defn render [arg1 arg2]
  (fn [state mutate instant tick]))

(create-comp :demo                                                                         render)
(create-comp :demo init-state update-state                                                 render)
(create-comp :demo                         init-instant on-tick on-update on-mount remove? render)
(create-comp :demo init-state update-state init-instant on-tick on-update on-mount remove? render)

(mutate state-arg1 state-arg2)
(dispatch op op-data)
(defn updater-fn [old-store op op-data op-id])

(quamolit.util.iterate/iterate-instant instant :x :x-velovity elapsed [lower-bound upper-bound])
(quamolit.util.iterate/tween [40 60] [0 1000] 800)

Component Specs

Shape records:

name keyword
props a hashmap of:
- style a hashmap of styles used in Canvas API
- event a hashmap of events, mainly :click events
- attrs a hashmap
children sorted hashmap with values of child nodes

Component record:

name keyword
coord a vector of numbers(maybe also keywords and strings)
args props of components are passed in a list, not hashmap
state any type from init-state
instant any type from init-instant, mainly hashmaps
init-state function to initilize component state
update-state function to transform component state
init-instant function to initilize component animation state
on-tick function to update animation state at every tick
on-update function to update animation state on every store or states change
on-unmount function to update animation state when component removed(not destroyed yet)
remove? function to detect if component totally removed(or destroyed)
render function to render
tree cached from render tree
fading? boolean, whether component unmounted(waiting to be destroyed)

Paint Elements

(line {:style {
  :x0 0 :y0 0 :x1 40 :y1 40
  :line-width 4
  :stroke-style (hsl 200 870 50)
  :line-cap "round"
  :line-join "round"
  :milter-limit 8
  }})
(arc {:style {
  :x 0 :y 0:r 40
  :s-angle 0
  :e-angle 60
  :line-width 4
  :counterclockwise true
  :line-cap "round"
  :line-join "round"
  :miter-limit 8
  :fill-style nil
  :stroke-style nil
}})
(rect {:style {
  :w 100 :h 40
  :x (- (/ w 2)) :y (- (/ h 2))
  :line-width 2
}})
(text {:style {
  :x 0
  :y 0
  :fill-style (hsl 0 0 0)
  :text-align "center"
  :base-linee "middle"
  :size 20
  :font-family "Optima"
  :max-width 400
  :text ""
}})
(image {:style {
  :src "lotus.jpg"
  :sx 0
  :sy 0
  :sw 40
  :sh 40
  :dx 0
  :dy 0
  :dw 40
  :dh 40
}})

Paint Components

(translate {:style {:x 0 :y 0}})
(scale {:style {:ratio 1.2}})
(alpha {:style {:opacity 0.5}})
(rotate {:style {:angle 30}})
(button {:style {
  :x 0 :y 0
  :w 100 :h 40 :text "button"
  :surface-color (hsl 0 80 80) :text-color (hsl 0 0 10)
  :font-family "Optima"
  :font-size 20}})
(input {:style {:w 0 :h 0 :text ""}})
(comp-debug data {})

Develop

To run this project:

yarn
yarn html
yarn watch # localhost:7000

License

MIT

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Quamolit / quamolit.cljs

Programming Languages