2-4. 回転表現の追加

前ページで、四角の移動のアニメーションを加えました。次に、回転を加えてみましょう。

前ページと同じコードを書きます。
PGRectangle()に .angle() を追加します。値はランダムを指定します。続けて .deltaAngle(degrees:) を追加します。値は1.0を指定します。
.completion{ } 内の$0に .angle() を追加し、ランダムで初期化します。

 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


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 )
       }
   }
}

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

目標

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

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

目標#

目標