From eae48db5cbfcec2155b4c4cdecbc7c4e1c4c4146 Mon Sep 17 00:00:00 2001 From: xiongwenjie Date: Fri, 13 Apr 2018 15:46:15 +0800 Subject: [PATCH] feat: add story inner animate function --- src/mip-story/README.md | 165 ++++++++++++++++------------- src/mip-story/animate-preset.js | 2 +- src/mip-story/animation-runner.js | 6 +- src/mip-story/animation.js | 3 +- src/mip-story/mip-story-bookend.js | 2 +- src/mip-story/mip-story-view.js | 8 +- src/mip-story/package.json | 2 +- 7 files changed, 106 insertions(+), 82 deletions(-) diff --git a/src/mip-story/README.md b/src/mip-story/README.md index 944f5accd..f8f3b8b6b 100644 --- a/src/mip-story/README.md +++ b/src/mip-story/README.md @@ -10,10 +10,10 @@ - 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。 - 元素（element）是资源素材，如背景图，主标题，详细描述等。在 `

`、`

`、`` 等标签中声明。 -标题|内容 -----|---- -类型|通用 -支持布局|responsive,fixed-height,fill,container,fixed +| 标题 | 内容 | +| ---- | ---------------------------------------- | +| 类型 | 通用 | +| 支持布局 | responsive,fixed-height,fill,container,fixed | 所需脚本|https://c.mipcdn.com/static/v1/mip-story/mip-story.js
https://c.mipcdn.com/static/v1/mip-share/mip-share.js
https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js
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; - } - - + - -

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

-
- - + + + + +

小故事是什么？

+

快用 MIP 小故事开发很多丰富的交互效果吧！

+ 普通跳转链接 + + + + + + + +

用 MIP 来讲述你的故事！

+ + ``` @@ -140,7 +89,6 @@ - share.title: 小故事标题。 - share.from: 资源的来源信息。 - recommend: 小故事推荐相关的信息。 -- recommend.url: 更多小故事跳转链接。 - recommend.items: 推荐小故事列表，它是一个数组，包含了所有推荐的小故事数据。 - cover: 推荐的小故事背景图片。 - url: 推荐的小故事跳转地址。 @@ -148,6 +96,75 @@ - from: 推荐的小故事来源信息。 - fromUrl: 推荐的小故事来源跳转地址。 +## 为元素添加动画 + +在小故事中，我们提供了一些内置的动画，小故事页面元素在进场的时候变得更生动有趣； + +### 基本用法 + +```html + + + + +

fade-in

+
+ + + +``` + +### 更多动画配置 + +`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 diff --git a/src/mip-story/animate-preset.js b/src/mip-story/animate-preset.js index ee0e1951d..41b5702d2 100644 --- 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 index 04c24aff1..bf665facb 100644 --- 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 index fdf2294aa..7eaadb32d 100644 --- 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 index 813d74895..23c9db8d4 100644 --- a/src/mip-story/mip-story-bookend.js +++ b/src/mip-story/mip-story-bookend.js @@ -53,7 +53,7 @@ define(function (require) { } recTpl = '' + '
' - + '更多小故事' + + '更多阅读' + '' + '
' + '
' diff --git a/src/mip-story/mip-story-view.js b/src/mip-story/mip-story-view.js index 022bf5c7d..66887074f 100644 --- a/src/mip-story/mip-story-view.js +++ b/src/mip-story/mip-story-view.js @@ -11,7 +11,7 @@ define(function (require) { var BACKGROUND_AUDIO = 'background-audio'; 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 +73,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 +91,7 @@ define(function (require) { this.animationManager = new AnimationManager(this.element); } this.animationManager.paintFirstFrame(); + css(this.element, {visibility: ''}); this.animationManager.runAllAnimate(); this.maybeSetAutoAdvance(); } @@ -98,7 +100,7 @@ define(function (require) { customElement.prototype.maybeClearAnimation = function() { if (this.animationManager) { this.animationManager.cancelAllAnimate(); - this.animationManager = null; + // this.animationManager = null; // 切换页面的时候清除当前animationManager // web-animation polyfill 有个兼容性问题； } diff --git a/src/mip-story/package.json b/src/mip-story/package.json index bd065cb92..2c2c42e1a 100644 --- a/src/mip-story/package.json +++ b/src/mip-story/package.json @@ -1,6 +1,6 @@ { "name": "mip-story", - "version": "1.0.6", + "version": "1.0.7", "description": "组件介绍", "contributors": [ {