Swift Animation

Transcript

1. Swift Animation Yuto Akiba (@akkey0222)
2. ࣗݾ঺հ • ळ༿ ༞ਓ(Yuto Akiba) • @akkey0222 • ໋ཱؗେֶ ৘ใཧ޻ֶ෦ 2ճੜ • झຯ΍ΞϧόΠτͰiOSΞϓϦΛ։ൃ
3. ϦϦʔεதͷΞϓϦ R-Portable Librarian
4. Ξχϝʔγϣϯͱ͍͑͹ɺ
5. UIView.animateWithDuration UIView.animateWithDuration(1.0, animations: { })
6. UIView.animateWithDuration UIView.animateWithDuration(1.0, animations: { }) ࢖͍·ͤΜʂʂ
7. ͡Ό͋ɺͳʹΛ࢖͏ʁ
8. Core Animation
9. ͲΜͳ͜ͱ͕Ͱ͖Δʁ
10. iOSͷϩοΫը໘෩ͷ
 จࣈͷΞχϝʔγϣϯ ϚςϦΞϧσβΠϯ෩
 ϘλϯͷΞχϝʔγϣϯ 3D Ξχϝʔγϣϯ
11. ͍ΖΜͳϦονͳ
 ΞχϝʔγϣϯΛ࡞ΕΔʂ
12. 1.iOSͷϩοΫը໘෩ͷจࣈͷΞχϝʔγϣϯ
 2.3D Ξχϝʔγϣϯ
13. iOSͷϩοΫը໘෩ͷ
 จࣈͷΞχϝʔγϣϯ
14. CALayerͱMask
15. + → let blueLayer = CALayer() let blueImage = UIImage(named: "blue") blueLayer.contents = blueImage?.CGImage let twitterMask = CALayer() let twitterImage = UIImage(named: "twitter") twitterMask.contents = twitterImage?.CGImage blueLayer.mask = twitterMask blueLayer twitterMask
16. CALayerΛ࢖͏ͱ
 ؆୯ʹMaskͰ͖Δ
17. จࣈͷΞχϝʔγϣϯ
 ʹ΋MaskΛར༻ʂ
18. slide to unlock CALayer CAGradientLayer
19. CALayerΛ࢖ͬͯจࣈྻΛඳը // จࣈྻΛը૾ʹม׵ let text = "slide to unlock" UIGraphicsBeginImageContextWithOptions(frame.size, false, 0) text.drawInRect(bounds, withAttributes: textAttributes) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() // ը૾ΛCALayerʹม׵ let maskLayer = CALayer() maskLayer.backgroundColor = UIColor.clearColor().CGColor maskLayer.frame = CGRectOffset(bounds, bounds.size.width, 0) maskLayer.contents = image.CGImage
20. CAGradientLayerͷੜ੒ let gradientLayer = CAGradientLayer() // άϥσʔγϣϯͷઃఆ gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5) let colors = [UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 1.0).CGColor, UIColor.whiteColor().CGColor, UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 1.0).CGColor] gradientLayer.colors = colors let locations = [0.25, 0.5, 0.75] gradientLayer.locations = locations
21. CAGradientLayerͷΞχϝʔγϣϯ // Animationͷઃఆ let gradientAnimation = CABasicAnimation(keyPath: "locations") gradientAnimation.fromValue = [-0.25, -0.25, 0.00] gradientAnimation.toValue = [1.00, 1.25, 1.25] gradientAnimation.duration = 2.0 gradientAnimation.repeatCount = Float.infinity gradientAnimation.removedOnCompletion = false gradientAnimation.fillMode = kCAFillModeForwards gradientLayer.addAnimation(gradientAnimation, forKey: nil)
22. ຊདྷͷߏ଄͸΋ͬͱෳࡶ (try! swiftͷTim Oliver͞ΜͷൃදΛࢀর)
23. 1.iOSͷϩοΫը໘෩ͷจࣈͷΞχϝʔγϣϯ
 2.3D Ξχϝʔγϣϯ
