2-3. 移動表現の追加

前ページで、四角のアニメーションにスケーリングの変化を加えました。次に、ランダムな移動を加えてみましょう。

前ページと同じコードを書きます。
PGRectangle()に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。
.completion{ } 内の$0に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.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


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 )
       .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 )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}

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

目標

ランダム表示の四角が薄く大きくなりながら、ランダムに移動する絵が表示されたら成功です。

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

目標#

目標