本文是konva基于canvas的开发，主要使用到konva中的tween对象，tween是控制konva对象进行动画的核心对象。 本案例中的动画就是补间动画的一种：旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间，同时为了实现循环效果，在执行完每一次动画后，重设动画（即回到0度）和再次执行动画。
一、效果
二、思路
主要使用到konva中的Tween对象。tween，英文意思时两者之间，其实就是Tweened Aniamation（两者之间的动画，即补间动画）。何为补间动画？说白了就是给你一个初始状态，让你逐渐变到另一个状态。比如，指定初始（0，0）坐标和终点坐标(100,100)，从起点移动到终点，至于怎么移动？让计算机自己计算。移动过程就会产生位移动画，这种位移动画就是一种补间动画。
Tween是控制Konva对象进行动画的核心对象。
Tween可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
本案例中的动画就是补间动画的一种：旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间，同时为了实现循环效果，在执行完每一次动画后，重设动画（即回到0度）和再次执行动画。
三、代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>使用js canvas库konva创建补间动画 楚士岩 2018年7月19日</title>
</head>
<body>
<p id="container"></p>
<script type="text/javascript" src="js/konva/konva2.1.7/konva.js"></script>
<script type="text/javascript">
var stage = new Konva.Stage({
container: "container",
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
var star = new Konva.Star({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
numPoints: 5, // 设置为五角形
innerRadius: 40, // innerRadius和outerRadius都必须设置
outerRadius: 100,
fill: 'red',
});
layer.add(star);
var tween = new Konva.Tween({
node: star, // 需要添加补间动画的组件
duration: 6, // 持续时间
draggable: true, // 设置可以拖拽
easing: Konva.Easings.Linear, // 线性速度，即匀速
rotation: 360, // 6秒内旋转360度
onFinish: function () { // 动画完成时的回调函数
this.reset();// 重置动画
this.play(); // 重新播放动画
}
/* 不能使用yoyo:true代替onFinish中的代码
因为使用yoyo，执行一圈后（6秒360度），会旋转回到原始状态，
然后再执行下一圈动画。这样就无法实现五角星循环不停的朝一个方向旋转
*/
});
tween.play();
stage.add(layer);
</script>
</body>
</html>相关推荐：
