feature: Added some more StockAnimations

lib/assets/styles/splashscreen/dots.css

@@ -44,10 +44,30 @@ body .mdl-splashscreen {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
+  body .mdl-splashscreen--opacity-10 {
+    opacity: 0.1; }
+  body .mdl-splashscreen--opacity-20 {
+    opacity: 0.2; }
+  body .mdl-splashscreen--opacity-30 {
+    opacity: 0.3; }
+  body .mdl-splashscreen--opacity-40 {
+    opacity: 0.4; }
+  body .mdl-splashscreen--opacity-50 {
+    opacity: 0.5; }
+  body .mdl-splashscreen--opacity-60 {
+    opacity: 0.6; }
+  body .mdl-splashscreen--opacity-70 {
+    opacity: 0.7; }
+  body .mdl-splashscreen--opacity-80 {
+    opacity: 0.8; }
+  body .mdl-splashscreen--opacity-90 {
+    opacity: 0.9; }
+  body .mdl-splashscreen--opacity-100 {
+    opacity: 1; }
   body .mdl-splashscreen .spinner {
     margin: 100px auto;
-    width: 40px;
-    height: 40px;
+    width: 100px;
+    height: 100px;
     position: relative;
     text-align: center;
     -webkit-animation: sk-rotate 2.0s infinite linear;

lib/assets/styles/splashscreen/dots.scss

@@ -62,10 +62,21 @@ body {
         align-content   : stretch; // ||
         align-items     : center; // ↓
 
+        &--opacity-10 { opacity: 0.1; }
+        &--opacity-20 { opacity: 0.2; }
+        &--opacity-30 { opacity: 0.3; }
+        &--opacity-40 { opacity: 0.4; }
+        &--opacity-50 { opacity: 0.5; }
+        &--opacity-60 { opacity: 0.6; }
+        &--opacity-70 { opacity: 0.7; }
+        &--opacity-80 { opacity: 0.8; }
+        &--opacity-90 { opacity: 0.9; }
+        &--opacity-100 { opacity: 1; }
+
         .spinner {
             margin            : 100px auto;
-            width             : 40px;
-            height            : 40px;
+            width             : 100px;
+            height            : 100px;
             position          : relative;
             text-align        : center;
             -webkit-animation : sk-rotate 2.0s infinite linear;

lib/src/animation/StockAnimation.dart

@@ -32,26 +32,48 @@
  */
 class StockAnimation {
     /// Specifies the length of the animation
-    final Duration duration;
+    Duration duration;
 
     /// The keyframes for the animation
     final Map<int, Map<String, Object>> keyframes;
 
-    final AnimationTiming timing;
+    AnimationTiming timing;
 
     /// Specify your set of [keyframes]
-    const StockAnimation(this.duration, this.keyframes,this.timing);
+    StockAnimation(this.duration, this.keyframes,this.timing);
 
-    static const StockAnimation BounceInRight =
-        const StockAnimation(const Duration(milliseconds: 500), _BounceInRight,AnimationTiming.EASE_IN_OUT);
+    static final StockAnimation BounceInTop =
+        new StockAnimation(const Duration(milliseconds: 500), _BounceInTop,AnimationTiming.EASE_IN_OUT);
 
-    static const StockAnimation FadeIn =
-        const StockAnimation(const Duration(milliseconds: 500), _FadeIn,AnimationTiming.EASE_IN_OUT);
+    static final StockAnimation BounceInBottom =
+        new StockAnimation(const Duration(milliseconds: 500), _BounceInBottom,AnimationTiming.EASE_IN_OUT);
 
-    static const StockAnimation FadeOut =
-        const StockAnimation(const Duration(milliseconds: 500), _FadeOut,AnimationTiming.EASE_IN_OUT);
+    static final StockAnimation BounceInRight =
+        new StockAnimation(const Duration(milliseconds: 500), _BounceInRight,AnimationTiming.EASE_IN_OUT);
 
-    static const StockAnimation MoveUpAndDisappear =
-        const StockAnimation(const Duration(milliseconds: 400), _MoveUpAndDisappear,AnimationTiming.EASE_IN_OUT);
+    static final StockAnimation FadeIn =
+        new StockAnimation(const Duration(milliseconds: 500), _FadeIn,AnimationTiming.EASE_IN_OUT);
+
+    static final StockAnimation FadeOut =
+        new StockAnimation(const Duration(milliseconds: 500), _FadeOut,AnimationTiming.EASE_IN_OUT);
+
+    static final StockAnimation FlushRight =
+        new StockAnimation(const Duration(milliseconds: 500), _FlushRight,AnimationTiming.EASE_IN_OUT);
+
+    static final StockAnimation MoveUpAndDisappear =
+        new StockAnimation(const Duration(milliseconds: 400), _MoveUpAndDisappear,AnimationTiming.EASE_IN_OUT);
+
+    /// Modify the [StockAnimation] to your needs
+    ///
+    ///     final MdlAnimation bounceIn = new MdlAnimation.fromStock(
+    ///         StockAnimation.BounceInTop.change(duration: new Duration(milliseconds: 800)));
+    ///
+    StockAnimation change({ final Duration duration }) {
+        final StockAnimation newVersion = new StockAnimation(this.duration,this.keyframes,this.timing);
+        if(duration != null) {
+            newVersion.duration = duration;
+        }
+        return newVersion;
+    }
 
 }

lib/src/animation/keyframes.dart

@@ -40,6 +40,48 @@ const _FadeOut = const <int, Map<String, Object>>{
         "opacity" : 0}
 };
 
+/// Base-Sample on
+/// * [CodePen](http://codepen.io/MikeMitterer/pen/grYEJW)
+///
+const _BounceInTop = const <int, Map<String, Object>>{
+    0 : const <String, Object>{
+        "opacity" : 0,
+        "transform" : "translateY(-800px)"},
+
+    60 : const <String, Object>{
+        "opacity" : 1,
+        "transform" : "translateY(30px)"},
+
+    80 : const <String, Object>{
+        "opacity" : 0.8,
+        "transform" : "translateY(-30px)"},
+
+    100 : const <String, Object>{
+
+        // Final state should be visible
+        "opacity" : 1,
+        "transform" : "translateY(0)"}
+};
+
+const _BounceInBottom = const <int, Map<String, Object>>{
+    0 : const <String, Object>{
+        "opacity" : 0,
+        "transform" : "translateY(800px)"},
+
+    60 : const <String, Object>{
+        "opacity" : 1,
+        "transform" : "translateY(-30px)"},
+
+    80 : const <String, Object>{
+        "transform" : "translateY(30px)"},
+
+    100 : const <String, Object>{
+
+        // Final state should be visible
+        "opacity" : 1,
+        "transform" : "translateY(0)"}
+};
+
 const _BounceInRight = const <int, Map<String, Object>>{
     0 : const <String, Object>{
 
@@ -59,6 +101,25 @@ const _BounceInRight = const <int, Map<String, Object>>{
         "transform" : "translateX(0)"}
 };
 
+/// Base-Sample on
+/// * [CodePen](http://codepen.io/MikeMitterer/pen/grYEJW)
+///
+const _FlushRight = const <int, Map<String, Object>>{
+    0 : const <String, Object>{
+        "transform" : "translateX(-20px)"},
+
+    60 : const <String, Object>{
+        "transform" : "translateX(30px)"},
+
+    80 : const <String, Object>{
+        "opacity" : 0.8,
+        "transform" : "translateX(-10px)"},
+
+    100 : const <String, Object>{
+        "opacity" : 0,
+        "transform" : "translateX(100vw)"}
+};
+
 /// More on http://codepen.io/MikeMitterer/pen/QjeOov
 const _Shrink = const <int, Map<String, Object>>{
     0 : const <String, Object>{

lib/src/core/MdlComponent.dart

@@ -104,7 +104,13 @@ abstract class MdlComponent extends Object with MdlEventListener {
     /// Searches for child of [element] based on the given [selector]
     ///
     /// Shortcut to [element.querySelector]
-    dom.Element query(final String selector) => element.querySelector(selector);
+    dom.Element query(final String selector) {
+        final dom.Element result = element.querySelector(selector);
+        if(result == null) {
+            _logger.warning("Could not find '$selector' within $element!");
+        }
+        return result;
+    }
 
     //- private -----------------------------------------------------------------------------------