前ページで、四角のアニメーションの基盤コードを作りました。 このコードに、スケーリングの効果を加えましょう。

  1. 前ページと同じコードを書きます。

  2. PGRectangle()に、.scale(square:) と .deltaScale(dw:dh:) を追加します。

  3. .completion{ } 内の $0に scale(square:) を追加します。

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

func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .scale( square: 0.0 )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}
  1. 「コードを実行」を押します。

目標

  • ランダム表示の四角が薄くなりながら大きくなっていく絵が表示されたら成功です。

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