to pagetop
:)
spec5zigen Creator's Lab.

プログラマの鷺谷です。夏です。暑いです。
おまけに帰省先にはエアコンがありませんでした。

夏のCALayerマスク

猛暑らしく、iOSネイティブアプリ + 涼しいお化けのお話。
少し前に横スクロールするメニューに
左右がジワッと消えてゆくグラデーション付きのマスクを使うアプリを実装しました。

横スクロールするメニューのUI

グラデーション付きのマスクを使うメニュー



夏にじわっと消えるものといえば・・というわけで
メニューで使ったマスクを活用してお化けの出るアプリを作ってみました。

CALayerのグラデーション

CAGradientLayerは直線のグラデーションしか使えません。
凝ったグラデーションでマスク作るには画像でグラデーションを作って
CALayerのマスクとして使用する方法があります。

画像の準備

画像を3つ準備します。

まずは背景となる仏壇の部屋(bg.png)。
送り火が終わったのでみなさん仏壇からもうお帰りになったはずなので、
何も写らないはずですが・・

背景画像

背景画像(bg.png)



あー、あの人がいらっしゃいます。残業ですね。お疲れ様です。
マスク対象のあの人画像(image.png)

あの人画像

マスク対象のあの人画像(image.png)



でも足があるとカッコ悪いのでそれらしく消してあげましょう。
グラデーションのマスク画像(mask.png)
※あの人とマスクは実際の画像では背景は透明のpng画像です。説明用に透明部分を着色しています。

グラデーションのマスク画像

グラデーションのマスク画像(mask.png)



アプリに仕立てる

肝心の部分だけ抜粋すると・・
1・マスク用CALayerを用意
2・マスク用CALayerのcontentsにマスク画像をセット
3・あの人画像のUIViewのlayer.maskに用意したマスク用CALayerを指定
これでOKです。

アウトレットself.oImgはマスク対象のあの人画像(image.png)です。

	UIImage *img = [UIImage imageNamed:@"mask.png"];
	CALayer *mask = [CALayer layer];
	mask.contents = (id)[img CGImage];
	mask.frame = CGRectMake(0,0,img.size.width,img.size.height);
	self.oImg.layer.mask = mask;

こんな感じのアプリができました

起動直後は足があります。

アプリ初期状態

起動直後は足があります。



[ghost]ボタンをタップするとお化け効果で足がボワーっと消えます。

お化け効果適用後

お化け効果適用後



マスク画像の作り方

マスクは黒の多い画像で使用した場合ならミスったと白く表示されてすぐわかるので白でつくりました。
ピクセルのアルファ値に応じてマスク対象の画像を表示させることができます。
透明かどうかだけ定義できればマスクの画像は赤でも黒でもOKです
わかりやすくするために例えばこのようなマスク画像と入れ替えてビルドしてみると・・

テスト用マスク画像

テスト用マスク画像



アプリを実行するとマスクの色とアルファ値がこのように反映されます。
色は無視されてアルファ値だけで解釈されています。

マスクのテスト結果

マスクのテスト結果



マスクのアニメーション

CALayerですから当然アニメーションもできます。
[animate]ボタンをタップするとで足のぼかしが上下に動きます。

アニメーション

アニメーション



マスクのレイヤの位置を変えます。
このアプリではlayer.mask.position.yを変化させて動かしています。

	CGPoint fromPt = self.oImg.layer.mask.position;
	CGPoint toPt = fromPt;
	CGFloat baseY = self.oImg.layer.mask.frame.size.height / 2.0;
	if(fromPt.y == baseY){
		toPt.y = baseY - 30;
	}
	else{
		toPt.y = baseY;
	}

業務連絡

左のヒザあたりに仕込みじゃない女の人がいますが気にしないでください。