2-1. 視覚表現の導入コード

前の章で、アニメーションで使う基本的な操作を学びました。この章では、機能を組み合わせて視覚表現を作っていきましょう。

はじめに、ランダムにたくさんの四角がアニメーションする視覚表現を目指します。

ここでは、まず複数の円を描き、フェードアウトを繰り返すアニメをつくります。

forで繰り返し、20個のPGRectangle() を書きます。
.position()はランダム座標のscreen.randomPointを指定します。 .color(), .life() は .random、そして deltaLife() には-0.01を指定して初期化します。
続けて、.completion{ } で再利用を行います。 .position()はランダム座標で初期化、 .life()は1.0に戻します。 .color()　はランダムにしましょう。
続けて .iterate{ } を書きます。そのブロック内で $0.alpha( $0.life ) を書きます。

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


func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0.alpha( $0.life )
       }
   }
}

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

目標

ランダムに表示される四角が薄くなって消えていき、別のところに四角が現れるアニメーションが描けたら成功です。

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

Note: .iterate{ } で $0.alpha( $0.life ) を指定することでlifeの値に合わせて透けていく表現ができます。

目標#

実行例#

目標

実行例