mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 03:50:16 +00:00
added animationFrame-based animation...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
c9c9a93531
commit
9f99e3956f
108
layout.js
108
layout.js
@ -156,7 +156,7 @@ function handleScrollRelease(evt, data){
|
||||
easing = 'cubic-bezier(0.33,0.66,0.66,1)'
|
||||
}
|
||||
|
||||
animateElementTo(mag, to, t, easing)
|
||||
animateElementTo(mag, to, t, easing, speed)
|
||||
|
||||
// restore defaults...
|
||||
// XXX this is a bit dumb at this point...
|
||||
@ -183,22 +183,22 @@ function handleScrollRelease(evt, data){
|
||||
|
||||
|
||||
// XXX this affects only the innertial part, not setCurrentPage...
|
||||
var USE_TRANSITIONS_FOR_ANIMATION = true
|
||||
var USE_TRANSITIONS_FOR_ANIMATION = false
|
||||
//var MIN_STEP = 24
|
||||
var MIN_STEP = 1
|
||||
var MIN_STEP = 0
|
||||
|
||||
var animationFrame = function(){
|
||||
return (window.requestAnimationFrame
|
||||
var animationFrame = (window.requestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback){ window.setTimeout(callback, 1000 / 60) })
|
||||
}()
|
||||
|| function(callback){
|
||||
window.setTimeout(callback, 1000 / 60)
|
||||
})
|
||||
|
||||
|
||||
// XXX make this interruptable...
|
||||
function animateElementTo(elem, to, duration, easing){
|
||||
function animateElementTo(elem, to, duration, easing, speed){
|
||||
// use transition for animation...
|
||||
if(USE_TRANSITIONS_FOR_ANIMATION){
|
||||
setTransitionEasing(elem, easing)
|
||||
@ -213,50 +213,86 @@ function animateElementTo(elem, to, duration, easing){
|
||||
top: 0,
|
||||
}
|
||||
}
|
||||
if(typeof(speed) == typeof(2)){
|
||||
speed = {
|
||||
x: speed,
|
||||
y: 0,
|
||||
}
|
||||
}
|
||||
|
||||
setTransitionDuration(elem, 0)
|
||||
var now = Date.now()
|
||||
var then = now + duration
|
||||
|
||||
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,
|
||||
}
|
||||
var prev_t = now
|
||||
|
||||
function animate(t){
|
||||
// XXX check if we are interrupted...
|
||||
//if(scroller.animating){
|
||||
// return
|
||||
//}
|
||||
|
||||
// try and not render things too often...
|
||||
if(t - prev_t >= MIN_STEP){
|
||||
// set position for current step...
|
||||
if(t < then){
|
||||
prev_t = t
|
||||
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){
|
||||
function animate(){
|
||||
var t = Date.now()
|
||||
// end of the animation...
|
||||
if(t >= then){
|
||||
setElementTransform(elem, to)
|
||||
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.x = 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...
|
||||
animationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
console.log(from.left, to.left, getElementShift(elem).left)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -198,9 +198,10 @@ function unanimated(obj, func, time){
|
||||
var USE_3D_TRANSFORM = true
|
||||
|
||||
// NOTE: at this point this works only on the X axis...
|
||||
function setElementTransform(elem, offset, scale){
|
||||
function setElementTransform(elem, offset, scale, duration){
|
||||
elem = $(elem)
|
||||
var t3d = USE_3D_TRANSFORM ? 'translateZ(0px)' : ''
|
||||
|
||||
if(offset == null){
|
||||
offset = getElementShift(elem)
|
||||
// number -- only the x coord...
|
||||
@ -232,7 +233,7 @@ function setElementTransform(elem, offset, scale){
|
||||
left: 0,
|
||||
// XXX is this correct???
|
||||
top: ''
|
||||
})
|
||||
}, duration)
|
||||
} else {
|
||||
var transform = 'translate(0px, 0px) scale('+ scale +') ' + t3d
|
||||
elem.css({
|
||||
@ -247,7 +248,7 @@ function setElementTransform(elem, offset, scale){
|
||||
'-moz-transform' : transform,
|
||||
'-o-transform' : transform,
|
||||
'transform' : transform,
|
||||
})
|
||||
}, duration)
|
||||
}
|
||||
return elem
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user