Transición que no funciona

[_cronos2]

Bueno amigos pues aquí ando, intentando hacer una función para transiciones. Resulta que el otro día me topé con este (excelente) artículo de @Panino y me di cuenta de que lo estaba haciendo mal, así que me puse a adaptar su código a lo que necesitaba... pero no funcionó Antes por lo menos la consola de errores me marcaba los errores, valga la redundancia, pero ahora ni eso, simplemente no funciona. Dejo el código a ver si me podéis ayudar XD

Código Javascript:

Object.prototype.clonar = function(){
 var clon = {};
 clon.prototype = this.prototype;
 for(var i in this){
  clon[i] = this[i];
 }
 return clon;
};
 
Object.prototype.calcar = function(obj){
 var clon = {};
 clon.prototype = this.prototype;
 for(var i in this){
  clon[i] = this[i];
 }
 for(var i in obj){
  clon[i] = obj[i];
 }
 return clon;
};
 
JSPlus.Fx = {};
 
JSPlus.Fx.Efectos = {} 
/* Aquí están todas las funciones, 
*  no las pongo porque es muy largo
*/
 
JSPlus.Fx.porDefecto = {
 'Opciones' : {
  'duracion' : 1000,
  'curva' : 'lineal',
  'intervalo' : 20,
  'unidad' : 'px'
 }
};
 
JSPlus.Fx.Transicion = function(obj, opc){
 var este = this;
 this.fin = 0;
 this.start = new Date().getTime();
 this.inicio = function(){
  setTimeout(function(){
   var step = este.paso();
   if(!step){
    obj.fn(1);
    este.fin = 1;
    window.globalIntervalo = 0;
    return;
   }
   obj.fn(step);
   este.inicio();
  }, opc.intervalo);
 };
 this.paso = function(){ 
  var now = new Date().getTime(); 
  return (now - this.start < opc.duracion) && opc.curva(now - this.start); 
 };
}
 
JSPlus.metodos({
 'FX' : function(objeto, opciones){
  var fx = JSPlus.Fx, este = P(this);
  for(var i in objeto){ // tipo [desde, hasta]
   var prop = objeto[i];
   if(!/(string|number)/i.test(typeof prop)) continue; // !(function, array, object, ...)
   objeto[i] = [este.getStyle(i), prop]; // [desde[ahora], hasta]
  };
  var obj = objeto.clonar(), opc = (opciones || {}).calcar(fx.porDefecto.Opciones); // setea sólo si no se declaran
  if(typeof opc.curva === 'array'){ // parche -> lineal(p), reboteG(n)(p)
   opc.curva = fx.Efectos[opc.curva[0]](opc.curva[1]);
  }else{
   opc.curva = fx.Efectos[opc.curva];
  }
  obj.fn = function(p){ // paso
   for(var i in obj){
    act = obj[i];
    if(!/array/i.test(typeof act)) continue; // sólo arrays
    var ini = parseFloat(act[0]), fin = parseFloat(act[1]);
    var difer = Math.abs(ini - fin), prop = i.toLowerCase();
    var dvlp = (ini + p * difer) + ((act[1].toString().match(/[A-z]+$/) || [])[0] || opc.unidad); // si hay unidad declarada se usa esa
    console.log(dvlp); // Esto no llega a mostrarse
    este.css('position', 'absolute').css(prop, dvlp);
    if(prop == 'opacity'){ este.opacity(ini + p * difer); } // si es opacity no lleva unidad
   }
  };
  JSPlus.escribir(obj); // console.log
  var trans = new JSPlus.Fx.Transicion(obj, opc);
  trans.inicio();
  trans = null;
  return P(this);
 }
});
 

Y lo llamo así:

Código Javascript:

P('#ejemplo').FX({
 'left' : 100,
 'width' : '500px',
 opacity : 0.5,
}, {
 'duracion' : 1000,
 'curva' :  ['reboteG', 3]
});
 

Saludos y gracias :D

[zerokilled]

que tal cronos!

veras, no logro hacer las pruebas. primero que el codigo esta incompleto. tuve que buscar parte del codigo en un tema anterior. pero lo adecuado es que indiques un enlace donde descargar el codigo mas reciente. asi no tienes que copiarlo todo aqui. en fin, al intentar hacer el ejemplo la consola me indica que el metodo escribir no esta definido. de ahi no puedo avanzar porque no tengo idea que hace ese metodo.

