H5+JSによる2次元アニメーション制作例

今日は、インターネット上であまり使用されていないプラグイン two.js を紹介します。私が学習を始めた当初、インターネット上に適切なチュートリアルがなかったことがわかりました。ここで基本的な操作を公開します。指定した領域に様々な自作アニメーション効果を演出できるWeb二次元描画ソフトです

ダウンロードURLは以下の通りです:

class1:

One: 使い方:

まずjsファイルを導入しますページ:

    <script></script>

Web コンソールを開き、2 を入力します。図に示すように、配列が返された場合は、それが有効になっていることがわかります:

選択範囲として div を作成します

<div></div>
        <style>
            #draw-shapes{
                border: 1px  solid blue;
                width: 400px;
                height: 300px;
                background-color: green;
            }            </style>

上記のdivをJSで選択

var elem = document.getElementById('draw-shapes');//选中页面上的div

2つ: 空間と空間を作成する Shape:

上記の操作が完了したら、2次元空間操作を作成します

  = { width: , height:  }; 

 two =  Two().appendTo(elem);

グラフィックを作成する:

var circle = two.makeCircle(72, 100, 50);//创建圆形（x坐标，y坐标，半径）var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形（x，y，宽，高）

3: グラフィックのプロパティを調整する:

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 rect.noStroke();//去掉边线

4: Web ページに投影する:

生成されたスペースとグラフィックを Web ページに投影するには、次のコマンドを入力する必要があります:

two.update();

効果ウェブページ上では図のようになります

5: グループの役割と確立:

グループは複数のグラフィックを組み合わせることができますグループに結合すると、グループは同じ属性と効果を設定できます

グラフィックスがある場合は、次のコードを実行できます:

var group = two.makeGroup(circle, rect);

2 つのグラフィックスをグループに入れます

// 可以对组内所有形状进行属性设定group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移，使中心保持在二维空间的什么位置group.rotation = Math.PI;//旋转group.scale = 0.75;//缩放        
        group.linewidth = 7;//统一设置线宽

上記のコマンドを通じて、グループ内のすべての図形に対して同じ操作を実行します

上の図は、操作後の 2 つの形状の効果を示しています。

今日はここまでです。次回はアニメーション効果の作成方法を詳しく説明します

それを学んだ友達は、ぜひ「いいね」をしてください！

以上がH5+JSによる2次元アニメーション制作例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。