happyz
/
jsketch
mirror of https://github.com/luileito/jsketch.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Handle multistrokes animation

This commit is contained in:
Luis Leiva 2017-12-11 23:06:44 +01:00
parent 3aea79eda1
commit f9f41a3509
2 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
jquery.sketchable.animate.js
View File

@ -25,46 +25,62 @@
var events = data.options.events;
var graphics = data.options.graphics;
// Flatten strokes struct to easily handle multistrokes.
var fmtStrokes = [];
var pointCount = 0;
for (var s = 0; s < strokes.length; s++) {
var fmtCoords = [];
var coords = strokes[s];
for (var c = 0; c < coords.length; c++) {
// Add strokeId to easily handle multistrokes.
var pt = toPoint(coords[c]);
pt.strokeId = s;
fmtStrokes.push(pt);
fmtCoords.push(pt);
pointCount++;
}
fmtStrokes.push(fmtCoords);
}
var raf;
var frame = 1;
var count = fmtStrokes.length - 1;
if (typeof events.animationstart === 'function') {
events.animationstart($instance, data);
}
if (typeof events.animationstart === 'function') events.animationstart($instance, data);
var raf = {}; // Trigger one animation per stroke.
var pts = 1; // Will reach the total number of points.
(function loop() {
raf = requestAnimationFrame(loop);
for (var s = 0; s < fmtStrokes.length; s++) {
(function(s) {
var coords = fmtStrokes[s];
var frame = 0;
try {
drawLine(sketch, fmtStrokes, frame, graphics);
frame++;
} catch (err) {
console.error(err);
cancelAnimationFrame(raf);
}
(function loop() {
raf[s] = requestAnimationFrame(loop);
try {
drawLine(sketch, coords, frame, graphics);
} catch (err) {
console.error(err);
cancelAnimationFrame(raf[s]);
}
// Advance local count and check if current animation should end.
if (++frame === coords.length - 1) {
cancelAnimationFrame(raf[s]);
}
// Advance global count and check if actual animation has ended.
if (++pts === pointCount - 1 && typeof events.animationend === 'function') {
events.animationend($instance, data);
}
})();
if (frame == count) {
cancelAnimationFrame(raf);
if (typeof events.animationend === 'function') events.animationend($instance, data);
}
})();
})(s);
}
/**
* Cancel current animation.
* @return {AnimateSketch}.
*/
this.cancel = function() {
cancelAnimationFrame(raf);
for (var s in raf) {
cancelAnimationFrame(raf[s]);
}
return this;
};
@ -78,17 +94,17 @@
* @param {object} [graphics] - Graphics options.
*/
function drawLine(sketch, coords, t, graphics) {
var prevPt = coords[t - 1];
var currPt = coords[t];
var nextPt = coords[t + 1];
if (sketch.data.firstPointSize && (t === 1 || currPt.strokeId !== prevPt.strokeId)) {
var pt = t > 1 ? currPt : prevPt;
if (sketch.data.firstPointSize && (t === 1 || currPt.strokeId !== nextPt.strokeId)) {
var pt = t > 1 ? nextPt : currPt;
sketch.beginFill(sketch.data.strokeStyle).fillCircle(pt.x, pt.y, sketch.data.firstPointSize);
}
sketch.lineStyle(graphics.strokeStyle, graphics.lineWidth).beginPath();
if (currPt.strokeId === prevPt.strokeId) {
sketch.line(prevPt.x, prevPt.y, currPt.x, currPt.y).stroke();
if (currPt.strokeId === nextPt.strokeId) {
sketch.line(currPt.x, currPt.y, nextPt.x, nextPt.y).stroke();
}
sketch.closePath();
};

58
sketchable.animate.js
View File

@ -27,46 +27,62 @@
var events = data.options.events;
var graphics = data.options.graphics;
// Flatten strokes struct to easily handle multistrokes.
var fmtStrokes = [];
var pointCount = 0;
for (var s = 0; s < strokes.length; s++) {
var fmtCoords = [];
var coords = strokes[s];
for (var c = 0; c < coords.length; c++) {
// Add strokeId to easily handle multistrokes.
var pt = toPoint(coords[c]);
pt.strokeId = s;
fmtStrokes.push(pt);
fmtCoords.push(pt);
pointCount++;
}
fmtStrokes.push(fmtCoords);
}
var raf;
var frame = 1;
var count = fmtStrokes.length - 1;
if (typeof events.animationstart === 'function') {
events.animationstart($instance, data);
}
if (typeof events.animationstart === 'function') events.animationstart(instance.elem, data);
var raf = {}; // Trigger one animation per stroke.
var pts = 1; // Will reach the total number of points.
(function loop() {
raf = requestAnimationFrame(loop);
for (var s = 0; s < fmtStrokes.length; s++) {
(function(s) {
var coords = fmtStrokes[s];
var frame = 0;
try {
drawLine(sketch, fmtStrokes, frame, graphics);
frame++;
} catch (err) {
console.error(err);
cancelAnimationFrame(raf);
}
(function loop() {
raf[s] = requestAnimationFrame(loop);
try {
drawLine(sketch, coords, frame, graphics);
} catch (err) {
console.error(err);
cancelAnimationFrame(raf[s]);
}
// Advance local count and check if current animation should end.
if (++frame === coords.length - 1) {
cancelAnimationFrame(raf[s]);
}
// Advance global count and check if actual animation has ended.
if (++pts === pointCount - 1 && typeof events.animationend === 'function') {
events.animationend($instance, data);
}
})();
if (frame == count) {
cancelAnimationFrame(raf);
if (typeof events.animationend === 'function') events.animationend(instance.elem, data);
}
})();
})(s);
}
/**
* Cancel current animation.
* @return {AnimateSketch}.
*/
this.cancel = function() {
cancelAnimationFrame(raf);
for (var s in raf) {
cancelAnimationFrame(raf[s]);
}
return this;
};