2013-07-29 14 views
6

Voglio creare un effetto del mouse rollover, come eravamo abituati a vedere nei siti web in flash - quando il mouse passa sopra un elemento che comincia ad animarsi, ma se nel mezzo dell'anima che il mouse tira fuori l'animazione si fermerebbe e tornerebbe indietro.Come smettere (al fine di invertire) un'animazione fabricjs

vorrei ottenere lo stesso effetto con il tessuto, ma io riesco a trovare un modo per fermare l'animazione. Ad esempio:

rect.animate('top', '200', { 
    duration: 1000, 
    onChange: canvas.renderAll.bind(canvas), 
    onComplete: function() { 
     //callback code goes here 
    } 
    }); 

Questo animerà finché il valore top del rect diventerà 200. C'è un modo per fermare l'animazione prima di quello?

risposta

7

è necessario specificare abort funzione.

rect.animate('top', '200', { 
    duration: 1000, 
    onChange: canvas.renderAll.bind(canvas), 
    onComplete: function() { 
     //callback code goes here 
    }, 
    abort: function(){ 
     return someConditionWhichAbortsAnimationWhenItsTrue; 
    } 
}); 

L'unico problema è che abort non è stata approvata per il sottostante fabric.util.animate, which I just fixed, quindi avrete bisogno di utilizzare la versione più recente :)

+0

Grazie! Per ultima versione intendi il download dal repository? – MeLight

+0

@MeLight sì, dalla repo – kangax

+0

Va bene, lo farà :) – MeLight