[zerokilled]

otros apuntes...

el metodo calcar no me hace sentido, especialmente cuando se le pasa como parametro las opciones a FX. ¿calcar no deberia solamente asignar las propiedades faltante? en la linea #13 y #16, fijate que el orden es incorrecto. es decir, primero estas copiando las propiedades del objeto original y luego copias las propiedades del objeto por defecto. en este segundo bucle, las propiedades por defecto sobreescriben al original. deberia ser al reves. el codigo tambien se puede mejorar de otra forma. en lugar de crear un objeto desde cero e ir copiando las propiedades, puedes revisar si algunas de las propiedades esta definida. en caso de no estar definida, la creas.

Código:

Object.prototype.trace = function(_default){
for(var prop in _default) if(!(prop in this)) this[prop] = _default[prop];
}

adicionalmente, los objetos no tiene la propiedad prototype, este le pertenece a las funciones. por lo que al calcar el objeto estas asignando una propiedad indefinida al objeto original.

por otro lado, en la linea #70 tienes un error de comparacion. los arrays devuelven el string 'object' cuando se utiliza el operador typeof. para determinar si una propiedad es un array debes comparar los constructores.

Código:

var array = [];
console.log(array.constructor === Array);

sin embargo, no comprendo el proposito de esa linea puesto que al evaluarse, se invoca una funcion que no existe en el objeto Efectos. de igual forma, el else de la condicion sobre escribe la propiedad curva del objeto opc con valor undefined. como resultado, en la linea #57 se intenta invocar curva como funcion cuando en realidad el valor es undefined. en fin, probablemente sea porque no has puesto las funciones que has omitido.

[_cronos2]

Iniciado por zerokilled

veras, no logro hacer las pruebas. primero que el codigo esta incompleto. tuve que buscar parte del codigo en un tema anterior

Lo siento, no se me ocurrió pensar que los demás no tenían el archivo completo XD

Iniciado por zerokilled

en la linea #13 y #16, fijate que el orden es incorrecto

Cierto

Iniciado por zerokilled

por otro lado, en la linea #70 tienes un error de comparacion. los arrays devuelven el string 'object' cuando se utiliza el operador typeof.

Pues es verdad, no me había dado cuenta O.O

Iniciado por zerokilled

sin embargo, no comprendo el proposito de esa linea puesto que al evaluarse, se invoca una funcion que no existe en el objeto Efectos

Sí existe pero para abreviar el código no puse las funciones que usaba.

Ahora en el ejemplo si haces click en el enlace me dice:

Iniciado por FF

Error: opc.curva is not a function

Iniciado por Chrome

Uncaught TypeError: Property 'curva' of object #<an Object> is not a function

¿Cómo puedo indicarle que es una referencia?
Saludos (:

[zerokilled]

lo que puedo ver es que aun tienes problema con el la comparacion del array. cuando le pasas un array en las opciones de FX, el else se evalua asignando una propiedad que no existe en el objeto Efect. recuerda que debes comparar por el constructor. note que no se produce ningun error si en lugar de un array el valor fuera un string.

[_cronos2]

Ahora me doy cuenta de que el problema también está en las funciones del efecto, me dan auténticas burradas de resultados XD Lo tengo así para ver los resultados:

Código Javascript:

var dvlp = Math.abs(ini + p * difer) + ((act[1].toString().match(/[A-z]+$/) || [])[0] || opc.unidad);
console.log(dvlp);
 

Y sale 30000px, o 80000px, dependiendo de la vez, pero no consigo ver dónde está el fallo :/ Además de eso, en Chrome me da un error en String.js, creo que es un problema del hosting que me inserta código, pero en FF no me pasa. ¿Cómo puedo solucionarlo?
Saludos (:
Edit: Ok, mea culpa, se me pasó un trozo de código de @Panino XD De momento funciona medianamente bien, si tengo más problemas ya los posteo.

[_cronos2]

Bueno muchas gracias a todos los que me han ayudado, a @masterpuppet por guiarme al principio, a @Panino por darme la base del código, y a @ZK por ayudarme en el desarrollo XD
Aquí hay un ejemplo básico y cutre del código final En FF tengo algunos problemas con que la transición va a saltos pero creo que es problema de que tengo el PC sobrecargado XD En IE ni lo probé, supongo que la parte del CSS no funcionará pero el efecto debería.
Saludos y gracias otra vez :D