Skip to content

Instantly share code, notes, and snippets.

@balusio
Last active February 14, 2017 15:58
Show Gist options
  • Save balusio/26e2e5089cfddbbcfa51a36f674bd2b8 to your computer and use it in GitHub Desktop.
Save balusio/26e2e5089cfddbbcfa51a36f674bd2b8 to your computer and use it in GitHub Desktop.
problema instanciando propiedades de SNAP
//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