use anikit to generate all animations

Author: zbryikt

CHANGELOG.md

@@ -0,0 +1,22 @@
+# v2.0.0 Change Log
+
+ * animations rename: ( old names kept as alias )
+   - ld-rubber -> ld-rubber-h
+   - ld-wander -> ld-wander-h
+   - ld-shake -> ld-shake-h
+ * add alias: 
+   - ld-coin-h -> ld-coin
+
+ * removed animations:
+   - radio
+   - broadcast
+   - shadow
+   - shadow-a
+   - bounce-a
+   - rotate
+
+ * removed ( tentative )
+   - slot
+   - bounce-rtl
+   - bounce-ltr
+   - leaf

build

@@ -6,17 +6,18 @@ echo "build src/ctrl.styl -> dist/ctrl.css ..."
 echo "build src/shape.styl -> dist/shape.css ..."
 ./node_modules/.bin/stylus -p src/shape.styl > dist/shape.css
 echo "build animations..."
-./node_modules/.bin/lsc tool/build-css.ls > dist/main.css
+./node_modules/.bin/lsc tool/build-css.ls
 
 echo "merge css files into loading.css / loading.utils.css ..."
-cat dist/shape.css dist/ctrl.css dist/main.css > dist/loading.css
+cat dist/shape.css dist/ctrl.css dist/loading.css > dist/loading-bundle.css
+mv dist/loading-bundle.css dist/loading.css
 cat dist/shape.css dist/ctrl.css > dist/loading.utils.css
 echo "minifying loading.css / loading.utils.css ..."
 ./node_modules/.bin/uglifycss dist/loading.css > dist/loading.min.css
 ./node_modules/.bin/uglifycss dist/loading.utils.css > dist/loading.utils.min.css
 echo "zipping..."
 zip -r dist/loading-css.zip dist/loading.min.css dist/loading.utils.min.css
 echo "clean up intermediate files..."
-rm dist/ctrl.css dist/shape.css dist/main.css
+rm -f dist/ctrl.css dist/shape.css
 
 echo "done."

dist/entries/beat.css

@@ -0,0 +1,26 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-beat
+{
+  0% {
+    animation-timing-function: cubic-bezier(0.1028,0.2484,0.1372,0.849);
+    transform: scale(1);
+  }
+  34% {
+    animation-timing-function: cubic-bezier(0.7116,0.2095,0.8159,0.6876);
+    transform: scale(1.2);
+  }
+  68% {
+    animation-timing-function: cubic-bezier(0.1475,0.2888,0.294,0.883);
+    transform: scale(1.0268);
+  }
+  84% {
+    animation-timing-function: cubic-bezier(0.8176,0.2193,0.867,0.6889);
+    transform: scale(1.0932);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.ld.ld-beat {
+  animation: ld-beat 1s infinite linear; ; 
+}

dist/entries/beat.min.css

@@ -0,0 +1,11 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-blink {
+  0% { opacity: 1; }
+  49.75% { opacity: 1; }
+  50.25% { opacity: 0; }
+  99.5% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.ld.ld-blink {
+  animation: ld-blink 1s infinite linear; ; 
+}

dist/entries/blink.css

@@ -0,0 +1,8 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-blur-in {
+  100% { filter: blur(0); opacity: 1 }
+  0% { filter: blur(10%); opacity: 0 }
+}
+.ld.ld-blur-in {
+  animation: ld-blur-in 1s 1 linear; animation-fill-mode: forwards;filter: blur(10%);opacity: 0; 
+}

dist/entries/blink.min.css

@@ -0,0 +1,8 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-blur-out {
+  0% { filter: blur(0); opacity: 1 }
+  100% { filter: blur(10%); opacity: 0 }
+}
+.ld.ld-blur-out {
+  animation: ld-blur-out 1s 1 linear; animation-fill-mode: forwards;filter: blur(0%);opacity: 1; 
+}