Last active
February 14, 2017 15:58
-
-
Save balusio/26e2e5089cfddbbcfa51a36f674bd2b8 to your computer and use it in GitHub Desktop.
problema instanciando propiedades de SNAP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Creo la data de cada pasto a utilizar | |
var dataPasto = [{ | |
idElement :"#first_pasto", | |
start : "M1097.7,754.6h5.6c0-8.6,3.5-16.4,9.1-22C1105.1,737.5,1099.6,745.2,1097.7,754.6z", | |
end : "M1097.7,754.6h5.6c0-8.6-0.5-12.8-8.7-23.8C1097,742.7,1099.6,745.2,1097.7,754.6z", | |
time: 3 | |
} | |
//pensé crear un objeto que utilizara la data para ahorrar tiempo y funciones : | |
var createPathAnimation = function(arguments){ | |
this.path = Snap.select(arguments.idElement); | |
this.dStart = arguments.start, | |
this.dFinish = arguments.end, | |
this.time = arguments.time | |
} | |
createPathAnimation.prototype.start = function() { | |
//aqui creo una animación de SNAPSVG que utiliza la propiedad "animate" | |
this.path.animate({ | |
d: this.dStart | |
}, | |
this.time, | |
this.callback | |
)}; | |
createPathAnimation.prototype.callback = function() { | |
//este callback vuelve a utilizar la propiedad animate y vuelve al svg a su posición inicial | |
this.path.animate({ d: this.dFinish }, this.time, this.start); | |
}; | |
//creo un array , mapeo cada propiedad la transformo en el objeto "createPathAnimation", pero me retorna error | |
var instancePasto = []; | |
for (var i = 0; i < dataPasto.length; i++) { | |
instancePasto[i] = new createPathAnimation(dataPasto[i]); | |
instancePasto[i].start(); | |
console.log(instancePasto[i]); | |
} | |
/*============================LA IDEA VIENE DE ESTE PARENT PARA CREAR ANIMACIONES EN SNAP ====================*/ | |
//como son varios elementos pensé que una instanciación serviria para todos, pero me da error el object animate en el callback | |
var path = Snap.select('#first_pasto'); | |
function animatePath(){ | |
path.animate({ d: "M1097.7,754.6h5.6c0-8.6,3.5-16.4,9.1-22C1105.1,737.5,1099.6,745.2,1097.7,754.6z" }, 300, mina.ease, resetPath) | |
} | |
function resetPath(){ | |
path.animate({ d: "M1097.7,754.6h5.6c0-8.6-0.5-12.8-8.7-23.8C1097,742.7,1099.6,745.2,1097.7,754.6z" }, 300, mina.ease, animatePath); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment