ピエロの付いた HTML キャンバス。 _html/css_WEB-ITnose

はじめに

これまで、アニメーション アプリケーションを開発するには、非常に複雑なアニメーション制作フレームワークを学習する必要があったかもしれません。 HTML5 Canvas 機能の登場以来、Web アニメーションは突然クラウドから地上に落ち、Web プログラマーであれば誰でも Canvas テクノロジーと JavaScript を使用してさまざまなアニメーション効果を簡単に開発できるようになりました。

以下のチュートリアルでは、kinetic と呼ばれる別の Web アニメーション ツールキットを使用します。それらはすべてオープンソースです。

Canvas のいくつかの API を理解し、必要なアニメーション パラメーターを使用して、動きに反応するこの興味深い Web アニメーションを作成する必要があります。上のピエロの顔の上にマウスを置き、そこから離れて何が起こるかを確認します。

基本構造

KineticJS は、まず、最も一般的に使用される < div > タグなど、HTML ページ上の DOM コンテナ要素にバインドする必要があります。ブラウザーが最終的に表示するのは、これらのユーザー レイヤーのオーバーレイ効果です。

描画インターフェイス

ここで、Kinetic を使用して画像を作成し始めます。

Kinetic 描画の基本プロセスを以下の図に示します:

まず、HTML5 ページを作成し、Kinetic ライブラリへの参照を追加します:

<script type="text/javascript" src="kinetic-v5.1.0.min.js"></script>

作成のために Kinetic にバインディングを追加します ステージのコンテナたとえば、 < div > にすることができます:

<div id="“container”"></div>

ページがロードされたときに描画します

window.onload = function() {    // 定义全局变量    var sw = 578;    var sh = 400;     //创建Kinetic舞台，绑定我们添加的<div>容器    var stage = new Kinetic.Stage({         container : “container”, //<div>的id         width : 578, //创建的舞台宽度         height : 400 //创建的舞台高度    });     //创建Kinetic用户层    var layer = new Kinetic.Layer();}</div></div>

左目と右目を描画します

まず、Kinetic オブジェクトを作成し、Line() メソッドを呼び出す必要があります。引きを進めます。

キネティックツールキットのメソッドを使用して、左目と右目を描画します

// 创建一个Kinetic线形对象var leftEye = new Kinetic.Line({    x: 150,  // x轴位置    points: [0, 200, 50, 190, 100, 200, 50, 210],  // 位置点    tension: 0.5,  // 线条弹性    closed: true,    stroke: 'white', // 线条颜色    strokeWidth: 10  // 线条宽度});

// 创建一个Kinetic线形对象var rightEye = new Kinetic.Line({    x: sw - 250,    points: [0, 200, 50, 190, 100, 200, 50, 210],    tension: 0.5,    closed: true,    stroke: 'white',    strokeWidth: 10   });// 向用户层中添加上面的线形layer.add(leftEye).add(rightEye);// 将上面的用户层添加到舞台上stage.add(layer);

鼻と口を描画します

鼻と口を描画します

var nose = new Kinetic.Line({    points: [240, 280, sw/2, 300, sw-240,280],    tension: 0.5,    closed: true,    stroke: 'white',    strokeWidth: 10});var mouth = new Kinetic.Line({    points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],    tension: 0.5,    closed: true,    stroke: 'red',    strokeWidth: 10});

左目と右目のアニメーション

ピエロの左右の目が動く、監視が必要 ポインターが要素の上にあるとき (マウスオーバー) とマウスが要素から離れるとき (マウスアウト) にアニメーション操作を実行するためにイベントが使用されます。

var leftEyeTween = new Kinetic.Tween({    node: leftEye,    duration: 1,    easing: Kinetic.Easings.ElasticEaseOut,    y: -100,    points: [0, 200, 50, 150, 100, 200, 50, 200]});

var rightEyeTween = new Kinetic.Tween({    node: rightEye,    duration: 1,    easing: Kinetic.Easings.ElasticEaseOut,    y: -100,    points: [0, 200, 50, 150, 100, 200, 50, 200]});

鼻と口のアニメーション

var noseTween = new Kinetic.Tween({    node: nose,    duration: 1,      easing: Kinetic.Easings.ElasticEaseOut,    y: -100,    points: [220, 280, sw/2, 200, sw-220,280]}); 

var mouthTween = new Kinetic.Tween({    node: mouth,    duration: 1,    easing: Kinetic.Easings.ElasticEaseOut,    points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]

時計効果、画像の拡大縮小とトリミング、キャンバスのシンプルで実用的なチャート - Chart.js
を参照してください: http://hubwiz.com/coursehubwiz。 com/course /55adf42f3ad79a1b05dcbff0/