feat:add story inner aniamte-in type (#1170)

src/mip-story/README.md

@@ -67,17 +67,17 @@
             <mip-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_01.jpg"></mip-img>
         </mip-story-layer>
         <mip-story-layer>
-            <h1 animate-in="fly-in-left">小故事是什么？</h1>
-            <p animate-in="fly-in-right">快用 MIP 小故事开发很多丰富的交互效果吧！</p>
+            <h1 animate-in="fade-in-left">小故事是什么？</h1>
+            <p animate-in="fade-in-right">快用 MIP 小故事开发很多丰富的交互效果吧！</p>
             <a href="https://www.baidu.com">普通跳转链接</a>
         </mip-story-layer>
     </mip-story-view>
     <mip-story-view>
-        <mip-story-layer template="fill">
+        <mip-story-layer template="fill" animate-in="scale-in" animate-in-duration="3s">
             <mip-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_02.jpg"></mip-img>
         </mip-story-layer>
         <mip-story-layer>
-            <h1 animate-in="fly-in-right">用 MIP 来讲述你的故事！</h1>
+            <h1 animate-in="fade-in-right">用 MIP 来讲述你的故事！</h1>
         </mip-story-layer>
     </mip-story-view>
 </mip-story>
@@ -140,19 +140,23 @@
 | animate-in        | 说明     |
 | ----------------- | ------ |
 | `fade-in`         | 淡入     |
-| `fly-in-top`      | 上侧滑入   |
-| `fly-in-bottom`   | 下侧滑入   |
-| `fly-in-left`     | 左侧滑入   |
-| `fly-in-right`    | 右侧滑入   |
+| `fly-in-top`      | 上侧飞入   |
+| `fly-in-bottom`   | 下侧飞入   |
+| `fly-in-left`     | 左侧飞入   |
+| `fly-in-right`    | 右侧飞入   |
+| `fade-in-top`     | 上侧淡入  |
+| `fade-in-bottom`  | 下侧淡入  |
+| `fade-in-left`    | 左侧淡入  |
+| `fade-in-right`   | 右侧淡入  |
 | `twirl-in`        | 旋转进入   |
 | `whoosh-in-left`  | 左侧放大飞入 |
 | `whoosh-in-right` | 右侧放大飞入 |
 | `rotate-in-left`  | 左侧旋转飞入 |
 | `rotate-in-right` | 右侧旋转飞入 |
 
-`animate-in-duration` : 元素动画的持续事件；可以取得值为正整数，单位为毫秒；
+`animate-in-duration` : 元素动画的持续时间，默认单位为毫秒，可取值为300、300ms、0.3s，以上都代表动画持续时间为300ms；
 
-`animate-in-delay` : 元素动画开始前的延迟时间，可以取得值为正整数，单位为毫秒
+`animate-in-delay` : 元素动画开始前的延迟时间，默认单位为毫秒，可取值为300、300ms、0.3s，以上都代表动画开始前延迟时间为300ms；
 
 `animate-in-after` ：指定动画在另一个元素动画结束之后触发；可以的取值为带有动画元素的id
 

src/mip-story/animate-preset.js

@@ -84,6 +84,95 @@ define(function (require) {
                 ];
             }
         },
+        'fade-in-top': {
+            duration: 500,
+            easing: 'ease-in',
+            delay: 0,
+            keyframes: function (offset) {
+                var offsetY = -50;
+                return [
+                    {
+                        opacity: 0,
+                        transform: 'translate3d(0, ' + offsetY + 'px, 0)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translate3d(0, 0, 0)'
+                    }
+                ];
+            }
+        },
+        'fade-in-bottom': {
+            duration: 500,
+            easing: 'ease-in',
+            delay: 0,
+            keyframes: function (offset) {
+                var offsetY = 50;
+                return [
+                    {
+                        opacity: 0,
+                        transform: 'translate3d(0, ' + offsetY + 'px, 0)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translate3d(0, 0, 0)'
+                    }
+                ];
+            }
+        },
+        'fade-in-left': {
+            duration: 500,
+            delay: 0,
+            easing: 'ease-in',
+            keyframes: function (offset) {
+                var offsetX = -50;
+                return [
+                    {
+                        opacity: 0,
+                        transform: 'translate3d(' + offsetX + 'px, 0, 0)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translate3d(0, 0, 0)'
+                    }
+                ];
+            }
+        },
+        'fade-in-right': {
+            duration: 500,
+            delay: 0,
+            easing: 'ease-in',
+            keyframes: function (offset) {
+                var offsetX = 50;
+                return [
+                    {
+                        opacity: 0,
+                        transform: 'translate3d(' + offsetX + 'px, 0, 0)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translate3d(0, 0, 0)'
+                    }
+                ];
+            }
+        },
+        'scale-in': {
+            duration: 1000,
+            delay: 0,
+            easing: 'linear',
+            keyframes: function (offset) {
+                var offsetX = 50;
+                return [
+                    {
+                        transform: 'scale(1)',
+                    },
+                    {
+                        transform: 'scale(1.1)'
+                    }
+                ];
+            }
+        },
+
         'twirl-in': {
             duration: 1000,
             delay: 0,

src/mip-story/package.json

@@ -1,7 +1,7 @@
 {
     "name": "mip-story",
-    "version": "1.0.12",
-    "description": "组件介绍",
+    "version": "1.0.13",
+    "description": "一种展现移动原生优质内容的富媒体产品组件",
     "contributors": [
         {
             "name": "Jackson",