はじめに
SpriteKit でシーンを遷移させるときのアニメーションには SKTransition を使います。
今回は SKTransition についてのまとめです。
SKTransition には下記がある模様。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class func crossFade(withDuration: TimeInterval) -> SKTransition class func doorsCloseHorizontal(withDuration: TimeInterval) -> SKTransition class func doorsCloseVertical(withDuration: TimeInterval) -> SKTransition class func doorsOpenHorizontal(withDuration: TimeInterval) -> SKTransition class func doorsOpenVertical(withDuration: TimeInterval) -> SKTransition class func doorway(withDuration: TimeInterval) -> SKTransition class func fade(with: UIColor, duration: TimeInterval) -> SKTransition class func fade(withDuration: TimeInterval) -> SKTransition class func flipHorizontal(withDuration: TimeInterval) -> SKTransition class func flipVertical(withDuration: TimeInterval) -> SKTransition class func moveIn(with: SKTransitionDirection, duration: TimeInterval) -> SKTransition class func push(with: SKTransitionDirection, duration: TimeInterval) -> SKTransition class func reveal(with: SKTransitionDirection, duration: TimeInterval) -> SKTransition init(ciFilter: CIFilter, duration: TimeInterval) |
crossFade
実装。
|
1 |
view?.presentScene(scene, transition: .crossFade(withDuration: 2.0)) |
doorsCloseHorizontal
実装。
|
1 |
view?.presentScene(scene, transition: .doorsCloseHorizontal(withDuration: 2.0)) |
doorsCloseVertical
実装。
|
1 |
view?.presentScene(scene, transition: .doorsCloseVertical(withDuration: 2.0)) |
doorsOpenHorizontal
実装。
|
1 |
view?.presentScene(scene, transition: .doorsOpenHorizontal(withDuration: 2.0)) |
doorsOpenVertical
実装。
|
1 |
view?.presentScene(scene, transition: .doorsOpenVertical(withDuration: 2.0)) |
doorway
実装。
|
1 |
view?.presentScene(scene, transition: .doorway(withDuration: 2.0)) |
fade
実装。
|
1 2 |
view?.presentScene(scene, transition: .fade(with: .systemGreen, duration: 2.0)) view?.presentScene(scene, transition: .fade(withDuration: 2.0)) |
色設定
通常のフェード
flipHorizontal
実装。
|
1 |
view?.presentScene(scene, transition: .flipHorizontal(withDuration: 2.0)) |
flipVertical
実装。
|
1 |
view?.presentScene(scene, transition: .flipVertical(withDuration: 2.0)) |
moveIn
実装。
|
1 2 |
// directionはup, down, right, leftの４つ view?.presentScene(scene, transition: .moveIn(with: .up, duration: 2.0)) |
push
実装。
|
1 2 |
// directionはup, down, right, leftの４つ view?.presentScene(scene, transition: .push(with: .up, duration: 2.0)) |
reveal
実装。
|
1 2 |
// directionはup, down, right, leftの４つ view?.presentScene(scene, transition: .reveal(with: .up, duration: 2.0)) |
CIFilter
CITransitionFilterというのがいくつか用意されている模様。
実装。
|
1 2 3 4 5 6 7 8 9 10 11 |
view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIAccordionFoldTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIBarsSwipeTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CICopyMachineTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIDisintegrateWithMaskTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIDissolveTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIFlashTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIModTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIPageCurlTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIPageCurlWithShadowTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CIRippleTransition")!, duration: 2.0)) view?.presentScene(scene, transition: .init(ciFilter: CIFilter(name: "CISwipeTransition")!, duration: 2.0)) |
CIAccordionFoldTransition
CIBarsSwipeTransition
CICopyMachineTransition
CIDisintegrateWithMaskTransition
CIDissolveTransition
CIFlashTransition
CIModTransition
CIPageCurlTransition
CIPageCurlWithShadowTransition
CIRippleTransition
CISwipeTransition
おわりに
これで遷移時のアニメーションも自由自在です！
https://amzn.to/410g9vl
amzn.to
コメント