曲线上的动画图像
Animate image on curve
我想为曲线中的图像设置动画,并且在曲线结束时图像应该旋转。
我尝试使用 .animate with a curve 但它生成错误
TypeError: jQuery.easing[this.easing] is not a function
这可以通过使用 canvas 和动力学 js.Just 包括
来实现
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.1/kinetic.min.js"></script>
将以下脚本添加到正文
<div id="container"></div>
<script type="text/javascript">
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
window.onload = function() {
// set up stage,layer and quadratic-curve
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// vars related to the images
var bone, dog;
var boneScale = 1;
var boneOffset = {
x: -11,
y: 0
};
var dogScale = 0.50;
// vars related to the quadratic curve
var qStart = {
x: 115,
y: 85
};
var qControl = {
x: 155,
y: 108
};
var qEnd = {
x: 200,
y: 88
};
var startXY = getQuadraticBezierXYatT(qStart, qControl, qEnd, 0, 00);
var pathData = "M " + qStart.x + " " + qStart.y;
pathData += " Q " + qControl.x + " " + qControl.y;
pathData += " " + qEnd.x + " " + qEnd.y;
// vars related to calculating points on the curve
var T = 0;
var TDirection = 1;
// set up quadratic-curve
var path = new Kinetic.Path({
x: 0,
y: 0,
data: pathData,
stroke: 'green',
strokeWidth: 3,
});
layer.add(path);
layer.draw();
// load 2 images
var loaded = 0;
var boneImg = new Image();
boneImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
boneImg.src = "<%=asset_path 'flight.png'%>";
var dogImg = new Image();
dogImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
dogImg.src = "<%=asset_path 'your-logo.png'%>";
var circle0 = new Kinetic.Circle({
x: 100,
y: 56,
id: 'circle0',
radius: 9,
fill: 'yellow',
stroke: 'white',
strokeWidth: 0
});
layer.add(circle0);
// 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('#circle0')[0].remove();
layer.get('#bone')[0].setImage(imageObj);
var circle = new Kinetic.Circle({
x: 221,
y: 56,
id: 'circle',
radius: 9,
fill: 'yellow',
stroke: 'white',
strokeWidth: 0
});
// add the shape to the layer
layer.add(circle);
sleep(1000);
// layer.get('#circle')[0].remove();
} else if(T==0){
layer.get('#circle')[0].remove();
var circle0 = new Kinetic.Circle({
x: 100,
y: 56,
id: 'circle0',
radius: 9,
fill: 'yellow',
stroke: 'black',
strokeWidth: 0
});
layer.add(circle0);
layer.get('#bone')[0].setImage(flight);
sleep(1000);
};
}
}, layer);
// Calc an XY along a quadratic curve at interval T
// T==0.00 at start of curve, T==1.00 at end of curve
function getQuadraticBezierXYatT(startPt, controlPt, endPt, T) {
var x = Math.pow(1 - T, 2) * startPt.x + 2 * (1 - T) * T * controlPt.x + Math.pow(T, 2) * endPt.x;
var y = Math.pow(1 - T, 2) * startPt.y + 2 * (1 - T) * T * controlPt.y + Math.pow(T, 2) * endPt.y;
return ({
x: x,
y: y
});
}
}
</script>
您可以通过 var qControl 简单地控制曲线的弧度
只需将您的图片放在 dogImg.src ,imageObj.src ,flight.src
的位置
注意:imageObj和flight.src应该互为镜像
我想为曲线中的图像设置动画,并且在曲线结束时图像应该旋转。 我尝试使用 .animate with a curve 但它生成错误
TypeError: jQuery.easing[this.easing] is not a function
这可以通过使用 canvas 和动力学 js.Just 包括
来实现<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.1/kinetic.min.js"></script>
将以下脚本添加到正文
<div id="container"></div>
<script type="text/javascript">
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
window.onload = function() {
// set up stage,layer and quadratic-curve
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// vars related to the images
var bone, dog;
var boneScale = 1;
var boneOffset = {
x: -11,
y: 0
};
var dogScale = 0.50;
// vars related to the quadratic curve
var qStart = {
x: 115,
y: 85
};
var qControl = {
x: 155,
y: 108
};
var qEnd = {
x: 200,
y: 88
};
var startXY = getQuadraticBezierXYatT(qStart, qControl, qEnd, 0, 00);
var pathData = "M " + qStart.x + " " + qStart.y;
pathData += " Q " + qControl.x + " " + qControl.y;
pathData += " " + qEnd.x + " " + qEnd.y;
// vars related to calculating points on the curve
var T = 0;
var TDirection = 1;
// set up quadratic-curve
var path = new Kinetic.Path({
x: 0,
y: 0,
data: pathData,
stroke: 'green',
strokeWidth: 3,
});
layer.add(path);
layer.draw();
// load 2 images
var loaded = 0;
var boneImg = new Image();
boneImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
boneImg.src = "<%=asset_path 'flight.png'%>";
var dogImg = new Image();
dogImg.onload = function () {
loaded++;
if (loaded == 2) {
start();
}
}
dogImg.src = "<%=asset_path 'your-logo.png'%>";
var circle0 = new Kinetic.Circle({
x: 100,
y: 56,
id: 'circle0',
radius: 9,
fill: 'yellow',
stroke: 'white',
strokeWidth: 0
});
layer.add(circle0);
// 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('#circle0')[0].remove();
layer.get('#bone')[0].setImage(imageObj);
var circle = new Kinetic.Circle({
x: 221,
y: 56,
id: 'circle',
radius: 9,
fill: 'yellow',
stroke: 'white',
strokeWidth: 0
});
// add the shape to the layer
layer.add(circle);
sleep(1000);
// layer.get('#circle')[0].remove();
} else if(T==0){
layer.get('#circle')[0].remove();
var circle0 = new Kinetic.Circle({
x: 100,
y: 56,
id: 'circle0',
radius: 9,
fill: 'yellow',
stroke: 'black',
strokeWidth: 0
});
layer.add(circle0);
layer.get('#bone')[0].setImage(flight);
sleep(1000);
};
}
}, layer);
// Calc an XY along a quadratic curve at interval T
// T==0.00 at start of curve, T==1.00 at end of curve
function getQuadraticBezierXYatT(startPt, controlPt, endPt, T) {
var x = Math.pow(1 - T, 2) * startPt.x + 2 * (1 - T) * T * controlPt.x + Math.pow(T, 2) * endPt.x;
var y = Math.pow(1 - T, 2) * startPt.y + 2 * (1 - T) * T * controlPt.y + Math.pow(T, 2) * endPt.y;
return ({
x: x,
y: y
});
}
}
</script>
您可以通过 var qControl 简单地控制曲线的弧度 只需将您的图片放在 dogImg.src ,imageObj.src ,flight.src
的位置注意:imageObj和flight.src应该互为镜像