feat: add story inner animate function

mipengine · Apr 13, 2018 · 7ca6b5d · 7ca6b5d
1 parent 7f8f16d
commit 7ca6b5d
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 80 deletions.
diff --git a/src/mip-story/README.md b/src/mip-story/README.md
@@ -10,10 +10,10 @@
 - 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。
 - 元素（element）是资源素材，如背景图，主标题，详细描述等。在 `<h1>`、`<p>`、`<mip-img>` 等标签中声明。
 
-标题|内容
-----|----
-类型|通用
-支持布局|responsive,fixed-height,fill,container,fixed
+| 标题   | 内容                                       |
+| ---- | ---------------------------------------- |
+| 类型   | 通用                                       |
+| 支持布局 | responsive,fixed-height,fill,container,fixed |
 
 所需脚本|https://c.mipcdn.com/static/v1/mip-story/mip-story.js<br>https://c.mipcdn.com/static/v1/mip-share/mip-share.js<br>https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js<br>https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js
 
@@ -28,16 +28,7 @@
     h1 {
         text-align: center;
     }
-    .box {
-        width: 100px;
-        height: 100px;
-        background-color: #09f;
-        margin-top: 30px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    </style>
-    <script type="text/javascript" src="http://mip-extensions.bj.bcebos.com/little-story%2Fanimation.js"></script>
+</style>
 <mip-story standalone>
     <script type="application/json">
     {
@@ -69,65 +60,23 @@
     }
     </script>
     <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>fade-in</h1>
-                <div animate-in="fade-in" class="box"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>fly-in-top</h1>
-                <div animate-in="fly-in-top" class="box"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>fly-in-bottom</h1>
-                <div class="box" animate-in="fly-in-bottom"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>fly-in-left</h1>
-                <div class="box" animate-in="fly-in-left"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>fly-in-right</h1>
-                <div class="box" animate-in="fly-in-right"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>twirl-in</h1>
-                <div class="box" animate-in="twirl-in"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>whoosh-in-left</h1>
-                <div class="box" animate-in="whoosh-in-left"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>whoosh-in-right</h1>
-                <div class="box" animate-in="whoosh-in-right"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>rotate-in-left</h1>
-                <div class="box" animate-in="rotate-in-left"></div>
-            </mip-story-layer>
-        </mip-story-view>
-        <mip-story-view>
-            <mip-story-layer template="vertical">
-                <h1>rotate-in-right</h1>
-                <div class="box" animate-in="rotate-in-right"></div>
-            </mip-story-layer>
-        </mip-story-view>
+        <mip-story-layer template="fill">
+            <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>
+            <a href="https://www.baidu.com">普通跳转链接</a>
+        </mip-story-layer>
+    </mip-story-view>
+    <mip-story-view>
+        <mip-story-layer template="fill">
+            <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>
+        </mip-story-layer>
+    </mip-story-view>
 </mip-story>
 ```
 
@@ -140,14 +89,82 @@
 - share.title: 小故事标题。
 - share.from: 资源的来源信息。
 - recommend: 小故事推荐相关的信息。
-- recommend.url: 更多小故事跳转链接。
 - recommend.items: 推荐小故事列表，它是一个数组，包含了所有推荐的小故事数据。
     - cover: 推荐的小故事背景图片。
     - url: 推荐的小故事跳转地址。
     - title: 推荐的小故事标题。
     - from: 推荐的小故事来源信息。
     - fromUrl: 推荐的小故事来源跳转地址。
 
+## 为元素添加动画
+
+在小故事中，我们提供了一些内置的动画，小故事页面元素在进场的时候变得更生动有趣；
+
+### 基本用法
+
+```html
+<style mip-custom>
+    mip-story-view {
+        color: #fff;
+    }
+    h1 {
+        text-align: center;
+    }
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: #09f;
+        margin-top: 30px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    </style>
+<mip-story>
+    <mip-story-view>
+        <mip-story-layer template="vertical">
+              <h1>fade-in</h1>
+              <div animate-in="fade-in" class="box"></div>
+        </mip-story-layer>
+	</mip-story-view>
+</mip-story>
+```
+
+### 更多动画配置
+
+`animate-in`: 元素入场的动画类型，小故事提供以下预设动画
+
+| animate-in        | 说明     |
+| ----------------- | ------ |
+| `fade-in`         | 淡入     |
+| `fly-in-top`      | 上侧滑入   |
+| `fly-in-bottom`   | 下侧滑入   |
+| `fly-in-left`     | 左侧滑入   |
+| `fly-in-right`    | 右侧滑入   |
+| `twirl-in`        | 旋转进入   |
+| `whoosh-in-left`  | 左侧放大飞入 |
+| `whoosh-in-right` | 右侧放大飞入 |
+| `rotate-in-left`  | 左侧旋转飞入 |
+| `rotate-in-right` | 右侧旋转飞入 |
+
+`animate-in-duration` : 元素动画的持续事件；可以取得值为正整数，单位为毫秒；
+
+`animate-in-delay` : 元素动画开始前的延迟时间，可以取得值为正整数，单位为毫秒
+
+`animate-in-after` ：指定动画在另一个元素动画结束之后触发；可以的取值为带有动画元素的id
+
+```html
+
+<mip-story-layer>
+  	<!-- 以fade-in的形式入场，动画时间持续1000ms, 动画开始前延迟1000ms-->
+    <h1 animate-in="fade-in" animate-in-duration="1000" animate-in-delay="1000"  id="first-animate">最佳影片</h1>
+  	<!--在id为 first-animate 的元素动画动画结束之后开始执行-->
+    <p animate-in="fly-in-left" animate-in-after="first-animate">钢铁侠是一部非常好的科幻片。</p>
+</mip-story-layer>
+
+```
+
+
+
 ## 属性
 
 ## mip-story

diff --git a/src/mip-story/animate-preset.js b/src/mip-story/animate-preset.js
@@ -41,7 +41,7 @@ define(function (require) {
             easing: 'ease-out',
             delay: 0,
             keyframes: function (offset) {
-                var offsetY = offset.pageHeight + offset.top;
+                var offsetY = offset.pageHeight - offset.top;
                 return [
                     {
                         transform: 'translateY(' + offsetY +'px)'

diff --git a/src/mip-story/animation-runner.js b/src/mip-story/animation-runner.js
@@ -5,7 +5,7 @@
  */
 define(function(require) {
     'use strict'
-
+    var css = require('util').css;
     function AnimationRunner(el, animationDef) {
         this.el = el;
         this.animationDef = animationDef;
@@ -16,6 +16,7 @@ define(function(require) {
 
     AnimationRunner.prototype.create = function () {
         var animationDef = this.animationDef;
+        animationDef.easing.fill = 'forwards';
         this.runner = this.el.animate(animationDef.keyframes, animationDef.easing);
         this.pause();
     }
@@ -26,9 +27,11 @@ define(function(require) {
             // delay属性会造成无法渲染第一帧，所以使用setTimeout来代替delay
             if (self.animationDef.delay) {
                 self.timer = setTimeout(function() {
+                    css(self.el, {visibility: ''});
                     self.runner.play();
                 }, self.animationDef.delay);
             } else {
+                css(self.el, {visibility: ''});
                 self.runner.play();
             }
             self.isStart = 1;
@@ -42,6 +45,7 @@ define(function(require) {
     AnimationRunner.prototype.cancel = function() {
         var self = this;
         clearTimeout(self.timer);
+        this.el.removeAttribute('style');
         this.isStart = 0;
         this.runner.cancel();
     }

diff --git a/src/mip-story/animation.js b/src/mip-story/animation.js
@@ -10,6 +10,7 @@ define(function(require) {
     var AnimationRunner = require('./animation-runner');
     var util = require('util');
     var extend = util.fn.extend;
+    var css = util.css;
     var MIP_STORY_ANIMATE_IN_ATTR = 'animate-in';
     var MIP_STORY_ANIMATE_IN_DURATION_ATTR = 'animate-in-duration';
     var MIP_STORY_ANIMATE_IN_DELAY_ATTR = 'animate-in-delay';
@@ -67,7 +68,7 @@ define(function(require) {
      */
     AnimationManager.prototype.paintFirstFrame = function () {
         this.sequence.forEach(function(player) {
-            player.runner.pause();
+            css(player.runner.el, player.runner.animationDef.keyframes[0]);
         });
     }
 

diff --git a/src/mip-story/mip-story-bookend.js b/src/mip-story/mip-story-bookend.js
@@ -53,7 +53,7 @@ define(function (require) {
             }
             recTpl = ''
                 + '<div class="recommend">'
-                +     '<a href="' + recommend.url + '">更多小故事</a>'
+                +     '<a href="' + recommend.url + '">更多阅读</a>'
                 +     '<mip-scrollbox>'
                 +         '<div data-wrapper>'
                 +            '<div data-inner>'

diff --git a/src/mip-story/mip-story-view.js b/src/mip-story/mip-story-view.js
@@ -12,6 +12,7 @@ define(function (require) {
 
     var AnimationManager = require('./animation').AnimationManager;
     var hasAnimations = require('./animation').hasAnimations;
+    var css = require('util').css;
     customElement.prototype.resumeAllMedia = function (load) {
         var self = this;
         self.whenAllMediaElements(function (ele) {
@@ -73,9 +74,10 @@ define(function (require) {
         this.parentEmiter = eventEmiter;
         if (status) {
             this.element.setAttribute('active', '');
+            css(this.element, {visibility: 'hidden'});
+            this.maybeStartAnimation();
             this.resumeAllMedia(load);
             this.muted ? this.muteAllMedia() : this.unMuteAllMedia();
-            this.maybeStartAnimation();
         }
         else {
             this.element.removeAttribute('active');
@@ -90,6 +92,7 @@ define(function (require) {
                 this.animationManager = new AnimationManager(this.element);
             }
             this.animationManager.paintFirstFrame();
+            css(this.element, {visibility: ''});
             this.animationManager.runAllAnimate();
             this.maybeSetAutoAdvance();
         }
@@ -98,7 +101,7 @@ define(function (require) {
     customElement.prototype.maybeClearAnimation = function() {
         if (this.animationManager) {
             this.animationManager.cancelAllAnimate();
-            this.animationManager = null;
+            // this.animationManager = null;
             // 切换页面的时候清除当前animationManager
             // web-animation polyfill 有个兼容性问题；
         }