Skip to content

Commit

Permalink
tweenable: add setSpeed method
Browse files Browse the repository at this point in the history
  • Loading branch information
@legomushroom
legomushroom committed Apr 13, 2016
1 parent 813796a commit bf70517
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 23 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,7 +1,7 @@
{
"name": "mojs",
"description": "motion graphics toolbelt for the web",
"version": "0.224.0",
"version": "0.225.0",
"license": "MIT",
"homepage": "https://github.com/legomushroom/mojs",
"authors": [
Expand Down
82 changes: 81 additions & 1 deletion build/mo.js
View file
Expand Up @@ -3710,6 +3710,7 @@
/*
play method for the timeline.
@public
@param {Number} Time shift.
@returns this.
*/
value: function play() {
Expand All @@ -3719,6 +3720,7 @@
/*
playBackward method for the timeline.
@public
@param {Number} Time shift.
@returns this.
*/

Expand All @@ -3743,6 +3745,9 @@
/*
stop method for the timeline.
@public
@param {Number} [0...1] Progress to set on stop.
*Default* is `0` if `play`
and `1` if `playBAckward`.
@returns this.
*/

Expand Down Expand Up @@ -3779,6 +3784,7 @@
/*
setProgress method for the timeline.
@public
@param {Number} [0...1] Progress value.
@returns this.
*/

Expand All @@ -3788,6 +3794,18 @@
this.timeline.setProgress.apply(this.timeline, arguments);
return this;
}
/*
setSpeed method for the timeline.
@param {Number} Speed value.
@returns this.
*/

}, {
key: 'setSpeed',
value: function setSpeed(speed) {
this.timeline.setSpeed.apply(this.timeline, arguments);
return this;
}

// ^ PUBLIC METHOD(S) ^
// v PRIVATE METHOD(S) v
Expand Down Expand Up @@ -8216,7 +8234,7 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

window.mojs = {
revision: '0.224.0', isDebug: true, helpers: _h2.default,
revision: '0.225.0', isDebug: true, helpers: _h2.default,
Transit: _transit2.default, Swirl: _swirl2.default, Burst: _burst2.default, stagger: _stagger2.default, Spriter: _spriter2.default, MotionPath: _motionPath2.default,
Tween: _tween2.default, Timeline: _timeline2.default, Tweenable: _tweenable2.default, Thenable: _thenable2.default, Tunable: _tunable2.default, Module: _module2.default,
tweener: _tweener2.default, easing: _easing2.default, shapesMap: _shapesMap2.default
Expand All @@ -8235,6 +8253,68 @@
mojs.h = mojs.helpers;
mojs.delta = mojs.h.delta;

// let el = document.querySelector('#js-el'),
// speedEl = document.querySelector('#js-speed-slider'),
// tw = new mojs.Tween({
// duration: 20000,
// // delay: 1000,
// repeat: 3,
// easing: 'linear.none',
// onStart () {
// console.log('ON START');
// },
// onRepeatStart () {
// console.log('ON REPEAT START');
// },
// onComplete () {
// console.log('ON COMPLETE');
// },
// onRepeatComplete () {
// console.log('ON REPEAT COMPLETE');
// },
// onFirstUpdate () {
// console.log('ON FIRST UPDATE');
// },
// onUpdate (p) {
// console.log('ON UPDATE');
// el.style.transform = `translateX( ${1000*p}px )`;
// // console.log(p)
// },
// // onStart () { console.time('duration'); },
// // onComplete () { console.timeEnd('duration'); },
// })
// // .play();

// let playBtn = document.querySelector('#js-play'),
// playBackwardBtn = document.querySelector('#js-play-backward'),
// pauseBtn = document.querySelector('#js-pause'),
// stopBtn = document.querySelector('#js-stop');

// speedEl.addEventListener('input', function () {
// tw.setSpeed( this.value/1000 );
// });

// playBtn.addEventListener('click', function () { tw.play(); });
// playBackwardBtn.addEventListener('click', function () { tw.playBackward(); });
// pauseBtn.addEventListener('click', function () { tw.pause(); });
// stopBtn.addEventListener('click', function () { tw.stop(); });

// let x1Btn = document.querySelector('#js-x1'),
// x25Btn = document.querySelector('#js-x25'),
// x50Btn = document.querySelector('#js-x50'),
// x100Btn = document.querySelector('#js-x100'),
// x250Btn = document.querySelector('#js-x250'),
// x500Btn = document.querySelector('#js-x500'),
// x1000Btn = document.querySelector('#js-x1000');

// x1Btn.addEventListener('click', () => { tw.setSpeed(.1); });
// x25Btn.addEventListener('click', () => { tw.setSpeed(.25); });
// x50Btn.addEventListener('click', () => { tw.setSpeed(.5); });
// x100Btn.addEventListener('click', () => { tw.setSpeed(1); });
// x250Btn.addEventListener('click', () => { tw.setSpeed(2.5); });
// x500Btn.addEventListener('click', () => { tw.setSpeed(5); });
// x1000Btn.addEventListener('click', () => { tw.setSpeed(10); });

// ### istanbul ignore next ###
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
Expand Down
9 changes: 4 additions & 5 deletions build/mo.min.js
View file

Large diffs are not rendered by default.

66 changes: 65 additions & 1 deletion js/mojs.babel.js
View file
Expand Up @@ -17,7 +17,7 @@ import tweener from './tween/tweener';
import easing from './easing/easing';

window.mojs = {
revision: '0.224.0', isDebug: true, helpers: h,
revision: '0.225.0', isDebug: true, helpers: h,
Transit, Swirl, Burst, stagger, Spriter, MotionPath,
Tween, Timeline, Tweenable, Thenable, Tunable, Module,
tweener, easing, shapesMap
Expand All @@ -36,6 +36,70 @@ window.mojs = {
mojs.h = mojs.helpers;
mojs.delta = mojs.h.delta;

// let el = document.querySelector('#js-el'),
// speedEl = document.querySelector('#js-speed-slider'),
// tw = new mojs.Tween({
// duration: 20000,
// // delay: 1000,
// repeat: 3,
// easing: 'linear.none',
// onStart () {
// console.log('ON START');
// },
// onRepeatStart () {
// console.log('ON REPEAT START');
// },
// onComplete () {
// console.log('ON COMPLETE');
// },
// onRepeatComplete () {
// console.log('ON REPEAT COMPLETE');
// },
// onFirstUpdate () {
// console.log('ON FIRST UPDATE');
// },
// onUpdate (p) {
// console.log('ON UPDATE');
// el.style.transform = `translateX( ${1000*p}px )`;
// // console.log(p)
// },
// // onStart () { console.time('duration'); },
// // onComplete () { console.timeEnd('duration'); },
// })
// // .play();


// let playBtn = document.querySelector('#js-play'),
// playBackwardBtn = document.querySelector('#js-play-backward'),
// pauseBtn = document.querySelector('#js-pause'),
// stopBtn = document.querySelector('#js-stop');

// speedEl.addEventListener('input', function () {
// tw.setSpeed( this.value/1000 );
// });

// playBtn.addEventListener('click', function () { tw.play(); });
// playBackwardBtn.addEventListener('click', function () { tw.playBackward(); });
// pauseBtn.addEventListener('click', function () { tw.pause(); });
// stopBtn.addEventListener('click', function () { tw.stop(); });


// let x1Btn = document.querySelector('#js-x1'),
// x25Btn = document.querySelector('#js-x25'),
// x50Btn = document.querySelector('#js-x50'),
// x100Btn = document.querySelector('#js-x100'),
// x250Btn = document.querySelector('#js-x250'),
// x500Btn = document.querySelector('#js-x500'),
// x1000Btn = document.querySelector('#js-x1000');

// x1Btn.addEventListener('click', () => { tw.setSpeed(.1); });
// x25Btn.addEventListener('click', () => { tw.setSpeed(.25); });
// x50Btn.addEventListener('click', () => { tw.setSpeed(.5); });
// x100Btn.addEventListener('click', () => { tw.setSpeed(1); });
// x250Btn.addEventListener('click', () => { tw.setSpeed(2.5); });
// x500Btn.addEventListener('click', () => { tw.setSpeed(5); });
// x1000Btn.addEventListener('click', () => { tw.setSpeed(10); });

// ### istanbul ignore next ###
if ( (typeof define === "function") && define.amd ) {
define("mojs", [], function () { return mojs; });
Expand Down
15 changes: 15 additions & 0 deletions js/tween/tweenable.babel.js
View file
Expand Up @@ -13,6 +13,7 @@ class Tweenable extends Module {
/*
play method for the timeline.
@public
@param {Number} Time shift.
@returns this.
*/
play () {
Expand All @@ -22,6 +23,7 @@ class Tweenable extends Module {
/*
playBackward method for the timeline.
@public
@param {Number} Time shift.
@returns this.
*/
playBackward () {
Expand All @@ -40,6 +42,9 @@ class Tweenable extends Module {
/*
stop method for the timeline.
@public
@param {Number} [0...1] Progress to set on stop.
*Default* is `0` if `play`
and `1` if `playBAckward`.
@returns this.
*/
stop () {
Expand Down Expand Up @@ -67,12 +72,22 @@ class Tweenable extends Module {
/*
setProgress method for the timeline.
@public
@param {Number} [0...1] Progress value.
@returns this.
*/
setProgress () {
this.timeline.setProgress.apply( this.timeline, arguments );
return this;
}
/*
setSpeed method for the timeline.
@param {Number} Speed value.
@returns this.
*/
setSpeed ( speed ) {
this.timeline.setSpeed.apply( this.timeline, arguments );
return this;
}

// ^ PUBLIC METHOD(S) ^
// v PRIVATE METHOD(S) v
Expand Down
28 changes: 14 additions & 14 deletions karma.conf.js
View file
Expand Up @@ -93,23 +93,23 @@ module.exports = function(config) {

'build/h.js',
'spec/h.js',
// 'build/transit.js',
// 'spec/transit.js',
// 'build/swirl.js',
// 'spec/swirl.js',
// 'build/burst.js',
// 'spec/burst.js',
'build/transit.js',
'spec/transit.js',
'build/swirl.js',
'spec/swirl.js',
'build/burst.js',
'spec/burst.js',

// 'build/module.js',
// 'spec/module.js',
'build/module.js',
'spec/module.js',
// 'build/tween/tweenable.js',
// 'spec/tween/tweenable.js',
// 'build/tunable.js',
// 'spec/tunable.js',
// 'build/thenable.js',
// 'spec/thenable.js',
// 'build/runable.js',
// 'spec/runable.js',
'build/tunable.js',
'spec/tunable.js',
'build/thenable.js',
'spec/thenable.js',
'build/runable.js',
'spec/runable.js',

'build/spriter.js',
'spec/spriter.js',
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,7 +1,7 @@
{
"name": "mo-js",
"description": "motion graphics toolbelt for the web",
"version": "0.224.0",
"version": "0.225.0",
"license": "MIT",
"private": false,
"scripts": {
Expand Down
12 changes: 12 additions & 0 deletions spec/tween/tweenable.coffee
View file
Expand Up @@ -137,6 +137,18 @@ describe 'tweenable ->', ->
result = tw.setProgress( .5 )
expect(result).toBe tw

describe 'setSpeed ->', ->
it 'should call timeline\'s setSpeed method', ->
tw = new Tweenable
spyOn tw.timeline, 'setSpeed'
progress = .5
tw.setSpeed( progress )
expect(tw.timeline.setSpeed).toHaveBeenCalledWith progress
it 'should return this', ->
tw = new Tweenable
result = tw.setSpeed( .5 )
expect(result).toBe tw

describe 'isTimelineLess option ->', ->
it 'should not create timeline', ->
tw = new Tweenable isTimelineLess: true
Expand Down
16 changes: 16 additions & 0 deletions spec/tween/tweenable.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit bf70517

Please sign in to comment.