mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
411 lines
8.9 KiB
TypeScript
411 lines
8.9 KiB
TypeScript
import { assert } from 'chai';
|
|
|
|
import { addStage, Konva } from './test-utils';
|
|
|
|
describe('Tween', function () {
|
|
// ======================================================
|
|
it('tween node', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var finishCount = 0;
|
|
var onFinish = function () {
|
|
assert(++finishCount <= 1, 'finishCount should not exceed 1');
|
|
done();
|
|
};
|
|
|
|
var tweens = 0;
|
|
var attrs = 0;
|
|
|
|
for (var key in Konva.Tween.tweens) {
|
|
tweens++;
|
|
}
|
|
for (var key in Konva.Tween.attrs) {
|
|
attrs++;
|
|
}
|
|
|
|
assert.equal(tweens, 0);
|
|
assert.equal(attrs, 0);
|
|
|
|
var tween = new Konva.Tween({
|
|
node: circle,
|
|
duration: 0.2,
|
|
x: 200,
|
|
y: 100,
|
|
onFinish: onFinish,
|
|
}).play();
|
|
|
|
var tweens = 0;
|
|
var attrs = 0;
|
|
for (var key in Konva.Tween.tweens) {
|
|
tweens++;
|
|
}
|
|
for (var key in Konva.Tween.attrs[circle._id][tween._id]) {
|
|
attrs++;
|
|
}
|
|
|
|
assert.equal(tweens, 1);
|
|
assert.equal(attrs, 2);
|
|
|
|
assert.notEqual(Konva.Tween.attrs[circle._id][tween._id].x, undefined);
|
|
assert.notEqual(Konva.Tween.attrs[circle._id][tween._id].y, undefined);
|
|
});
|
|
|
|
// ======================================================
|
|
it('destroy tween while tweening', function () {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var tween = new Konva.Tween({
|
|
node: circle,
|
|
duration: 0.2,
|
|
x: 200,
|
|
y: 100,
|
|
}).play();
|
|
|
|
// start/diff object = attrs.nodeId.tweenId.attr
|
|
// tweenId = tweens.nodeId.attr
|
|
|
|
assert.notEqual(tween._id, undefined);
|
|
assert.equal(Konva.Tween.tweens[circle._id].x, tween._id);
|
|
assert.notEqual(Konva.Tween.attrs[circle._id][tween._id], undefined);
|
|
|
|
tween.destroy();
|
|
|
|
assert.equal(Konva.Tween.tweens[circle._id].x, undefined);
|
|
assert.equal(Konva.Tween.attrs[circle._id][tween._id], undefined);
|
|
});
|
|
|
|
// ======================================================
|
|
it('zero duration', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'blue',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var tween = new Konva.Tween({
|
|
node: circle,
|
|
duration: 0,
|
|
x: 200,
|
|
y: 100,
|
|
});
|
|
tween.play();
|
|
|
|
setTimeout(function () {
|
|
assert.equal(circle.x(), 200);
|
|
assert.equal(circle.y(), 100);
|
|
done();
|
|
}, 60);
|
|
});
|
|
|
|
it('color tweening', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fill: 'red',
|
|
stroke: 'blue',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var duration = 0.1;
|
|
var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)');
|
|
var endFill = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
|
|
var midFill = 'rgba(128,128,0,0.75)';
|
|
|
|
var tween = new Konva.Tween({
|
|
node: circle,
|
|
duration: duration,
|
|
fill: endFill,
|
|
onFinish: function () {
|
|
assert.equal(endFill, circle.fill());
|
|
done();
|
|
},
|
|
});
|
|
|
|
tween.seek(duration * 0.5);
|
|
assert.equal(midFill, circle.fill());
|
|
|
|
tween.seek(0);
|
|
tween.play();
|
|
});
|
|
|
|
it('gradient tweening', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
x: 100,
|
|
y: stage.height() / 2,
|
|
radius: 70,
|
|
fillLinearGradientStartPoint: { x: -50, y: -50 },
|
|
fillLinearGradientEndPoint: { x: 50, y: 50 },
|
|
fillLinearGradientColorStops: [0, 'red', 0.5, 'blue'],
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var duration = 0.1;
|
|
var endFill = [0.5, 'red', 1, 'black'];
|
|
|
|
var tween = new Konva.Tween({
|
|
node: circle,
|
|
duration: duration,
|
|
fillLinearGradientColorStops: endFill,
|
|
onFinish: function () {
|
|
assert.deepEqual(
|
|
[0.5, 'rgba(255,0,0,1)', 1, 'rgba(0,0,0,1)'],
|
|
circle.fillLinearGradientColorStops()
|
|
);
|
|
done();
|
|
},
|
|
});
|
|
|
|
tween.seek(duration * 0.5);
|
|
assert.deepEqual(
|
|
[0.25, 'rgba(255,0,0,1)', 0.75, 'rgba(0,0,128,1)'],
|
|
circle.fillLinearGradientColorStops()
|
|
);
|
|
|
|
tween.seek(0);
|
|
tween.play();
|
|
});
|
|
|
|
it('to method', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
var circle = new Konva.Circle({
|
|
radius: 70,
|
|
fill: 'red',
|
|
stroke: 'blue',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
circle.to({
|
|
x: stage.width() / 2,
|
|
y: stage.height() / 2,
|
|
duration: 0.1,
|
|
onFinish: function () {
|
|
assert.equal(circle.x(), stage.width() / 2);
|
|
assert.equal(Object.keys(Konva.Tween.attrs[circle._id]).length, 0);
|
|
done();
|
|
},
|
|
});
|
|
});
|
|
|
|
it('to method simple usage', function (done) {
|
|
var stage = addStage();
|
|
|
|
stage.to({
|
|
x: 10,
|
|
duration: 0.001,
|
|
onFinish: () => {
|
|
assert(stage.x() === 10);
|
|
done();
|
|
},
|
|
});
|
|
});
|
|
|
|
it('tween to call update callback', function (done) {
|
|
var stage = addStage();
|
|
var updateCount = 0;
|
|
|
|
stage.to({
|
|
x: 10,
|
|
duration: 0.1,
|
|
onUpdate: function () {
|
|
updateCount++;
|
|
},
|
|
onFinish: function () {
|
|
assert(updateCount > 2);
|
|
done();
|
|
},
|
|
});
|
|
});
|
|
|
|
it('prepare array closed', function () {
|
|
var start = [0, 0, 10, 0, 10, 10];
|
|
var end = [0, 0, 10, 0, 10, 10, 0, 10];
|
|
var newStart = Konva.Util._prepareArrayForTween(start, end, true);
|
|
assert.deepEqual(newStart, [0, 0, 10, 0, 10, 10, 5, 5]);
|
|
});
|
|
|
|
it('prepare array - opened', function () {
|
|
var start = [0, 0, 10, 0, 10, 10, 0, 10];
|
|
var end = [0, 0, 10, 0, 7, 9];
|
|
end = Konva.Util._prepareArrayForTween(start, end, false);
|
|
assert.deepEqual(end, [0, 0, 10, 0, 7, 9, 7, 9]);
|
|
});
|
|
|
|
it('tween array with bigger size', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var line = new Konva.Line({
|
|
stroke: 'black',
|
|
points: [100, 100, 200, 100, 200, 200],
|
|
closed: true,
|
|
});
|
|
layer.add(line);
|
|
|
|
line.to({
|
|
points: [100, 100, 200, 100, 200, 200, 100, 200],
|
|
duration: 0.1,
|
|
onFinish: function () {
|
|
assert.deepEqual(line.points(), [
|
|
100,
|
|
100,
|
|
200,
|
|
100,
|
|
200,
|
|
200,
|
|
100,
|
|
200,
|
|
]);
|
|
done();
|
|
},
|
|
});
|
|
});
|
|
|
|
it('tween array to lower size', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var line = new Konva.Line({
|
|
stroke: 'black',
|
|
points: [100, 100, 200, 100, 200, 200, 100, 200],
|
|
closed: true,
|
|
});
|
|
layer.add(line);
|
|
|
|
line.to({
|
|
points: [100, 100, 200, 100, 200, 200],
|
|
duration: 0.1,
|
|
onFinish: function () {
|
|
assert.deepEqual(line.points(), [100, 100, 200, 100, 200, 200]);
|
|
done();
|
|
},
|
|
});
|
|
});
|
|
|
|
it('tween array to lower size and go back', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var line = new Konva.Line({
|
|
stroke: 'black',
|
|
points: [100, 100, 200, 100, 200, 200, 100, 200],
|
|
closed: true,
|
|
});
|
|
layer.add(line);
|
|
|
|
var tween = new Konva.Tween({
|
|
node: line,
|
|
points: [100, 100, 200, 100, 200, 200],
|
|
duration: 0.01,
|
|
onFinish: function () {
|
|
tween.reverse();
|
|
},
|
|
onReset: function () {
|
|
assert.deepEqual(line.points(), [
|
|
100,
|
|
100,
|
|
200,
|
|
100,
|
|
200,
|
|
200,
|
|
100,
|
|
200,
|
|
]);
|
|
done();
|
|
},
|
|
});
|
|
tween.play();
|
|
});
|
|
|
|
it('tween array to bigger size and go back', function (done) {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
var line = new Konva.Line({
|
|
stroke: 'black',
|
|
points: [100, 100, 200, 100, 200, 200],
|
|
closed: true,
|
|
});
|
|
layer.add(line);
|
|
|
|
var tween = new Konva.Tween({
|
|
node: line,
|
|
points: [100, 100, 200, 100, 200, 200, 100, 200],
|
|
duration: 0.01,
|
|
onFinish: function () {
|
|
tween.reverse();
|
|
},
|
|
onReset: function () {
|
|
assert.deepEqual(line.points(), [100, 100, 200, 100, 200, 200]);
|
|
done();
|
|
},
|
|
});
|
|
tween.play();
|
|
});
|
|
});
|