Two.jsはアニメーションを囲むオブジェクトを作成します

今回は Two.js を使ってアニメーションを囲むオブジェクトを作成する方法を紹介します Two.js を使ってアニメーションを囲むオブジェクトを作成する際の注意事項は次のとおりです。 、見てみましょう。

Two.js は、最新の Web ブラウザー用の 2D 描画 API です。 Two.js は、SVG、

Canvas、WebGL などのさまざまな状況で使用でき、フラットな形状やアニメーションの作成をより簡単かつシンプルにすることを目的としています。

Two.js には、他のアニメーション ライブラリと連携して動作するアニメーション ループが組み込まれています。 Two.js にはスケーラブルな

vectorshape インタープリターが含まれており、開発者もデザイナーも同様に Adob​​e Illustrator などの商用アプリケーションで SVG 要素を作成し、Two.js の使用シナリオに取り込むことができます。

以下はコアの js コードです。HTML は貼り付けられません。2 つの.js ファイルを導入する必要があります:

var elem = document.getElementById('draw-animation');
var two = new Two({ width: 700, height: 700 }).appendTo(elem);
//外层大运行轨迹
var track = two.makeCircle(0, 0, 200);
track.fill='transparent';
track.stroke='#3366FF';
track.linewidth=3;
//sun
var sun = two.makeCircle(0,0,80);
sun.fill='#FF8000';
sun.stroke='#FF0000';
sun.linewidth=5;
//earth
var earth = two.makeCircle(0,0,50);
earth.fill='#9ACD32';
//moon
var moon = two.makeCircle(100,0,30);
moon.fill='#1C75BC';
//inline 小的运行轨迹
var inline = two.makeCircle(0,0,100);
inline.stroke='#3366FF';
inline.fill='transparent';
inline.linewidth=3;
//group 分组 一类型为一组
var group = two.makeGroup(inline,earth,moon);
console.dir(group);
var group1 = two.makeGroup(sun,track,group);
 
group1.translation.set(two.width / 2, two.height / 2); //平移(x,y)父元素的一半
group.translation.set(200, 0); 
group.scale = 0.8; //比例
two.bind('update', function(frameCount) {//执行动画
  group1.rotation += 0.01 *2* Math.PI;
  group.rotation += 0.01 * Math.PI;
}).play();

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容をご覧ください。 PHP 中国語 Web サイトの他の関連記事へ!

推奨読書:

以上がTwo.jsはアニメーションを囲むオブジェクトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。