在曲线动力学 js 结束时翻转图像
Flip image at end of curve kinetic js
我正在关注 How to animate object on curve path in Kineticjs kinetic js 中曲线中的动画对象。
但我想在到达曲线末端时旋转图像
我在 jquery 中尝试了 .rotate() 但它扰乱了曲线路径动画
// create animation along quadratic curve
var animation = new Kinetic.Animation(function (frame) {
if (T==150) {
var pos = getQuadraticBezierXYatT(110, qControl, 85, T/150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
}else{
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
};
T += TDirection;
if (T < 0 || T > 150) {
TDirection *= -1;
T += TDirection
bone.rotate(180)
}
}, layer);
提前致谢
我找到了一个简单的解决方案,而不是旋转图像,我尝试用曲线末端的镜像替换它,它对我很有效
// load 2 images
var loaded = 0;
var boneImg = new Image();
boneImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
boneImg.src = "<%=asset_path 'flight-orange.png'%>";
// create Kinetic.Images
function start() {
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, 0.00);
bone = new Kinetic.Image({
x: pos.x + boneOffset.x,
y: pos.y + boneOffset.y,
id: 'bone',
image: boneImg,
width: boneImg.width * boneScale,
height: boneImg.height * boneScale,
});
layer.add(bone);
dog = new Kinetic.Image({
x: 30,
y: 15,
image: dogImg,
width: 300,
height: 90
});
layer.add(dog);
layer.draw();
animation.start();
}
var imageObj = new Image({id: 'bone'});
imageObj.src = "<%=asset_path 'mirror_flight.png'%>";
var flight = new Image({id: 'flight'});
flight.src = "<%=asset_path 'flight.png'%>";
// create animation along quadratic curve
var animation = new Kinetic.Animation(function (frame) {
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
T += TDirection;
if (T < 0 || T > 150) {
TDirection *= -1;
T += TDirection
if (T==150) {
layer.get('#bone')[0].setImage(imageObj);
} else if(T==0){
layer.get('#bone')[0].setImage(flight);
};
}
}, layer);
我正在关注 How to animate object on curve path in Kineticjs kinetic js 中曲线中的动画对象。 但我想在到达曲线末端时旋转图像 我在 jquery 中尝试了 .rotate() 但它扰乱了曲线路径动画
// create animation along quadratic curve
var animation = new Kinetic.Animation(function (frame) {
if (T==150) {
var pos = getQuadraticBezierXYatT(110, qControl, 85, T/150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
}else{
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
};
T += TDirection;
if (T < 0 || T > 150) {
TDirection *= -1;
T += TDirection
bone.rotate(180)
}
}, layer);
提前致谢
我找到了一个简单的解决方案,而不是旋转图像,我尝试用曲线末端的镜像替换它,它对我很有效
// load 2 images
var loaded = 0;
var boneImg = new Image();
boneImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
boneImg.src = "<%=asset_path 'flight-orange.png'%>";
// create Kinetic.Images
function start() {
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, 0.00);
bone = new Kinetic.Image({
x: pos.x + boneOffset.x,
y: pos.y + boneOffset.y,
id: 'bone',
image: boneImg,
width: boneImg.width * boneScale,
height: boneImg.height * boneScale,
});
layer.add(bone);
dog = new Kinetic.Image({
x: 30,
y: 15,
image: dogImg,
width: 300,
height: 90
});
layer.add(dog);
layer.draw();
animation.start();
}
var imageObj = new Image({id: 'bone'});
imageObj.src = "<%=asset_path 'mirror_flight.png'%>";
var flight = new Image({id: 'flight'});
flight.src = "<%=asset_path 'flight.png'%>";
// create animation along quadratic curve
var animation = new Kinetic.Animation(function (frame) {
var pos = getQuadraticBezierXYatT(qStart, qControl, qEnd, T / 150);
pos.x += boneOffset.x;
pos.y += boneOffset.y;
bone.setPosition(pos);
T += TDirection;
if (T < 0 || T > 150) {
TDirection *= -1;
T += TDirection
if (T==150) {
layer.get('#bone')[0].setImage(imageObj);
} else if(T==0){
layer.get('#bone')[0].setImage(flight);
};
}
}, layer);