From dbea22817ab129bbeb63db7e22eb9ca15c5b77ea Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 23 Feb 2013 04:14:49 +0400 Subject: [PATCH] added basic (brain-dead) manual animation engine... Signed-off-by: Alex A. Naanou --- ext-lib/iscroll-custom.js | 4 +- index-iscroll.html | 2 +- layout.js | 101 ++++++++++++++++++++++++++++++++------ 3 files changed, 87 insertions(+), 20 deletions(-) diff --git a/ext-lib/iscroll-custom.js b/ext-lib/iscroll-custom.js index 517b1b5..e1fb548 100755 --- a/ext-lib/iscroll-custom.js +++ b/ext-lib/iscroll-custom.js @@ -628,7 +628,6 @@ iScroll.prototype = { that.moved = true; if (that.options.useTransition) { - console.log('transition move...') that._transitionTime(step.time); that._pos(step.x, step.y); that.animating = false; @@ -637,12 +636,11 @@ iScroll.prototype = { return; } - console.log('animate move...') - animate = function () { var now = Date.now(), newX, newY; + // XXX check if the step is due and if yes do the next step... if (now >= startTime + step.time) { that._pos(step.x, step.y); that.animating = false; diff --git a/index-iscroll.html b/index-iscroll.html index a80500b..8cfd4e2 100755 --- a/index-iscroll.html +++ b/index-iscroll.html @@ -118,7 +118,7 @@ $(document).ready(function(){ //momentum: false, momentum: true, hScrollbar: false, - useTransition: true, + //useTransition: true, }) // XXX stub... diff --git a/layout.js b/layout.js index 0feb9f0..ad9ee08 100755 --- a/layout.js +++ b/layout.js @@ -103,6 +103,7 @@ var handleSwipeRight = makeSwipeHandler(nextPage) // NOTE: this will also handle swipeUp/swopeDown as we do not // explicitly bind them... // XXX restore all the changed values... +// XXX add an animate loop, to make the browser paint the page better... function handleScrollRelease(evt, data){ /* // this makes things snap... @@ -123,6 +124,7 @@ function handleScrollRelease(evt, data){ var to = (at + (t*speed*INNERTIA_SCALE)) var first = getMagazineOffset(pages.first(), null, 'center') var last = getMagazineOffset(pages.last(), null, 'center') + var easing // filter out really small speeds... if(Math.abs(speed) > 0.5){ @@ -134,23 +136,22 @@ function handleScrollRelease(evt, data){ var _t = t t = Math.abs(t * ((at-first)/(at-to))) to = first - //setTransitionEasing(mag, 'linear') - setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)') + //easing = 'linear' + easing = 'cubic-bezier(0.33,0.66,0.66,1)' } else if(to < last){ // trim the time proportionally... var _t = t t = Math.abs(t * ((at-last)/(at-to))) to = last - //setTransitionEasing(mag, 'linear') - setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)') + //easing = 'linear' + easing = 'cubic-bezier(0.33,0.66,0.66,1)' } else { - //setTransitionEasing(mag, 'ease-out') - setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)') + //easing = 'ease-out' + easing = 'cubic-bezier(0.33,0.66,0.66,1)' } - setTransitionDuration(mag, t) - setElementTransform(mag, to) + animateElementTo(mag, to, t, easing) // restore defaults... // XXX this is a bit dumb at this point... @@ -165,21 +166,89 @@ function handleScrollRelease(evt, data){ // do not let the user scroll out of view... } else { if(at > first){ - //setTransitionEasing(mag, 'ease-in') - setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)') - setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION/2) - setElementTransform(mag, first) + //animateElementTo(mag, first, DEFAULT_TRANSITION_DURATION, 'ease-in') + animateElementTo(mag, first, DEFAULT_TRANSITION_DURATION, 'cubic-bezier(0.33,0.66,0.66,1)') } else if(at < last){ - //setTransitionEasing(mag, 'ease-in') - setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)') - setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION/2) - setElementTransform(mag, last) + //animateElementTo(mag, last, DEFAULT_TRANSITION_DURATION, 'ease-in') + animateElementTo(mag, last, DEFAULT_TRANSITION_DURATION, 'cubic-bezier(0.33,0.66,0.66,1)') } } } +var USE_TRANSITIONS_FOR_ANIMATION = false + +var animationFrame = function(){ + return (window.requestAnimationFrame + || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame + || window.oRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback){ window.setTimeout(callback, 1000 / 60) }) +}() + + +function animateElementTo(elem, to, duration, easing){ + // use transition for animation... + if(USE_TRANSITIONS_FOR_ANIMATION){ + setTransitionEasing(elem, easing) + setTransitionDuration(elem, duration) + setElementTransform(elem, to) + + // manually animate... + } else { + if(typeof(to) == typeof(1)){ + to = { + left: to, + top: 0, + } + } + setTransitionDuration(elem, 0) + var now = Date.now() + var then = now + duration + var from = getElementShift(elem) + var dist = { + top: to.top - from.top, + left: to.left - from.left, + } + + function animate(t){ + /* + // XXX check if we are interrupted... + if(scroller.animating){ + return + } + */ + + // set position for current step... + if(t < then){ + var rem = then - t + var r = rem/duration + + // this is brain-dead linear spacing... + // XXX revise... + var pos = { + top: to.top - (dist.top * r), + left: to.left - (dist.left * r), + } + + setElementTransform(elem, pos) + + // finishup the animation... + } else if(t > then){ + setElementTransform(elem, to) + return + } + // sched next frame... + animationFrame(animate) + } + + animate() + } +} + + /********************************************************* helpers ***/