use anikit to generate all animations

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/blink.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/blur-in.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/blur-out.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; 
+}

dist/entries/blur.css

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

dist/entries/bounce-alt-in.css

@@ -0,0 +1,51 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-bounce-alt-in
+{
+  0% {
+    animation-timing-function: cubic-bezier(0.0955,0.3456,-1.5085,0.6684);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  3.3% {
+    animation-timing-function: cubic-bezier(0.0913,0.1631,0.2418,0.9474);
+    transform: matrix(0.607,0,0,0.607,0,0);
+    opacity: 1;
+  }
+  16.4% {
+    animation-timing-function: cubic-bezier(0.5391,0.1345,0.3944,0.9496);
+    transform: matrix(1.079,0,0,1.079,0,0);
+    opacity: 1;
+  }
+  32.3% {
+    animation-timing-function: cubic-bezier(0.5053,0.1012,0.4542,0.9453);
+    transform: matrix(0.84,0,0,0.84,0,0);
+    opacity: 1;
+  }
+  49.7% {
+    animation-timing-function: cubic-bezier(0.4074,0.0845,0.5696,1);
+    transform: matrix(1.033,0,0,1.033,0,0);
+    opacity: 1;
+  }
+  65.3% {
+    animation-timing-function: cubic-bezier(0.3701,0,0.6111,1);
+    transform: matrix(0.939,0,0,0.939,0,0);
+    opacity: 1;
+  }
+  82.6% {
+    animation-timing-function: cubic-bezier(0.336,0,0.6629,1);
+    transform: matrix(1.009,0,0,1.009,0,0);
+    opacity: 1;
+  }
+  94.3% {
+    animation-timing-function: cubic-bezier(0.3368,0,0.6709,1);
+    transform: matrix(0.994,0,0,0.994,0,0);
+    opacity: 1;
+  }
+  100% {
+    transform: matrix(1,0,0,1,0,0);
+    opacity: 1;
+  }
+}
+.ld.ld-bounce-alt-in {
+  animation: ld-bounce-alt-in 1s 1 linear; animation-fill-mode: forwards;transform: matrix(0.01,0,0,0.01,0,0); 
+}

dist/entries/bounce-alt-out.css

@@ -0,0 +1,51 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-bounce-alt-out
+{
+  0% {
+    animation-timing-function: cubic-bezier(0.094,0.3361,-1.0597,0.6688);
+    transform: matrix(1,0,0,1,0,0);
+    opacity: 1;
+  }
+  3.4% {
+    animation-timing-function: cubic-bezier(0.0867,0.1564,0.2047,0.9488);
+    transform: matrix(0.52,0,0,0.52,0,0);
+    opacity: 1;
+  }
+  16.8% {
+    animation-timing-function: cubic-bezier(0.5435,0.0974,0.4027,0.9465);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  32% {
+    animation-timing-function: cubic-bezier(0.5116,0.0971,0.4412,0.947);
+    transform: matrix(0.212,0,0,0.212,0,0);
+    opacity: 1;
+  }
+  50.1% {
+    animation-timing-function: cubic-bezier(0.3959,0.1021,0.5847,1);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  64.9% {
+    animation-timing-function: cubic-bezier(0.3789,0.0955,0.5974,1);
+    transform: matrix(0.082,0,0,0.082,0,0);
+    opacity: 1;
+  }
+  83.5% {
+    animation-timing-function: cubic-bezier(0.3358,0,0.6626,1);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  93.1% {
+    animation-timing-function: cubic-bezier(0.3201,0,0.6971,0.226);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  100% {
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+}
+.ld.ld-bounce-alt-out {
+  animation: ld-bounce-alt-out 1s 1 linear; animation-fill-mode: forwards;transform: matrix(1,0,0,1,0,0); 
+}

dist/entries/bounce-in.css

@@ -0,0 +1,86 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-bounce-in
+{
+  0% {
+    animation-timing-function: cubic-bezier(0.0383,0.3388,0.0421,0.6652);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  4.7% {
+    animation-timing-function: cubic-bezier(0.3296,0.3336,0.5772,0.6672);
+    transform: matrix(0.556,0,0,0.556,0,0);
+    opacity: 1;
+  }
+  8.4% {
+    animation-timing-function: cubic-bezier(0.0781,0.1617,0.0874,0.9301);
+    transform: matrix(0.979,0,0,0.979,0,0);
+    opacity: 1;
+  }
+  12.4% {
+    animation-timing-function: cubic-bezier(0.8341,0.1496,0.8634,0.7673);
+    transform: matrix(1.153,0,0,1.153,0,0);
+    opacity: 1;
+  }
+  16.3% {
+    animation-timing-function: cubic-bezier(0.3264,0.3332,0.5758,0.6695);
+    transform: matrix(1.008,0,0,1.008,0,0);
+    opacity: 1;
+  }
+  21.2% {
+    animation-timing-function: cubic-bezier(0.0921,0.1883,0.3277,1);
+    transform: matrix(0.704,0,0,0.704,0,0);
+    opacity: 1;
+  }
+  24.5% {
+    animation-timing-function: cubic-bezier(0.6905,0.0944,0.8759,0.7624);
+    transform: matrix(0.626,0,0,0.626,0,0);
+    opacity: 1;
+  }
+  27.7% {
+    animation-timing-function: cubic-bezier(0.3688,0.332,0.624,0.6684);
+    transform: matrix(0.704,0,0,0.704,0,0);
+    opacity: 1;
+  }
+  32.6% {
+    animation-timing-function: cubic-bezier(0.1368,0.2364,0.2451,0.9049);
+    transform: matrix(0.958,0,0,0.958,0,0);
+    opacity: 1;
+  }
+  37.4% {
+    animation-timing-function: cubic-bezier(0.5936,0.0846,0.3495,1);
+    transform: matrix(1.085,0,0,1.085,0,0);
+    opacity: 1;
+  }
+  49.5% {
+    animation-timing-function: cubic-bezier(0.5522,0.0981,0.3807,1);
+    transform: matrix(0.802,0,0,0.802,0,0);
+    opacity: 1;
+  }
+  62.4% {
+    animation-timing-function: cubic-bezier(0.4497,0.1349,0.4911,1);
+    transform: matrix(1.044,0,0,1.044,0,0);
+    opacity: 1;
+  }
+  74.1% {
+    animation-timing-function: cubic-bezier(0.429,0,0.5239,1);
+    transform: matrix(0.914,0,0,0.914,0,0);
+    opacity: 1;
+  }
+  87% {
+    animation-timing-function: cubic-bezier(0.3501,0,0.6422,1);
+    transform: matrix(1.013,0,0,1.013,0,0);
+    opacity: 1;
+  }
+  95.8% {
+    animation-timing-function: cubic-bezier(0.3653,0,0.6776,1);
+    transform: matrix(0.992,0,0,0.992,0,0);
+    opacity: 1;
+  }
+  100% {
+    transform: matrix(1,0,0,1,0,0);
+    opacity: 1;
+  }
+}
+.ld.ld-bounce-in {
+  animation: ld-bounce-in 1s 1 linear; animation-fill-mode: forwards;transform: matrix(0.01,0,0,0.01,0,0); 
+}

dist/entries/bounce-out.css

@@ -0,0 +1,61 @@
+.ld { transform-origin: 50% 50%; transform-box: fill-box; }
+@keyframes ld-bounce-out
+{
+  0% {
+    animation-timing-function: cubic-bezier(0.0725,0.3371,0.3061,0.6653);
+    transform: matrix(1,0,0,1,0,0);
+    opacity: 1;
+  }
+  5.7% {
+    animation-timing-function: cubic-bezier(0.0823,0.1441,-0.1523,0.9205);
+    transform: matrix(0.5,0,0,0.5,0,0);
+    opacity: 1;
+  }
+  12.6% {
+    animation-timing-function: cubic-bezier(0.7924,0.158,0.0272,0.9224);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  24.3% {
+    animation-timing-function: cubic-bezier(0.8378,0.1302,0.0581,0.9268);
+    transform: matrix(0.489,0,0,0.489,0,0);
+    opacity: 1;
+  }
+  37.6% {
+    animation-timing-function: cubic-bezier(0.662,0.0985,0.2767,0.9462);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  49.3% {
+    animation-timing-function: cubic-bezier(0.6012,0.1308,0.3182,0.9506);
+    transform: matrix(0.262,0,0,0.262,0,0);
+    opacity: 1;
+  }
+  62.6% {
+    animation-timing-function: cubic-bezier(0.4763,0.0773,0.4825,1);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  73.8% {
+    animation-timing-function: cubic-bezier(0.4466,0.0766,0.4988,1);
+    transform: matrix(0.115,0,0,0.115,0,0);
+    opacity: 1;
+  }
+  87.6% {
+    animation-timing-function: cubic-bezier(0.3423,0,0.6554,1);
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+  94.9% {
+    animation-timing-function: cubic-bezier(0.3661,0,0.6589,0.554);
+    transform: matrix(0.013,0,0,0.013,0,0);
+    opacity: 1;
+  }
+  100% {
+    transform: matrix(0.01,0,0,0.01,0,0);
+    opacity: 1;
+  }
+}
+.ld.ld-bounce-out {
+  animation: ld-bounce-out 1s 1 linear; animation-fill-mode: forwards;transform: matrix(1,0,0,1,0,0); 
+}