我有一个轮询系统的条形图。我希望它们跟随的事件有两个过渡（补间）效果
我正在为tween使用相同的节点.tween.play工作正常，但反过来我在补间构造函数中给出的y坐标不起作用。
结帐我的jsfiddle
var stagewidthbywindow = 1000;
var stagesetting = {
container: "container_1_1_0",
width: stagewidthbywindow,
height: 50
};
var rectwidth0 = 0;
var rectSum = 0;
var stage110 = new Kinetic.Stage(stagesetting);
var layer110 = new Kinetic.Layer();
var group110 = new Kinetic.Group();
layer110.add(group110);
function increasestage() {
var myChecker = setInterval(function () {
var stage_height = stage110.getHeight();
if (stage_height == 250) {
clearInterval(myChecker);
} else {
stage110.setAttr("height", stage_height + 2.5);
}
}, 10);
}
var rectwidth1 = stagesetting.width * 0.5;
rectSum += rectwidth0;
var rectObject1 = {
x: rectSum,
y: 0,
width: rectwidth1,
height: 50,
fill: "#DA4B4B",
stroke: "#ffffff",
strokeWidth: 2,
opacity: 1
};
var shadeObject = {
x: rectSum,
y: 0,
width: stagewidthbywindow,
height: 50,
fill: "#f3f3f3",
stroke: "#f3f3f3",
strokeWidth: 1,
opacity: 1
};
var shade111 = new Kinetic.Rect(shadeObject);
var rect111 = new Kinetic.Rect(rectObject1);
rectSum += rectwidth1;
var ansOption111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: rect111.getY() + 10,
text: "iPhone 5s",
fontSize: 14,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
align: "left",
fill: "#ffffff"
});
var ansPercentage111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: 30,
text: "50%",
fontSize: 15,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
fontStyle: "bold",
align: "left",
fill: "#ffffff"
});
group110.add(shade111);
group110.add(rect111);
group110.add(ansOption111);
group110.add(ansPercentage111);
rect111.tween = new Kinetic.Tween({
node: rect111,
scaleX: 1,
scaleY: 5,
easing: Kinetic.Easings.Linear,
duration: .5
});
ansOption111.tween = new Kinetic.Tween({
node: ansOption111,
scaleX: 1.5,
scaleY: 1.5,
x: rect111.getX() + 20,
y: 20,
easing: Kinetic.Easings.Linear,
duration: .5,
});
ansPercentage111.tween = new Kinetic.Tween({
node: ansPercentage111,
x: rect111.getX() + 20,
y: 100,
scaleX: 3,
scaleY: 3,
easing: Kinetic.Easings.Linear,
duration: .5,
});
rect111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
rect111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
ansOption111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
ansOption111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
$("#sample_size1").change(function () {
if ($(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
var scaleFactor = 5;
increasestage();
stage110.draw();
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
} else if (!$(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 600);
}
});
var rectangle111 = new Kinetic.Tween({
node: rect111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
width: rectwidth1,
height: 20,
opacity: 1,
scaleX: 1
//scaleY: 0.4
});
var shadetween111 = new Kinetic.Tween({
node: shade111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
//width: stagewidthbywindow,
height: 20,
opacity: 1,
scaleX: 1
});
var answerOption111 = new Kinetic.Tween({
node: ansOption111,
duration: .5,
x: 0,
y: (40 * 0),
width: 150,
height: 15,
opacity: .9,
strokeWidth: 2,
scaleX: 1
});
function call_answerPercentage111() {
var answerPercentage111 = new Kinetic.Tween({
node: ansPercentage111,
x: 160,
y: (40 * 0),
width: 150,
height: 18,
opacity: .9,
duration: 0.5,
strokeWidth: 2,
scaleX: 1
});
return answerPercentage111;
}
document.getElementById("arrow110").addEventListener("click", function () {
if ($("#orientation_1_1_0").val() == "horizontal") {
$("#arrow110").addClass("btn-arow-down");
stage110.setAttr("height", 4 * 40);
$("#orientation_1_1_0").val("vertical");
if ($("#sample_size1").is(":checked")) {
console.log("destroy");
}
ansPercentage111.setFill("black");
ansOption111.setFill("black");
rectangle111.play();
shadetween111.play();
answerOption111.play();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.play();
layer110.draw();
} else if ($("#orientation_1_1_0").val() == "vertical") {
$("#arrow110").removeClass("btn-arow-down");
$("#orientation_1_1_0").val("horizontal");
ansPercentage111.setFill("white");
ansOption111.setFill("white");
rectangle111.reverse();
shadetween111.reverse();
answerOption111.reverse();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.reverse();
answerPercentage111.destroy();
layer110.draw();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 1000);
}
}, false);
stage110.add(layer110);
答案 0 :(得分：0)
在调用call_answerPercentage111时，您正在创建新的补间。您无法撤消未使用play()功能播放的补间。此外，您在destroy()之后调用reverse()方法 - 您只能在补间完成后执行此操作（或者您将停止补间）。