24. 3DΞχϝʔγϣϯ
26. func tapedImageView() { var transform = CATransform3DIdentity // ԕۙײ transform.m34 = -1.0 / 500 // ֯౓ let angle = -15.0 / 180.0 * CGFloat(M_PI) transform = CATransform3DRotate(transform, angle, 1, 0, 0) // Ξχϝʔγϣϯͷઃఆ let animation = CABasicAnimation(keyPath: "transform") animation.toValue = NSValue(CATransform3D: transform) animation.duration = 0.2 animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards imageView.layer.addAnimation(animation, forKey: "transform") // Ξχϝʔγϣϯͷ։࢝஍఺ imageView.layer.setAnchorPoint(CGPoint(x: 0.5, y: 0) , forView: view) }
27. func tapedImageView() { var transform = CATransform3DIdentity // ԕۙײ transform.m34 = -1.0 / 500 // ֯౓ let angle = -15.0 / 180.0 * CGFloat(M_PI) transform = CATransform3DRotate(transform, angle, 1, 0, 0) // Ξχϝʔγϣϯͷઃఆ let animation = CABasicAnimation(keyPath: "transform") animation.toValue = NSValue(CATransform3D: transform) animation.duration = 0.2 animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards imageView.layer.addAnimation(animation, forKey: "transform") // Ξχϝʔγϣϯͷ։࢝஍఺ imageView.layer.setAnchorPoint(CGPoint(x: 0.5, y: 0) , forView: view) }
28. m34ͬͯԿʁ (ಡΈํΘ͔Βͳ͍…)
30. AppleͷυΩϡϝϯτΛ ݟΔͱ…
32. ߦྻͷ࿩Β͍͠
33. ߦྻͱ࠲ඪͷม׵
34. ͔͜͜Βͪΐͬͱ
 ਺ֶతͳ࿩
35. Ҡಈ ม׵ޙͷ࠲ඪ ม׵લͷ࠲ඪ Ҡಈྔ xํ޲ʹtx, yํ޲ʹtyҠಈͤ͞Δ
36. ֦େɺॖখ ม׵ޙͷ࠲ඪ ม׵લͷ࠲ඪ ഒ཰ xํ޲ʹsxഒ, yํ޲ʹsyഒ֦େ(ॖখ)
37. ճస A(x, y) α y x r rcosα rsinα
38. ճస ఺A(1, 0), θ=90°ͷͱ͖ θճసͤ͞Δͱ
39. Ҏ্ͷ͜ͱ͔Β
40. ΞϑΟϯม׵
41. 2࣍ݩͷͱ͖ಉ༷ʹ
 3࣍ݩΛߟ͑Δͱ
42. ΞϑΟϯม׵
44. m34 = tz
45. m34͸z࣠ํ޲ͷ ҠಈྔΛࢦ͍ͯ͠ΔΒ͍͠
46. Ұൠతͳม׵Ͱ͸m**Λ
 ௚઀ૢ࡞͢Δඞཁ͸ͳ͍
47. func tapedImageView() { var transform = CATransform3DIdentity // ԕۙײ transform.m34 = -1.0 / 500 // ֯౓ let angle = -15.0 / 180.0 * CGFloat(M_PI) transform = CATransform3DRotate(transform, angle, 1, 0, 0) // Ξχϝʔγϣϯͷઃఆ let animation = CABasicAnimation(keyPath: "transform") animation.toValue = NSValue(CATransform3D: transform) animation.duration = 0.2 animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards imageView.layer.addAnimation(animation, forKey: "transform") // Ξχϝʔγϣϯͷ։࢝஍఺ imageView.layer.setAnchorPoint(CGPoint(x: 0.5, y: 0) , forView: imageView) }
48. func tapedImageView() { var transform = CATransform3DIdentity // ԕۙײ transform.m34 = -1.0 / 500 // ֯౓ let angle = -15.0 / 180.0 * CGFloat(M_PI) transform = CATransform3DRotate(transform, angle, 1, 0, 0) // Ξχϝʔγϣϯͷઃఆ let animation = CABasicAnimation(keyPath: "transform") animation.toValue = NSValue(CATransform3D: transform) animation.duration = 0.2 animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards imageView.layer.addAnimation(animation, forKey: "transform") // Ξχϝʔγϣϯͷ։࢝஍఺ imageView.layer.setAnchorPoint(CGPoint(x: 0.5, y: 0) , forView: imageView) }
49. extension CALayer { func setAnchorPoint(newAnchorPoint: CGPoint, forView view: UIView) { var newPoint = CGPointMake(self.bounds.size.width * newAnchorPoint.x, self.bounds.size.height * newAnchorPoint.y) var oldPoint = CGPointMake(self.bounds.size.width * self.anchorPoint.x, self.bounds.size.height * self.anchorPoint.y) newPoint = CGPointApplyAffineTransform(newPoint, view.transform) oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform) var position = self.position position.x -= oldPoint.x position.x += newPoint.x position.y -= oldPoint.y position.y += newPoint.y position.x = newPoint.x position.y = newPoint.y self.anchorPoint = newAnchorPoint self.position = position } }
50. AnchorPointͱ͸?
51. AnchorPoint = Ξχϝʔγϣϯͷத৺఺
53. func tapedImageView() { var transform = CATransform3DIdentity // ԕۙײ transform.m34 = -1.0 / 500 // ֯౓ let angle = -15.0 / 180.0 * CGFloat(M_PI) transform = CATransform3DRotate(transform, angle, 1, 0, 0) // Ξχϝʔγϣϯͷઃఆ let animation = CABasicAnimation(keyPath: "transform") animation.toValue = NSValue(CATransform3D: transform) animation.duration = 0.2 animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards imageView.layer.addAnimation(animation, forKey: "transform") // Ξχϝʔγϣϯͷ։࢝஍఺ imageView.layer.setAnchorPoint(CGPoint(x: 0.5, y: 0) , forView: imageView) }
54. (0.5, 0)
56. anchorPointͷ໰୊఺
57. imageView.layer.anchorPoint = CGPoint(x: 0.5, y: 0)
59. imageViewͷҐஔ΋
 มΘͬͯ͠·͏…
60. extension CALayer { func setAnchorPoint(newAnchorPoint: CGPoint, forView view: UIView) { var newPoint = CGPointMake(self.bounds.size.width * newAnchorPoint.x, self.bounds.size.height * newAnchorPoint.y) var oldPoint = CGPointMake(self.bounds.size.width * self.anchorPoint.x, self.bounds.size.height * self.anchorPoint.y) newPoint = CGPointApplyAffineTransform(newPoint, view.transform) oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform) var position = self.position position.x -= oldPoint.x position.x += newPoint.x position.y -= oldPoint.y position.y += newPoint.y position.x = newPoint.x position.y = newPoint.y self.anchorPoint = newAnchorPoint self.position = position } }
61. anchorPointͷҠಈʹ߹Θͤͯ positionΛҠಈͤͯ͞૬ࡴ
62. ·ͱΊ
63. ͪΐͬͱ΍΍͍͚͜͠Ͳ
 ϦονͳΞχϝʔγϣϯ͕
 ࡞Εָ͍ͯ͠
64. ͋Γ͕ͱ͏͍͟͝·ͨ͠