lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 13:38:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tween support for gradient properties. fix #454

Browse Source
This commit is contained in:
Anton Lavrenov 2018-09-10 18:02:33 +03:00
parent 9af88cf9c4
commit b0c2112ec8
5 changed files with 141 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [new version][unreleased]
### Fixed
* Tween support for gradient properties
## [2.3.0][2018-08-30]
### Added

53
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.3.0
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Sat Sep 08 2018
* Date: Mon Sep 10 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -12586,7 +12586,8 @@
n,
len,
trueEnd,
trueStart;
trueStart,
endRGBA;
// remove conflict from tween map if it exists
tweenId = Konva.Tween.tweens[nodeId][key];
@ -12617,12 +12618,30 @@
}
}
for (n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
if (key.indexOf('fill') === 0) {
for (n = 0; n < len; n++) {
if (n % 2 === 0) {
diff.push(end[n] - start[n]);
} else {
var startRGBA = Konva.Util.colorToRGBA(start[n]);
endRGBA = Konva.Util.colorToRGBA(end[n]);
start[n] = startRGBA;
diff.push({
r: endRGBA.r - startRGBA.r,
g: endRGBA.g - startRGBA.g,
b: endRGBA.b - startRGBA.b,
a: endRGBA.a - startRGBA.a
});
}
}
} else {
for (n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
}
}
} else if (colorAttrs.indexOf(key) !== -1) {
start = Konva.Util.colorToRGBA(start);
var endRGBA = Konva.Util.colorToRGBA(end);
endRGBA = Konva.Util.colorToRGBA(end);
diff = {
r: endRGBA.r - start.r,
g: endRGBA.g - start.g,
@ -12663,8 +12682,28 @@
if (Konva.Util._isArray(start)) {
newVal = [];
len = Math.max(start.length, end.length);
for (n = 0; n < len; n++) {
newVal.push((start[n] || 0) + diff[n] * i);
if (key.indexOf('fill') === 0) {
for (n = 0; n < len; n++) {
if (n % 2 === 0) {
newVal.push((start[n] || 0) + diff[n] * i);
} else {
newVal.push(
'rgba(' +
Math.round(start[n].r + diff[n].r * i) +
',' +
Math.round(start[n].g + diff[n].g * i) +
',' +
Math.round(start[n].b + diff[n].b * i) +
',' +
(start[n].a + diff[n].a * i) +
')'
);
}
}
} else {
for (n = 0; n < len; n++) {
newVal.push((start[n] || 0) + diff[n] * i);
}
}
} else if (colorAttrs.indexOf(key) !== -1) {
newVal =

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

51
src/Tween.js
View File

@ -232,7 +232,8 @@
n,
len,
trueEnd,
trueStart;
trueStart,
endRGBA;
// remove conflict from tween map if it exists
tweenId = Konva.Tween.tweens[nodeId][key];
@ -263,12 +264,30 @@
}
}
for (n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
if (key.indexOf('fill') === 0) {
for (n = 0; n < len; n++) {
if (n % 2 === 0) {
diff.push(end[n] - start[n]);
} else {
var startRGBA = Konva.Util.colorToRGBA(start[n]);
endRGBA = Konva.Util.colorToRGBA(end[n]);
start[n] = startRGBA;
diff.push({
r: endRGBA.r - startRGBA.r,
g: endRGBA.g - startRGBA.g,
b: endRGBA.b - startRGBA.b,
a: endRGBA.a - startRGBA.a
});
}
}
} else {
for (n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
}
}
} else if (colorAttrs.indexOf(key) !== -1) {
start = Konva.Util.colorToRGBA(start);
var endRGBA = Konva.Util.colorToRGBA(end);
endRGBA = Konva.Util.colorToRGBA(end);
diff = {
r: endRGBA.r - start.r,
g: endRGBA.g - start.g,
@ -309,8 +328,28 @@
if (Konva.Util._isArray(start)) {
newVal = [];
len = Math.max(start.length, end.length);
for (n = 0; n < len; n++) {
newVal.push((start[n] || 0) + diff[n] * i);
if (key.indexOf('fill') === 0) {
for (n = 0; n < len; n++) {
if (n % 2 === 0) {
newVal.push((start[n] || 0) + diff[n] * i);
} else {
newVal.push(
'rgba(' +
Math.round(start[n].r + diff[n].r * i) +
',' +
Math.round(start[n].g + diff[n].g * i) +
',' +
Math.round(start[n].b + diff[n].b * i) +
',' +
(start[n].a + diff[n].a * i) +
')'
);
}
}
} else {
for (n = 0; n < len; n++) {
newVal.push((start[n] || 0) + diff[n] * i);
}
}
} else if (colorAttrs.indexOf(key) !== -1) {
newVal =

43
test/unit/Tween-test.js
View File

@ -170,6 +170,49 @@ suite('Tween', function() {
tween.play();
});
test('gradient tweening', function(done) {
var stage = addStage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 100,
y: stage.getHeight() / 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();
});
test('to method', function(done) {
var stage = addStage();