ホームページ > 記事 > ウェブフロントエンド > 回転する五芒星を例として、js のキャンバスに基づいた konva の実践的な 3D 開発を共有します。
回転する五芒星を例として、js のキャンバスに基づいた konva の実践的な 3D 開発を共有します。
- php是最好的语言オリジナル
- 2018-07-23 17:46:552887ブラウズ
この記事は、Canva をベースにした konva の開発です。Tween は、Konva オブジェクトのアニメーションを制御するコア オブジェクトです。この場合のアニメーションは、トゥイーン アニメーションの一種である回転アニメーションです。開始角度 0 と終了角度 360 度が与えられます。同時に、ループ効果を実現するために、アニメーション時間が 6 秒に設定され、アニメーションが実行されるたびにアニメーションがリセットされ (つまり、0 度に戻され)、アニメーションが再度実行されます。
1. 効果
2. アイデア
主にkonvaのTweenオブジェクトを使用します。 トゥイーンとは、英語で「2 つの間の」という意味で、実際には Tweened Animation (2 つの間のアニメーション、つまりトゥイーン アニメーション) のことです。トゥイーンアニメーションとは何ですか？率直に言うと、初期状態を提供し、徐々に別の状態に変更できるようにします。例えば、初期座標(0,0)と終点座標(100,100)を指定して、始点から終点まで移動するにはどうすればよいでしょうか。コンピューターに自動で計算させましょう。移動プロセスでは、トゥイーン アニメーションの一種であるディスプレイスメント アニメーションが生成されます。
Tween は、アニメーション用の Konva オブジェクトを制御するコア オブジェクトです。
-
Tween は、x、y、回転、幅、高さ、半径、ストローク幅、不透明度、スケール X など、アニメーション処理のすべての数値型属性を制御できます。この場合のアニメーションはトゥイーンアニメーションの一種、回転アニメーションです。開始角度 0 と終了角度 360 度が与えられます。同時に、ループ効果を実現するために、アニメーション時間が 6 秒に設定され、アニメーションが実行されるたびにアニメーションがリセットされ (つまり、0 度に戻され)、アニメーションが再度実行されます。
3. コード
<!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> 関連する推奨事項:
canvas と JS で動的時計アニメーションを実装
以上が回転する五芒星を例として、js のキャンバスに基づいた konva の実践的な 3D 開発を共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。