分享js中konva基於canvas的3d實戰開發，以旋轉五角星為例
- php是最好的语言原創
- 2018-07-23 17:46:552911瀏覽
本文是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>相關推薦：
以上是分享js中konva基於canvas的3d實戰開發，以旋轉五角星為例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn