Как да добавите анимация при добавяне или премахване на обект - Fabricjs - jquery, анимация, html5-платно, fabricjs

Използвам FabricJS за манипулиране на изображениетобиблиотека. Искам да знам как да добавям анимация към обект, когато е добавен към / премахнат от платно. Посочих сайта за проби. Но не можах да намеря много за проста анимация (като малък скок или избледняване, за да привлека вниманието на потребителя).

Трябва ли да използвам object.animate за това? Ще работи ли, когато обектът бъде изтрит? Примерен код или източник на справка ще бъде страхотно.

Отговори:

Изглежда, че самият fabricJS осигурява двойкана подходите за анимация. Можете да използвате изчакване / интервал и след това да промените такива неща или да използвате функцията за анимиране (за прости свойства на обекти), за да го направите. За такива неща мисля, че използването на функцията за анимиране е по-лесно.

Например:

var canvas = new fabric.Canvas(...);
var rect = new fabric.Rect(...);

function startAnimation() {
// If the object was removed, add it back
if (rect.opacity === 0) {
canvas.add(rect);
}

// Animate the opacity of the rectangle from 0 - 1 and back
rect.animate("opacity", rect.opacity === 0 ? 1 : 0, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
// Once the animation is complete, remove the object
if (rect.opacity === 0) {
canvas.remove(rect);
}
},
easing: fabric.util.ease["easeInQuad"]
});
}

JSFiddle: http://jsfiddle.net/qnwjs0aw/

fabricJS Документи: http://fabricjs.com/cross & http://fabricjs.com/animation-easing