1-3. タッチと図形のアニメーション1　- 回転とズーム

前のページでは、タッチ位置に図形を生成し、.lifeの値を用いて徐々に消えていくようにしました。前のフレームで描いた図形が少し残るため、タッチの軌跡を表現できました。

今回は、図形の角度と大きさの変化を加えて、図形の表現を豊かにしていきましょう。

design関数に screen.clearColor = .white を書きます。背景は白に設定します。
update関数を用意します。
if screen.touches.count == 0 { return }を書きます。タッチしている指の数が0のとき、図形を描かないようになります。
let touch = screen.latestTouchを書きます。最新のタッチ情報を取得します。
let d_scale = (0.5...1.0).randomizeを書き、0.5~1.0のランダム値をd_scaleに代入します。後述する.deltaScaleに用います。
PGRectangle() を書きます。
PGRectangle()に .position( touch.xy )を加えます。前ページと同様です。
続けて、.color( .random ), .scale( .zero ), .angle( .random )を追加します。図形作成時の初期値です。色、角度はランダム、大きさはゼロにします。
次に、.deltaAngle( degrees:1.0 )を追加して回転を加えます。また.deltaScale(dw:dh)を追加し、変数d_scaleを用いて拡大を行います。
.deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を前ページと同様に追加します。lifeが減っていき、同時にalphaも減らすことで透明になっていきます。

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


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

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

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

目標

実行後、タッチの軌跡に回転と拡大する四角が描画がされれば成功です。

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

目標#

目標