2-5. 加速する

前ページで、四角のアニメーション表現を一通り作成しました。

ここでは、アニメーションを少し工夫してみます。毎フレームの処理を参考に、 .iterate{ } で計算を加えて四角を加速させましょう。

前ページと同じコードを書きます。
.iterate{ } 内の$0 に .deltaPosition(dx:dy:) を追加します。deltaPosition.x と deltaPosition.y を 1.04倍した値 を設定します。1フレームごとに移動量が増えていきます。

 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
31
32
33
34
35
36
37


func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0
           .alpha( $0.life )
           .deltaPosition( 
             dx:$0.deltaPosition.x * 1.04,
             dy:$0.deltaPosition.y * 1.04
           )
       }
   }
}

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

目標

四角がだんだん加速する動きが描けたら成功です。

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

目標#

目標