mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-30 03:30:09 +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 ***/
|
||||
|
||||
|
||||
120
lib/jli.js
120
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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user