Rubyでどう書く？：RubyCocoa＋Core Animationでお手軽アニメーション

問題

　RubyCocoaは、Mac OS XのCocoaオブジェクトをRubyスクリプトからRubyオブジェクトとして扱うための、Ruby用ライブラリとフレームワークです。RubyCocoaを用いれば、RubyでCocoaアプリケーションを記述することができるのです。

　Core AnimationはMax OS Xのフレームワークで、その利点は手軽さにあります。普通にアニメーションプログラミングを行おうとすると、時間軸管理、非同期な描画スレッド、パフォーマンスの向上など、考慮すべき点があまりにも多すぎます。

　しかし、Core Animationを用いれば、面倒な部分はOSに任せて、自分の実現したいことに集中できるのです。

　今回はRubyCocoaとMac OS XのフレームワークであるCore Animationを使って、お手軽にアニメーションを作成してみましょう。

回答例

　AppController.rbを作成し、以下のように記述します。

require 'osx/cocoa'
OSX.require_framework 'QuartzCore'

class AppController < OSX::NSObject
	ib_outlet :window
	ib_outlet :view
	ib_action :pressPosition
	ib_action :pressRotation
	ib_action :pressSepia
	ib_action :pressBloom
	ib_action :pressHole
	ib_action :pressZoom
	ib_action :pressHalftone
	
	def awakeFromNib
		bitmapImage = OSX::NSBitmapImageRep.imageRepWithContentsOfFile_('/Users/ssato/Pictures/ruby.png')
		image = bitmapImage.CGImage()

		layer = OSX::CALayer.layer()
		layer.contents = image
		layer.frame = OSX::CGRectMake(0,0,995/4,996/4)

		black=OSX::CGColorCreateGenericRGB(0,0, 0,1.0)
		backgroundLayer=OSX::CALayer.layer()
		backgroundLayer.backgroundColor=black

		backgroundLayer.addSublayer_(layer)

		@view.setLayer_(backgroundLayer)
		@view.setWantsLayer_(true)
	end
	def pressPosition(sender)
		animation = OSX::CABasicAnimation.animationWithKeyPath_('position')
		animation.duration = 1.0
		
		layer = @view.layer.sublayers.objectAtIndex_(0)
		position = layer.position
		animation.fromValue = OSX::NSValue.valueWithPoint_(OSX::NSPointFromCGPoint(position))
		position.x += 256;
		position.y += 160;
		animation.toValue = OSX::NSValue.valueWithPoint_(OSX::NSPointFromCGPoint(position))
		animation.autoreverses = true
		animation.repeatCount = 4
		layer.addAnimation_forKey_(animation, 'positionAnimation')
	end
	def pressRotation(sender)
		animation = OSX::CABasicAnimation.animationWithKeyPath_('transform')
		animation.duration = 0.5
		animation.autoreverses = true
		animation.repeatCount = 4
		transform = OSX::CATransform3DIdentity
		animation.fromValue = OSX::NSValue.valueWithCATransform3D(transform)
		transform = OSX::CATransform3DMakeRotation(Math::PI, 0, 1.0, 0)
		transform.m34 = 1.0 / -420.0
		animation.toValue = OSX::NSValue.valueWithCATransform3D(transform)
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.addAnimation_forKey_(animation, 'transformAnimation')
	end
	def pressSepia(sender)
		filter = OSX::CIFilter.filterWithName_('CISepiaTone')
		filter.setDefaults()
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.name = 'sepiaFilter'
		layer.setFilters_(OSX::NSArray.arrayWithObject_(filter))
	end
	def pressBloom(sender)
		filter2 = OSX::CIFilter.filterWithName_('CIBloom')
		filter2.setDefaults
		filter2.setValue_forKey_(OSX::NSNumber.numberWithFloat_(0.0), 'inputIntensity')
		filter2.setValue_forKey_(OSX::NSNumber.numberWithFloat_(5.0), 'inputRadius')
		filter2.setName_('bloomFilter')
		
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.setFilters_(OSX::NSArray.arrayWithObject_(filter2))

		pluseAnimation = OSX::CABasicAnimation.animation
		pluseAnimation.keyPath = 'filters.bloomFilter.inputIntensity'
		pluseAnimation.fromValue = OSX::NSNumber.numberWithFloat_(0.0)
		pluseAnimation.toValue = OSX::NSNumber.numberWithFloat_(1.5*2)
		pluseAnimation.duration = 1.0
		pluseAnimation.repeatCount = 4
		pluseAnimation.autoreverses = true
		layer.addAnimation_forKey_(pluseAnimation, 'bloom')
	end
	def pressHole(sender)
		filter = OSX::CIFilter.filterWithName_('CIHoleDistortion')
		filter.setDefaults()
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.setFilters_(OSX::NSArray.arrayWithObject_(filter))
	end
	def pressZoom(sender)
		filter = OSX::CIFilter.filterWithName_('CIZoomBlur')
		filter.setDefaults()
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.setFilters_(OSX::NSArray.arrayWithObject_(filter))
	end
	def pressHalftone(sender)
		filter = OSX::CIFilter.filterWithName_('CICMYKHalftone')
		filter.setDefaults()
		layer = @view.layer.sublayers.objectAtIndex_(0)
		layer.setFilters_(OSX::NSArray.arrayWithObject_(filter))
	end
end

　Interface Builderで画像1のようにコンポーネントを配置します。

画像1

　NSObjectを追加して、ClassにAppcontrollerを指定します（画像2）。

画像2

　OutletsとActionsのConnectionを画像3のように設定します。

画像3

実行結果

　Positionボタンを押すと、画像が斜めに移動します（画像4）。

画像4

　Rotationボタンを押すと画像が回転し、Sepiaをクリックすると画像がセピア色になります（画像5）。

画像5

　同様に、Bloomは画像が光り輝き（画像6）、Holeは画像に穴が空きます（画像7）。Zoomボタンはズームエフェクト（画像8）で、Halftoneはハーフトーンフィルタです（画像9）。

画像6

画像7

画像8

画像9

解説