Fabric.js - 详细使用教程5（动画效果）
五、动画效果
1，指定明确的目标值
（1）效果图
- 点击“开始移动”按钮后，红色方块会自动旋转着并移动到最右侧，然后停下。
- 如果方块在右侧时，点击按钮后方块又回旋转着并移动回最左侧，然后停下。
（2）样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed black;
}
</style>
<script src="fabric.min.js"></script>
<script>
var canvas;
var rect;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
rect = new fabric.Rect({
top : 50, //距离画布上边的距离
left : 25, //距离画布左侧的距离，单位是像素
width : 50, //矩形的宽度
height : 50, //矩形的高度
fill : 'red', //填充的颜色
originX: 'center',//调整中心点的X轴坐标
originY: 'center'//调整中心点的Y轴坐标
});
canvas.add(rect);
}
// 按钮点击
function play() {
// 移动动画
rect.animate('left', rect.left === 25 ? 275 : 25, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
console.log("播放结束!");
},
easing: fabric.util.ease.easeInCubic
});
// 旋转动画
rect.animate('angle', rect.left === 25 ? 360 : 0, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
console.log("播放结束!");
},
easing: fabric.util.ease.easeInCubic
});
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<button onclick="play()">开始移动</button>
</body>
</html>
2，使用增量值
（1）效果图
- 点击“开始移动”按钮后，方块会向右移动 50px 距离，在此过程中还会旋转 90 度。
- 再次点击按钮，方块又回从之前停下来的位置继续向右移动 50px 距离，在此过程中还会继续旋转 90 度。
（2）样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed black;
}
</style>
<script src="fabric.min.js"></script>
<script>
var canvas;
var rect;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
rect = new fabric.Rect({
top : 50, //距离画布上边的距离
left : 25, //距离画布左侧的距离，单位是像素
width : 50, //矩形的宽度
height : 50, //矩形的高度
fill : 'red', //填充的颜色
originX: 'center',//调整中心点的X轴坐标
originY: 'center'//调整中心点的Y轴坐标
});
canvas.add(rect);
}
// 按钮点击
function play() {
// 移动动画
rect.animate('left', '+=50', {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
console.log("播放结束!");
},
easing: fabric.util.ease.easeInCubic
});
// 旋转动画
rect.animate('angle', '+=90', {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
console.log("播放结束!");
},
easing: fabric.util.ease.easeInCubic
});
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<button onclick="play()">开始移动</button>
</body>
</html>
3，反复播放动画
（1）效果图
- 点击“开始移动”按钮后，红色方块会自动旋转着移动到最右侧。
- 当方块到达最右侧时，又回自动地旋转着移动回最左侧。
- 当方块到达最左侧时，又回自动旋转着移动到最右侧.......不断重复。
（2）样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed black;
}
</style>
<script src="fabric.min.js"></script>
<script>
var canvas;
var rect;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
rect = new fabric.Rect({
top : 50, //距离画布上边的距离
left : 25, //距离画布左侧的距离，单位是像素
width : 50, //矩形的宽度
height : 50, //矩形的高度
fill : 'red', //填充的颜色
originX: 'center',//调整中心点的X轴坐标
originY: 'center'//调整中心点的Y轴坐标
});
canvas.add(rect);
}
// 动画效果
function animate() {
// 移动动画
rect.animate('left', rect.left === 25 ? 275 : 25, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: animate,
easing: fabric.util.ease.easeInCubic
});
// 旋转动画
rect.animate('angle', rect.left === 25 ? 360 : 0, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: animate,
easing: fabric.util.ease.easeInCubic
});
}
// 按钮点击
function play() {
animate();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<button onclick="play()">开始移动</button>
</body>
</html>
