Building Visually Rich User Experiences

Transcription

1 Session App Frameworks #WWDC17 Building Visually Rich User Experiences 235 Noah Witherspoon, Software Engineer Warren Moore, Software Engineer 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Platform overview Core Animation best practices Tips and tricks

3 Color space Render server Timing functions Pixel format Interpolation Projection Filter chain Convolution Dithering Transform matrix Shader Multisampling Image unit Blend mode Transition Presentation layer Fill mode Texture atlas Content gravity Compositing Post-processing Depth buffer Graphics context Rasterization Mask Framebuffer Vibrancy Shadow mapping Offscreen pass Interpolator Winding order Pipeline descriptor Sprite Minification filter

4 Platform Overview

5 UIKit and AppKit

6 UIKit and AppKit

7 Core Animation

8 Core Animation

9 Core Graphics

10 Core Image

11 Core Image Filter

12 Core Image Filter Filter

13 Core Image Filter Filter Filter Filter

14 SceneKit and SpriteKit

15 Metal

16

17 Platform Overview UIKit/AppKit Core Animation Core Graphics/Core Image SceneKit/SpriteKit Metal

18 Demo Warren Moore

19 Core Animation Best Practices

20 Animations

21 Animations

22 Animations

23 Animations Model Presentation

24 Animations Model Presentation Animation Animation

25 Animations Model Presentation Animation Animation animation.removedoncompletion = false animation.fillmode = kcafillmodeforwards

26 Animations To value Model Presentation Animation Animation To value

27 Animations let animation = let animation = CABasicAnimation(keyPath: "opacity") animation.duration = 0.5 animation.fromvalue = 1 animation.tovalue = 0 layer.add(animation, forkey: nil) layer.opacity = 0

28 Animations Be aware of model/presentation layers Apply final state when adding animations

29 Transforms and Frames layer.frame = CGRect(x: 0, y: 0, width: 200, height: 100)

30 Transforms and Frames layer.transform = CGAffineTransform(scaleX: 0.25, y: 0.25)

31 Transforms and Frames layer.transform = CGAffineTransform(scaleX: 0.25, y: 0.25)

32 Transforms and Frames layer.frame = CGRect(x: 0, y: 0, width: 200, height: 100)

33 Transforms and Frames layer.frame = CGRect(x: 0, y: 0, width: 200, height: 100)

34 Transforms and Frames layer.transform = CGAffineTransform(rotationAngle: 0.2)

35 Transforms and Frames layer.transform = CGAffineTransform(rotationAngle: 0.2)

36 Transforms and Frames transform 25% scale frame bounds

37 Transforms and Frames layer.transform = CATransform3D(scaleX: 0.25, y: 0.25) // let newframe = CGRect(x: 0, y: 0, width: 200, height: 100) layer.frame = newframe

38 Transforms and Frames layer.transform = CATransform3D(scaleX: 0.25, y: 0.25) // let newframe = CGRect(x: 0, y: 0, width: 200, height: 100) layer.bounds = CGRect(x: 0, y: 0, width: newframe.width, height: newframe.height) layer.position = CGPoint(x: somerect.midx, y: somerect.midy)

39 Transforms and Frames Frame is affected by transform Set bounds/position directly instead

40

41 Mask

42 Mask Shadow

43 !"#$ Mask %&'( *+, -./ :;<

44 !"#$ %&'( *+, -./ :;<

45 !"#$ %&'( *+, -./ :;<

46

47 Multiple Masks!"#$ %&'( *+, -./ :;<

48 Multiple Masks!"#$ %&'( *+, -./ :;< %&'( *+, -./ :;<

49 Multiple Masks!"#$ %&'( *+, -./ :;< %&'( *+, -./ :;< %&'( *+, -./ :;<

50 Multiple Masks!"#$ %&'( *+, -./ :;< %&'( *+, -./ :;< %&'( *+, -./ :;<

51 !"#$ %&'( *+, -./ :;<

52 !"#$ %&'( *+, -./ :;<

53 Masks Each mask has a cost Layer size matters Use shortcuts where possible

54 Shadow

55 Shadows

56 Shadows

57 Shadows

58 Shadows

59 Shadows

60 Shadows

61 Shadows Shadows come from layer and all its sublayers Blending is expensive Use shadow paths

62 Tips and Tricks

63 Shape Layers strokecolor path fillcolor

64 Shape Layers

65 Shape Layers strokestart / strokeend

66 Shape Layers strokestart / strokeend linedashphase

67 Gradient Layers startpoint colors locations endpoint

68 Gradient Layers startpoint/endpoint

69 Layer Speed Layers can have different time scales Sublayers inherit time from superlayers 1.0 Animations use layer s local time

70 Layer Speed With speed at 0, animations pause Interactive scrubbing with timeoffset

71 Demo Noah Witherspoon

72 Summary Broaden your toolbox Know best practices Experiment with the API

73 More Information

74 Related Sessions Going Beyond 2D with SpriteKit Executive Ballroom Friday 9:00AM Introducing Metal 2 WWDC 2017 SceneKit in Swift Playgrounds WWDC 2017 Advances in Core Image: Filters, Metal, Vision, and More WWDC 2017 Advanced Animations with UIKit WWDC 2017

75 Labs Metal 2 Lab Technology Lab F Fri 9:00AM 12:00PM SpriteKit Lab Technology Lab G Fri 12:00PM 2:30PM Cocoa Touch and Haptics Lab Technology Lab C Fri 12:00PM 1:50PM Cocoa Lab Technology Lab B Fri 1:50PM 3:20PM

76