Animation prototyping

potatotips #11

Transcript

1. Animation prototyping potatotips #11
2. @yskm_ Profile • ࡾӜ ܚथ (yoshiki miura) • Cookpad Inc. (2014೥9݄~) • ϞόΠϧϑΝʔετࣨॴଐ • iOSΞϓϦ։ൃ • Pie
3. εΫϩʔϧϏϡʔͷ Ҿ͖Լ͛Ξχϝʔγϣϯͷϓϩτ࡞੒ with playground
5. PlaygroundͰΞΠίϯΛࢼ࡞
6. http://techlife.cookpad.com/entry/2014/11/12/170041
7. // όοξͷഎܠΛඳը͢Δ let rect = CGRectMake(0, 0, 96, 36) let roundCorner = UIRectCorner.TopLeft | UIRectCorner.BottomRight let roundSize = CGSizeMake(6.0, 6.0) let path = UIBezierPath(roundedRect: rect, byRoundingCorners: roundCorner, cornerRadii: roundSize) UIColor(red: 0.35, green: 0.78, blue:1.0, alpha: 1.0).setFill() path.fill() ! // จࣈΛඳը͢Δ let attrString = NSAttributedString( string: "͓͢͢Ί", attributes:[NSForegroundColorAttributeName: UIColor.whiteColor(), NSFontAttributeName: UIFont.boldSystemFontOfSize(20.0)]) attrString.drawAtPoint(CGPointMake(6, 4))
9. var degree:CGFloat = 360.0 // <- ԁप (360.0) degree -= 90.0 var radian:CGFloat = ((degree) / 180.0 * CGFloat(M_PI)) var path = UIBezierPath() path.lineCapStyle = kCGLineCapRound path.moveToPoint(CGPoint(x: 0, y: 0)) //<- ઢͷ௕͞ path.addLineToPoint(CGPoint(x: 0, y: 10)) path.addArcWithCenter(CGPointMake(0, 16), radius: 7, startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(radian), clockwise: true) //<- ԁͷେ͖͞ UIBezierPathͷ࡞੒
10. var angle = 0.75 var shapeLayer = CAShapeLayer() shapeLayer.path = path.CGPath shapeLayer.lineWidth = 2.0 shapeLayer.strokeColor = UIColor.blackColor().CGColor shapeLayer.fillColor = UIColor.clearColor().CGColor shapeLayer.bounds = CGPathGetBoundingBox(path.CGPath) shapeLayer.anchorPoint = CGPointMake(0.5, 0.7) shapeLayer.position = CGPointMake(100, 100) var transform = shapeLayer.transform shapeLayer.transform = CATransform3DRotate(transform, CGFloat(M_PI*angle), 0, 0, 1.0) ! canvas.layer.addSublayer(shapeLayer) CAShapeLayerͷ࡞੒
11. ϓϩύςΟΛௐ੔͢Δ
12. ϓϩδΣΫτϑΝΠϧʹҠ২ͯ͠ εΫϩʔϧϏϡʔͱ࿈ಈͤ͞Δ
13. Storyboard
14. ViewController.swift func scrollViewDidScroll(scrollView: UIScrollView) { var value = scrollView.contentOffset.y if(value <= 0 && value >= -50) { iconView.update(-value * 2)ɹ //※ΞΠίϯΛΞοϓσʔτ } else if(value <= -50) { iconView.update(100) } else if(value > 0) { iconView.update(0) } if (value < -50) { if(!isSearch) { UIView.animateWithDuration(0.3, animations: { self.searchBarView.alpha = 1.0 } ) isSearch = true } } else { if(isSearch) { UIView.animateWithDuration(0.3, animations: { self.searchBarView.alpha = 0.0 } ) isSearch = false } } } }
15. SearchIconView.swift func setup() { shapeLayer = CAShapeLayer() shapeLayer.path = self.drawPath(0.0).CGPath shapeLayer.lineWidth = 2.0 shapeLayer.strokeColor = UIColor(white: 0.5, alpha: 1.0).CGColor shapeLayer.fillColor = UIColor.clearColor().CGColor shapeLayer.bounds = CGPathGetBoundingBox(self.drawPath(370.0).CGPath) shapeLayer.anchorPoint = CGPointMake(0.5, 0.7) shapeLayer.position = CGPointMake(25, 12) var transform = shapeLayer.transform shapeLayer.transform = CATransform3DRotate(transform, CGFloat(M_PI)*angle, 0, 0, 1.0) self.layer.addSublayer(shapeLayer) }
16. func drawPath(degree: CGFloat) -> UIBezierPath { var dy:CGFloat = 0.0 var d:CGFloat = degree if(degree < 360.0) { dy = 0.0 d -= 90.0 } else { dy = (degree-360)*0.5 d = 270.0 } var radian:CGFloat = (d) / 180.0 * CGFloat(M_PI) var path = UIBezierPath() path.lineCapStyle = kCGLineCapRound path.addArcWithCenter(CGPointMake(0, 16), radius: 7, startAngle: CGFloat(-M_PI_2), endAngle: radian, clockwise: true) if(degree > 360.0) { path.moveToPoint(CGPoint(x: 0, y: 10)) path.addLineToPoint(CGPoint(x: 0, y: 10-dy)) } return path }
17. func update(value:CGFloat) { var degree:CGFloat = value * 3.7 shapeLayer.path = self.drawPath(degree).CGPath angle = value * 0.0075 var transform = CATransform3DIdentity CATransaction.begin() CATransaction.setAnimationDuration(0) shapeLayer.transform = CATransform3DRotate(transform, CGFloat(M_PI)*angle, 0, 0, 1.0) var py = value * 0.12 shapeLayer.position = CGPointMake(25, 12+py) CATransaction.commit() }
18. Finish!
19. Thank you for your attention.