Skip to content

Commit 078d128

Browse files
legomushroomlegomushroom
committed
Merge pull request mojs#5 from legomushroom/dev
add Spriter module
2 parents 729855b + 17811a9 commit 078d128

20 files changed

+1988
-97
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mojs",
33
"description": "motion graphics toolbelt for the web",
4-
"version": "0.117.5",
4+
"version": "0.119.0",
55
"license": "MIT",
66
"homepage": "https://github.com/legomushroom/mojs",
77
"authors": [

‎build/mo.js

Lines changed: 138 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
:: mo · js :: motion graphics toolbelt for the web
33
Oleg Solomka @LegoMushroom 2015 MIT
4-
0.117.5
4+
0.119.0
55
*/
66

77
(function(f){
@@ -525,7 +525,7 @@ Burst = (function(superClass) {
525525

526526
module.exports = Burst;
527527

528-
},{"./h":4,"./shapes/bitsMap":11,"./swirl":20,"./transit":21,"./tween/tween":23}],3:[function(require,module,exports){
528+
},{"./h":4,"./shapes/bitsMap":11,"./swirl":21,"./transit":22,"./tween/tween":24}],3:[function(require,module,exports){
529529
var Easing, PathEasing, bezier, easing;
530530

531531
bezier = require('./bezier-easing');
@@ -1316,7 +1316,7 @@ module.exports = h;
13161316
var mojs;
13171317

13181318
mojs = {
1319-
revision: '0.117.5',
1319+
revision: '0.119.0',
13201320
isDebug: true,
13211321
helpers: require('./h'),
13221322
Bit: require('./shapes/bit'),
@@ -1332,6 +1332,7 @@ mojs = {
13321332
Transit: require('./transit'),
13331333
Swirl: require('./swirl'),
13341334
Stagger: require('./stagger'),
1335+
Spriter: require('./spriter'),
13351336
MotionPath: require('./motion-path'),
13361337
Timeline: require('./tween/timeline'),
13371338
Tween: require('./tween/tween'),
@@ -1355,7 +1356,7 @@ if ((typeof module === "object") && (typeof module.exports === "object")) {
13551356

13561357
return typeof window !== "undefined" && window !== null ? window.mojs = mojs : void 0;
13571358

1358-
},{"./burst":2,"./easing":3,"./h":4,"./motion-path":6,"./shapes/bit":10,"./shapes/bitsMap":11,"./shapes/circle":12,"./shapes/cross":13,"./shapes/equal":14,"./shapes/line":15,"./shapes/polygon":16,"./shapes/rect":17,"./shapes/zigzag":18,"./stagger":19,"./swirl":20,"./transit":21,"./tween/timeline":22,"./tween/tween":23,"./tween/tweener":24}],6:[function(require,module,exports){
1359+
},{"./burst":2,"./easing":3,"./h":4,"./motion-path":6,"./shapes/bit":10,"./shapes/bitsMap":11,"./shapes/circle":12,"./shapes/cross":13,"./shapes/equal":14,"./shapes/line":15,"./shapes/polygon":16,"./shapes/rect":17,"./shapes/zigzag":18,"./spriter":19,"./stagger":20,"./swirl":21,"./transit":22,"./tween/timeline":23,"./tween/tween":24,"./tween/tweener":25}],6:[function(require,module,exports){
13591360
var MotionPath, Timeline, Tween, easing, h, resize,
13601361
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
13611362

@@ -1855,7 +1856,7 @@ MotionPath = (function() {
18551856

18561857
module.exports = MotionPath;
18571858

1858-
},{"./easing":3,"./h":4,"./tween/timeline":22,"./tween/tween":23,"./vendor/resize":25}],7:[function(require,module,exports){
1859+
},{"./easing":3,"./h":4,"./tween/timeline":23,"./tween/tween":24,"./vendor/resize":26}],7:[function(require,module,exports){
18591860
var PathEasing, h;
18601861

18611862
h = require('./h');
@@ -2557,6 +2558,132 @@ Zigzag = (function(superClass) {
25572558
module.exports = Zigzag;
25582559

25592560
},{"./bit":10}],19:[function(require,module,exports){
2561+
var Spriter, Timeline, Tween, h;
2562+
2563+
h = require('./h');
2564+
2565+
Timeline = require('./tween/timeline');
2566+
2567+
Tween = require('./tween/tween');
2568+
2569+
Spriter = (function() {
2570+
Spriter.prototype._defaults = {
2571+
duration: 500,
2572+
delay: 0,
2573+
easing: 'linear.none',
2574+
repeat: 0,
2575+
yoyo: false,
2576+
isRunLess: false,
2577+
isShowEnd: false,
2578+
onStart: null,
2579+
onUpdate: null,
2580+
onComplete: null
2581+
};
2582+
2583+
function Spriter(o1) {
2584+
this.o = o1 != null ? o1 : {};
2585+
if (this.o.el == null) {
2586+
return h.error('No "el" option specified, aborting');
2587+
}
2588+
this._vars();
2589+
this._extendDefaults();
2590+
this._parseFrames();
2591+
if (this._frames.length <= 2) {
2592+
h.warn("Spriter: only " + this._frames.length + " frames found");
2593+
}
2594+
if (this._frames.length < 1) {
2595+
h.error("Spriter: there is no frames to animate, aborting");
2596+
}
2597+
this._createTween();
2598+
this;
2599+
}
2600+
2601+
Spriter.prototype._vars = function() {
2602+
this._props = h.cloneObj(this.o);
2603+
this.el = this.o.el;
2604+
return this._frames = [];
2605+
};
2606+
2607+
Spriter.prototype.run = function(o) {
2608+
return this._tween.start();
2609+
};
2610+
2611+
Spriter.prototype._extendDefaults = function() {
2612+
return h.extend(this._props, this._defaults);
2613+
};
2614+
2615+
Spriter.prototype._parseFrames = function() {
2616+
var frame, i, j, len, ref;
2617+
this._frames = Array.prototype.slice.call(this.el.children, 0);
2618+
ref = this._frames;
2619+
for (i = j = 0, len = ref.length; j < len; i = ++j) {
2620+
frame = ref[i];
2621+
frame.style.opacity = 0;
2622+
}
2623+
return this._frameStep = 1 / this._frames.length;
2624+
};
2625+
2626+
Spriter.prototype._createTween = function() {
2627+
this._timeline = new Timeline({
2628+
duration: this._props.duration,
2629+
delay: this._props.delay,
2630+
yoyo: this._props.yoyo,
2631+
repeat: this._props.repeat,
2632+
easing: this._props.easing,
2633+
onStart: (function(_this) {
2634+
return function() {
2635+
var base;
2636+
return typeof (base = _this._props).onStart === "function" ? base.onStart() : void 0;
2637+
};
2638+
})(this),
2639+
onComplete: (function(_this) {
2640+
return function() {
2641+
var base;
2642+
return typeof (base = _this._props).onComplete === "function" ? base.onComplete() : void 0;
2643+
};
2644+
})(this),
2645+
onUpdate: (function(_this) {
2646+
return function(p) {
2647+
return _this._setProgress(p);
2648+
};
2649+
})(this)
2650+
});
2651+
this._tween = new Tween;
2652+
this._tween.add(this._timeline);
2653+
return !this._props.isRunLess && this._startTween();
2654+
};
2655+
2656+
Spriter.prototype._startTween = function() {
2657+
return setTimeout(((function(_this) {
2658+
return function() {
2659+
return _this._tween.start();
2660+
};
2661+
})(this)), 1);
2662+
};
2663+
2664+
Spriter.prototype._setProgress = function(p) {
2665+
var base, currentNum, proc, ref, ref1;
2666+
proc = Math.floor(p / this._frameStep);
2667+
if (this._prevFrame !== this._frames[proc]) {
2668+
if ((ref = this._prevFrame) != null) {
2669+
ref.style.opacity = 0;
2670+
}
2671+
currentNum = p === 1 && this._props.isShowEnd ? proc - 1 : proc;
2672+
if ((ref1 = this._frames[currentNum]) != null) {
2673+
ref1.style.opacity = 1;
2674+
}
2675+
this._prevFrame = this._frames[proc];
2676+
}
2677+
return typeof (base = this._props).onUpdate === "function" ? base.onUpdate(p) : void 0;
2678+
};
2679+
2680+
return Spriter;
2681+
2682+
})();
2683+
2684+
module.exports = Spriter;
2685+
2686+
},{"./h":4,"./tween/timeline":23,"./tween/tween":24}],20:[function(require,module,exports){
25602687

25612688
var Stagger, Timeline, Transit, Tween, h,
25622689
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -2694,7 +2821,7 @@ Stagger = (function(superClass) {
26942821

26952822
module.exports = Stagger;
26962823

2697-
},{"./h":4,"./transit":21,"./tween/timeline":22,"./tween/tween":23}],20:[function(require,module,exports){
2824+
},{"./h":4,"./transit":22,"./tween/timeline":23,"./tween/tween":24}],21:[function(require,module,exports){
26982825

26992826
var Swirl, Transit,
27002827
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -2807,7 +2934,7 @@ Swirl = (function(superClass) {
28072934

28082935
module.exports = Swirl;
28092936

2810-
},{"./transit":21}],21:[function(require,module,exports){
2937+
},{"./transit":22}],22:[function(require,module,exports){
28112938

28122939
var Timeline, Transit, Tween, bitsMap, h,
28132940
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -3476,7 +3603,7 @@ Transit = (function(superClass) {
34763603

34773604
module.exports = Transit;
34783605

3479-
},{"./h":4,"./shapes/bitsMap":11,"./tween/timeline":22,"./tween/tween":23}],22:[function(require,module,exports){
3606+
},{"./h":4,"./shapes/bitsMap":11,"./tween/timeline":23,"./tween/tween":24}],23:[function(require,module,exports){
34803607
var Timeline, easingModule, h;
34813608

34823609
easingModule = require('../easing');
@@ -3675,7 +3802,7 @@ Timeline = (function() {
36753802

36763803
module.exports = Timeline;
36773804

3678-
},{"../easing":3,"../h":4}],23:[function(require,module,exports){
3805+
},{"../easing":3,"../h":4}],24:[function(require,module,exports){
36793806
var Tween, h, t;
36803807

36813808
h = require('../h');
@@ -3870,7 +3997,7 @@ Tween = (function() {
38703997

38713998
module.exports = Tween;
38723999

3873-
},{"../h":4,"./tweener":24}],24:[function(require,module,exports){
4000+
},{"../h":4,"./tweener":25}],25:[function(require,module,exports){
38744001
var Tweener, h, i, t;
38754002

38764003
require('../polyfills/raf');
@@ -3957,7 +4084,7 @@ t = new Tweener;
39574084

39584085
module.exports = t;
39594086

3960-
},{"../h":4,"../polyfills/performance":8,"../polyfills/raf":9}],25:[function(require,module,exports){
4087+
},{"../h":4,"../polyfills/performance":8,"../polyfills/raf":9}],26:[function(require,module,exports){
39614088

39624089
/*!
39634090
LegoMushroom @legomushroom http://legomushroom.com

‎build/mo.min.js

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,25 @@ html,
22
body {
33
height: 1000px;
44
}
5-
.el {
6-
width: 50px;
7-
height: 50px;
8-
border-radius: 50%;
9-
background: #ff1493;
5+
.sprite {
106
position: absolute;
11-
top: 20%;
12-
left: 10%;
7+
left: 100px;
8+
top: 100px;
9+
}
10+
.sprite__frame {
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
-webkit-transform: translateZ(0);
15+
-ms-transform: translateZ(0);
16+
transform: translateZ(0);
17+
display: block;
18+
width: 100px;
19+
height: 100px;
20+
}
21+
.sprite__ellipse {
22+
stroke: #ff1493;
23+
fill: none;
1324
}
1425
.svg {
1526
position: absolute;

‎css/main.styl

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,40 @@ use('assets/nesting-tree-traversal.js')
1212
html, body
1313
height 1000px
1414

15-
.el
16-
width 50px
17-
height 50px
18-
border-radius 50%
19-
background deeppink
20-
position absolute
21-
top 20%
22-
left 10%
23-
// margin-left 500px
24-
// nw 50%
15+
16+
// .el
17+
// width 800px
18+
// height 800px
19+
// // background #111
20+
// background magenta
21+
// transform translateZ(0)
22+
23+
.sprite
24+
position absolute
25+
left 100px
26+
top 100px
27+
&__frame
28+
position absolute
29+
top 0
30+
left 0
31+
transform translateZ(0)
32+
display block
33+
width 100px
34+
height 100px
35+
&__ellipse
36+
stroke deeppink
37+
fill none
38+
39+
// .el
40+
// width 50px
41+
// height 50px
42+
// border-radius 50%
43+
// background deeppink
44+
// position absolute
45+
// top 20%
46+
// left 10%
47+
// margin-left 500px
48+
// nw 50%
2549

2650
// svg
2751
// hl deeppink

0 commit comments

Comments
 (0)