diff --git a/layout.js b/layout.js index 6d60061..e4f121a 100755 --- a/layout.js +++ b/layout.js @@ -198,127 +198,6 @@ function handleScrollRelease(evt, data){ } -// XXX this affects only the innertial part, not setCurrentPage... -var USE_TRANSITIONS_FOR_ANIMATION = false -//var MIN_STEP = 24 -var MIN_STEP = 0 - -// XXX make this a drop-in replacement for setElementTransform... -// XXX cleanup, still flacky... -function animateElementTo(elem, to, duration, easing, speed){ - // stop all ongoing animations on the current elem... - stopAnimation(elem) - // use transition for animation... - if(USE_TRANSITIONS_FOR_ANIMATION){ - setTransitionEasing(elem, easing) - duration == null && setTransitionDuration(elem, duration) - setElementTransform(elem, to) - - // manually animate... - } else { - if(typeof(to) == typeof(1)){ - to = { - left: to, - top: 0, - } - } - if(typeof(speed) == typeof(2)){ - speed = { - x: speed, - y: 0, - } - } - if(duration == null){ - duration = getElementTransitionDuration(elem) - } - - setTransitionDuration(elem, 0) - - var start = Date.now() - var then = start + duration - var from = getElementShift(elem) - var cur = { - top: from.top, - left: from.left - } - var dist = { - top: to.top - from.top, - left: to.left - from.left, - } - elem.animating = true - - function animate(){ - var t = Date.now() - // end of the animation... - if(t >= then){ - setElementTransform(elem, to) - return - } - if(!elem.animating){ - // XXX jittery... - setElementTransform(elem, cur) - return - } - - // do an intermediate step... - // XXX do propper easing... - // XXX sometimes results in jumping around... - // ...result of jumping over the to position... - if(speed != null){ - - // XXX the folowing two blocks are the same... - // XXX looks a bit too complex, revise... - if(Math.abs(dist.top) >= 1){ - dy = ((t - start) * speed.y) - if(Math.abs(dist.top) > Math.abs(dy)){ - dist.top -= dy - cur.top = Math.round(cur.top + dy) - // normalize... - cur.top = Math.abs(dist.top) <= 1 ? to.top : cur.top - // calc speed for next step... - speed.y = dist.top / (duration - (t - start)) - } else { - cur.top = to.top - } - } - - // XXX looks a bit too complex, revise... - if(Math.abs(dist.left) >= 1){ - dx = ((t - start) * speed.x) - if(Math.abs(dist.left) > Math.abs(dx)){ - dist.left -= dx - cur.left = Math.round(cur.left + dx) - // normalize... - cur.left = Math.abs(dist.left) <= 1 ? to.left : cur.left - // calc speed for next step... - speed.x = dist.left / (duration - (t - start)) - } else { - cur.left = to.left - } - } - - // XXX this is a staright forward linear function... - } else { - var r = (t - start) / duration - cur.top = Math.round(from.top + (dist.top * r)) - cur.left = Math.round(from.left + (dist.left * r)) - } - setElementTransform(elem, cur) - // sched next frame... - elem.next_frame = getAnimationFrame(animate) - } - - animate() - } -} - -function stopAnimation(elem){ - if(elem.next_frame){ - cancelAnimationFrame(elem.next_frame) - } -} - - /********************************************************* helpers ***/ diff --git a/lib/jli.js b/lib/jli.js index 7c41522..e4fc012 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -311,6 +311,126 @@ function setElementTransform(elem, offset, scale, duration){ return elem } + +// XXX this affects only the innertial part, not setCurrentPage... +var USE_TRANSITIONS_FOR_ANIMATION = false + +// XXX make this a drop-in replacement for setElementTransform... +// XXX cleanup, still flacky... +function animateElementTo(elem, to, duration, easing, speed){ + // stop all ongoing animations on the current elem... + stopAnimation(elem) + // use transition for animation... + if(USE_TRANSITIONS_FOR_ANIMATION){ + setTransitionEasing(elem, easing) + duration == null && setTransitionDuration(elem, duration) + setElementTransform(elem, to) + + // manually animate... + } else { + if(typeof(to) == typeof(1)){ + to = { + left: to, + top: 0, + } + } + if(typeof(speed) == typeof(2)){ + speed = { + x: speed, + y: 0, + } + } + if(duration == null){ + duration = getElementTransitionDuration(elem) + } + + setTransitionDuration(elem, 0) + + var start = Date.now() + var then = start + duration + var from = getElementShift(elem) + var cur = { + top: from.top, + left: from.left + } + var dist = { + top: to.top - from.top, + left: to.left - from.left, + } + elem.animating = true + + function animate(){ + var t = Date.now() + // end of the animation... + if(t >= then){ + setElementTransform(elem, to) + return + } + if(!elem.animating){ + // XXX jittery... + setElementTransform(elem, cur) + return + } + + // do an intermediate step... + // XXX do propper easing... + // XXX sometimes results in jumping around... + // ...result of jumping over the to position... + if(speed != null){ + + // XXX the folowing two blocks are the same... + // XXX looks a bit too complex, revise... + if(Math.abs(dist.top) >= 1){ + dy = ((t - start) * speed.y) + if(Math.abs(dist.top) > Math.abs(dy)){ + dist.top -= dy + cur.top = Math.round(cur.top + dy) + // normalize... + cur.top = Math.abs(dist.top) <= 1 ? to.top : cur.top + // calc speed for next step... + speed.y = dist.top / (duration - (t - start)) + } else { + cur.top = to.top + } + } + + // XXX looks a bit too complex, revise... + if(Math.abs(dist.left) >= 1){ + dx = ((t - start) * speed.x) + if(Math.abs(dist.left) > Math.abs(dx)){ + dist.left -= dx + cur.left = Math.round(cur.left + dx) + // normalize... + cur.left = Math.abs(dist.left) <= 1 ? to.left : cur.left + // calc speed for next step... + speed.x = dist.left / (duration - (t - start)) + } else { + cur.left = to.left + } + } + + // XXX this is a staright forward linear function... + } else { + var r = (t - start) / duration + cur.top = Math.round(from.top + (dist.top * r)) + cur.left = Math.round(from.left + (dist.left * r)) + } + setElementTransform(elem, cur) + // sched next frame... + elem.next_frame = getAnimationFrame(animate) + } + + animate() + } +} + +function stopAnimation(elem){ + if(elem.next_frame){ + cancelAnimationFrame(elem.next_frame) + } +} + + // XXX account for other transitions... function setElementScale(elem, scale){ return setElementTransform(elem, null, scale)