-
Notifications
You must be signed in to change notification settings - Fork 458
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add story inner animate function
- Loading branch information
xiongwenjie
committed
Apr 13, 2018
1 parent
eae48db
commit dff1557
Showing
3 changed files
with
28 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,30 +3,31 @@ | |
* @author [email protected] | ||
* @description | ||
*/ | ||
define(function(require) { | ||
'use strict' | ||
define(function (require) { | ||
'use strict'; | ||
|
||
var css = require('util').css; | ||
function AnimationRunner(el, animationDef) { | ||
this.el = el; | ||
this.animationDef = animationDef; | ||
this.isRunner = 1; | ||
this.create(); | ||
this.isStart = 0; | ||
}; | ||
} | ||
|
||
AnimationRunner.prototype.create = function () { | ||
var animationDef = this.animationDef; | ||
animationDef.easing.fill = 'forwards'; | ||
this.runner = this.el.animate(animationDef.keyframes, animationDef.easing); | ||
this.pause(); | ||
} | ||
}; | ||
|
||
AnimationRunner.prototype.play = function() { | ||
AnimationRunner.prototype.play = function () { | ||
var self = this; | ||
if (!self.isStart) { | ||
// delay属性会造成无法渲染第一帧,所以使用setTimeout来代替delay | ||
if (self.animationDef.delay) { | ||
self.timer = setTimeout(function() { | ||
self.timer = setTimeout(function () { | ||
css(self.el, {visibility: ''}); | ||
self.runner.play(); | ||
}, self.animationDef.delay); | ||
|
@@ -36,19 +37,19 @@ define(function(require) { | |
} | ||
self.isStart = 1; | ||
} | ||
} | ||
}; | ||
|
||
AnimationRunner.prototype.pause = function() { | ||
AnimationRunner.prototype.pause = function () { | ||
this.runner.pause(); | ||
} | ||
}; | ||
|
||
AnimationRunner.prototype.cancel = function() { | ||
AnimationRunner.prototype.cancel = function () { | ||
var self = this; | ||
clearTimeout(self.timer); | ||
this.el.removeAttribute('style'); | ||
this.isStart = 0; | ||
this.runner.cancel(); | ||
} | ||
}; | ||
|
||
return AnimationRunner; | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,8 @@ | |
* @author [email protected] | ||
* @description | ||
*/ | ||
define(function(require) { | ||
|
||
define(function (require) { | ||
'use strict'; | ||
|
||
var animatePreset = require('./animate-preset'); | ||
|
@@ -17,7 +18,8 @@ define(function(require) { | |
var MIP_STORY_ANIMATE_IN_AFTER_ATTR = 'animate-in-after'; | ||
var MIP_STORY_ANIMATE_IN_SELECROR = '[animate-in]'; | ||
|
||
function AnimationManager (page) { | ||
// @class | ||
function AnimationManager(page) { | ||
this.page = page; | ||
// [ | ||
// { | ||
|
@@ -61,21 +63,18 @@ define(function(require) { | |
player.runner.play(); | ||
} | ||
}); | ||
} | ||
}; | ||
|
||
/** | ||
* paintFirstFrame 渲染动画第一帧 | ||
*/ | ||
AnimationManager.prototype.paintFirstFrame = function () { | ||
this.sequence.forEach(function(player) { | ||
this.sequence.forEach(function (player) { | ||
css(player.runner.el, player.runner.animationDef.keyframes[0]); | ||
}); | ||
} | ||
}; | ||
|
||
AnimationManager.prototype.getRunnerById = function (id) { | ||
var runner = null; | ||
if (id) { | ||
this.sequence.forEach(function(val) { | ||
this.sequence.forEach(function (val) { | ||
if (val.id === id && val.runner && val.runner.isRunner) { | ||
runner = val.runner; | ||
} | ||
|
@@ -88,37 +87,25 @@ define(function(require) { | |
this.sequence.forEach(function (player) { | ||
player.runner.cancel(); | ||
}); | ||
} | ||
}; | ||
|
||
AnimationManager.prototype.waitAndStart = function(prevPlayer, player) { | ||
AnimationManager.prototype.waitAndStart = function (prevPlayer, player) { | ||
var self = this; | ||
if (prevPlayer.runner && player.runner) { | ||
self.emitter.on(prevPlayer.el.id, function () { | ||
player.runner.play(); | ||
}); | ||
prevPlayer.runner.onfinish = function () { | ||
self.emitter.trigger(prevPlayer.el.id); | ||
} | ||
}; | ||
} | ||
} | ||
|
||
}; | ||
|
||
/** | ||
* hasAnimations 判断是否有动画 | ||
* @param {nodeElement} element | ||
* @return Boolean | ||
*/ | ||
function hasAnimations(element) { | ||
return !!element.querySelectorAll(MIP_STORY_ANIMATE_IN_SELECROR).length; | ||
} | ||
|
||
/** | ||
* [createAnimationDef description] | ||
* @param {[type]} el [description] | ||
* @param {[type]} preset [description] | ||
* @return {[type]} [description] | ||
*/ | ||
function createAnimationDef (el) { | ||
function createAnimationDef(el) { | ||
var keyframes; | ||
var easing; | ||
|
||
|
@@ -157,24 +144,14 @@ define(function(require) { | |
return animationDef; | ||
} | ||
|
||
/** | ||
* [getPreset description] | ||
* @param {[type]} el [description] | ||
* @return {[type]} [description] | ||
*/ | ||
function getPreset(el) { | ||
var animationDef = {}; | ||
var name = (String(el.getAttribute(MIP_STORY_ANIMATE_IN_ATTR)).split(/\s+/))[0]; | ||
extend(animationDef, animatePreset[name]); | ||
return animationDef; | ||
} | ||
|
||
/** | ||
* [buildRuner description] | ||
* @param {[type]} animateDef [description] | ||
* @return {[type]} [description] | ||
*/ | ||
function buildRuner (el) { | ||
function buildRuner(el) { | ||
var runner; | ||
var animationDef = createAnimationDef(el); | ||
runner = new AnimationRunner(el, animationDef); | ||
|
@@ -185,4 +162,4 @@ define(function(require) { | |
AnimationManager: AnimationManager, | ||
hasAnimations: hasAnimations | ||
}; | ||
}); | ||
}); |
This file was deleted.
Oops, something went wrong.