前ページでは life がなくなった時の処理、 .completion{ } を紹介しました。 ここでは .completion{ } を活用して、図形を再利用してアニメーションを繰り返してみましょう。

  1. PGCircle() を書きます。

  2. フレームごとの移動量 .deltaPosition( dx:0.0, dy:-1.0 ) を指定します。

  3. 初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。

  4. フレームごとの減り量として、 .deltaLife( -0.01 ) と deltaAlpha( -0.01 ) を指定します。

  5. .completion のブロック内で図形を再設定します。 .position(), .life(), .alpha() を使って、それぞれ初期化します。

  6. フレーバーとして .color( .random ) を追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

func design( screen:PGScreen ) {
   PGCircle()
   .deltaPosition( dx:0.0, dy:-1.0 )
   .life( 1.0 )
   .deltaLife( -0.01 )
   .alpha( 1.0 )
   .deltaAlpha( -0.01 )
   .completion {
       $0
       .position( cx:0, cy:0 )
       .life( 1.0 )
       .alpha( 1.0 )
       .color( .random )
   }
}
  1. 「コードを実行」を押します。

目標

  • 円が下に移動しながら消えます。円が消えたあと、中央から異なる色の円が再度現れ、繰り返しアニメーションすれば成功です。

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

  • Note: .completion は interval 同様にクロージャ関数を指定します。図形の life が0になった時に一度だけクロージャが実行されます。$0 は呼び出している図形自身です( inteval と同様です)。ただしこの completion 内で、再度lifeが0.0より大きな値となった場合、図形は削除されないようになります。