1-4. タッチと図形のアニメーション2 - 移動と複数描画

前のページでは、タッチで生成した図形に大きさや角度のアニメーションを加えました。

今回は、1度のタッチで複数の図形を描き、動かしてみましょう。

design関数に screen.clearColor = .white を書きます。背景は白に設定します。
update関数を用意します。
if screen.touches.count == 0 { return }を書きます。タッチしている指の数が0のとき、図形を描かないようになります。
let touch = screen.latestTouchを書きます。最新のタッチ情報を取得します。
for _ in 0 ..< 4を書きます。1度のタッチで4つの図形を生成します。
for分の中でPGRectangle()を書きます。
PGRectangle()に前ページと同様の記述を追加します。ただし、let d_scaleのランダム値の範囲は(0.25...0.5).randomizeに変更します。
次に、.deltaPosition(dx:dy)を追加し、(-2.0...2.0).randomizeでランダムな方向に図形が移動するようにします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


func design( screen:PGScreen ) {
    screen.clearColor = .white
}

func update( screen:PGScreen ) {
    if screen.touches.count == 0 { return }
    
    let touch = screen.latestTouch
    
    for _ in 0 ..< 4 {
        let d_scale = (0.25...0.5).randomize
        
        PGRectangle()
        .position( touch.xy )
        .deltaPosition(
            dx:(-2.0...2.0).randomize,
            dy:(-2.0...2.0).randomize
        )
        .color( .random )
        .scale( .zero )
        .angle( .random )
        .deltaAngle( degrees:1.0 )
        .deltaScale( 
            dw:d_scale,
            dh:d_scale            
        )
        .deltaLife( -0.01 )
        .deltaAlpha( -0.01 )
    }
}

「コードを実行」を押します。

目標

実行後、タッチの軌跡から四角が拡散し、紙吹雪のようなエフェクトが表示されたら成功です。

終わったら次のページへ進みます。

目標#

目標