mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 11:10:08 +00:00
moved animateElementTo to jli...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d2633e48b2
commit
7fea84da45
121
layout.js
121
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 ***/
|
/********************************************************* helpers ***/
|
||||||
|
|
||||||
|
|||||||
120
lib/jli.js
120
lib/jli.js
@ -311,6 +311,126 @@ function setElementTransform(elem, offset, scale, duration){
|
|||||||
return elem
|
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...
|
// XXX account for other transitions...
|
||||||
function setElementScale(elem, scale){
|
function setElementScale(elem, scale){
|
||||||
return setElementTransform(elem, null, scale)
|
return setElementTransform(elem, null, scale)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user