iOS Core Animation Advanced Techniques(二)：视觉效果和变换

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView1;

@property (nonatomic, weak) IBOutlet UIView *layerView2;

@end

@implementation ViewController

- (void)viewDidLoad

{???

  [super viewDidLoad];

  //set the corner radius on our layers

  self.layerView1.layer.cornerRadius = 20.0f;

  self.layerView2.layer.cornerRadius = 20.0f;

  //enable clipping on the second layer

  self.layerView2.layer.masksToBounds = YES;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //set the corner radius on our layers

  self.layerView1.layer.cornerRadius = 20.0f;

  self.layerView2.layer.cornerRadius = 20.0f;

  //add a border to our layers

  self.layerView1.layer.borderWidth = 5.0f;

  self.layerView2.layer.borderWidth = 5.0f;

  //enable clipping on the second layer

  self.layerView2.layer.masksToBounds = YES;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView1;

@property (nonatomic, weak) IBOutlet UIView *layerView2;

@property (nonatomic, weak) IBOutlet UIView *shadowView;

@end

@implementation ViewController

?

- (void)viewDidLoad

{

  [super viewDidLoad];

  //set the corner radius on our layers

  self.layerView1.layer.cornerRadius = 20.0f;

  self.layerView2.layer.cornerRadius = 20.0f;

  //add a border to our layers

  self.layerView1.layer.borderWidth = 5.0f;

  self.layerView2.layer.borderWidth = 5.0f;

  //add a shadow to layerView1

  self.layerView1.layer.shadowOpacity = 0.5f;

  self.layerView1.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);

  self.layerView1.layer.shadowRadius = 5.0f;

  //add same shadow to shadowView (not layerView2)

  self.shadowView.layer.shadowOpacity = 0.5f;

  self.shadowView.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);

  self.shadowView.layer.shadowRadius = 5.0f;

  //enable clipping on the second layer

  self.layerView2.layer.masksToBounds = YES;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView1;

@property (nonatomic, weak) IBOutlet UIView *layerView2;

@end

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //enable layer shadows

  self.layerView1.layer.shadowOpacity = 0.5f;

  self.layerView2.layer.shadowOpacity = 0.5f;

  //create a square shadow

  CGMutablePathRef squarePath = CGPathCreateMutable();

  CGPathAddRect(squarePath, NULL, self.layerView1.bounds);

  self.layerView1.layer.shadowPath = squarePath; CGPathRelease(squarePath);

  ?//create a circular shadow

  CGMutablePathRef circlePath = CGPathCreateMutable();

  CGPathAddEllipseInRect(circlePath, NULL, self.layerView2.bounds);

  self.layerView2.layer.shadowPath = circlePath; CGPathRelease(circlePath);

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad];

  //create mask layer

  CALayer *maskLayer = [CALayer layer];

  maskLayer.frame = self.layerView.bounds;

  UIImage *maskImage = [UIImage imageNamed:@"Cone.png"];

  maskLayer.contents = (__bridge id)maskImage.CGImage;

  //apply mask to image layer?

  self.imageView.layer.mask = maskLayer;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

@interface ViewController ()

@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *digitViews;

@property (nonatomic, weak) NSTimer *timer;

??

@end

@implementation ViewController

- (void)viewDidLoad

{

  [super viewDidLoad]; //get spritesheet image

  UIImage *digits = [UIImage imageNamed:@"Digits.png"];

  //set up digit views

  for (UIView *view in self.digitViews) {

    //set contents

    view.layer.contents = (__bridge id)digits.CGImage;

    view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1.0);

    view.layer.contentsGravity = kCAGravityResizeAspect;

  }

  //start timer

  self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];

  //set initial clock time

  [self tick];

}

- (void)setDigit:(NSInteger)digit forView:(UIView *)view

{

  //adjust contentsRect to select correct digit

  view.layer.contentsRect = CGRectMake(digit * 0.1, 0, 0.1, 1.0);

}

- (void)tick

{

  //convert time to hours, minutes and seconds

  NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier: NSGregorianCalendar];

  NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;

  ?

  NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];

  //set hours

  [self setDigit:components.hour / 10 forView:self.digitViews[0]];

  [self setDigit:components.hour % 10 forView:self.digitViews[1]];

  //set minutes

  [self setDigit:components.minute / 10 forView:self.digitViews[2]];

  [self setDigit:components.minute % 10 forView:self.digitViews[3]];

  //set seconds

  [self setDigit:components.second / 10 forView:self.digitViews[4]];

  [self setDigit:components.second % 10 forView:self.digitViews[5]];

}

@end

view.layer.magnificationFilter = kCAFilterNearest;

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (UIButton *)customButton

{

  //create button

  CGRect frame = CGRectMake(0, 0, 150, 50);

  UIButton *button = [[UIButton alloc] initWithFrame:frame];

  button.backgroundColor = [UIColor whiteColor];

  button.layer.cornerRadius = 10;

  //add label

  frame = CGRectMake(20, 10, 110, 30);

  UILabel *label = [[UILabel alloc] initWithFrame:frame];

  label.text = @"Hello World";

  label.textAlignment = NSTextAlignmentCenter;

  [button addSubview:label];

  return button;

}

- (void)viewDidLoad

{

  [super viewDidLoad];

  //create opaque button

  UIButton *button1 = [self customButton];

  button1.center = CGPointMake(50, 150);

  [self.containerView addSubview:button1];

  //create translucent button

  UIButton *button2 = [self customButton];

  ?

  button2.center = CGPointMake(250, 150);

  button2.alpha = 0.5;

  [self.containerView addSubview:button2];

  //enable rasterization for the translucent button

  button2.layer.shouldRasterize = YES;

  button2.layer.rasterizationScale = [UIScreen mainScreen].scale;

}

@end

2

3

CGAffineTransformMakeRotation(CGFloat angle) 

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

2

3

4

5

6

7

8

9

10

11

12

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //rotate the layer 45 degrees

    CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);

    self.layerView.layer.affineTransform = transform;

}

@end

2

#define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0) 

#define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI)

2

3

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)     

CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)      

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

CGAffineTransformIdentity

CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2);

2

3

4

5

6

7

8

9

10

- (void)viewDidLoad

{

    [super viewDidLoad]; //create a new transform

    CGAffineTransform transform = CGAffineTransformIdentity; //scale by 50%

    transform = CGAffineTransformScale(transform, 0.5, 0.5); //rotate by 30 degrees

    transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0); //translate by 200 points

    transform = CGAffineTransformTranslate(transform, 200, 0);

    //apply transform to layer

    self.layerView.layer.affineTransform = transform;

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@implementation ViewController

CGAffineTransform CGAffineTransformMakeShear(CGFloat x, CGFloat y)

{

    CGAffineTransform transform = CGAffineTransformIdentity;

    transform.c = -x;

    transform.b = y;

    return transform;

}

- (void)viewDidLoad

{

    [super viewDidLoad];

    //shear the layer at a 45-degree angle

    self.layerView.layer.affineTransform = CGAffineTransformMakeShear(1, 0);

}

@end

2

3

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz) 

CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

2

3

4

5

6

7

8

9

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //rotate the layer 45 degrees along the Y axis

    CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);

    self.layerView.layer.transform = transform;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //create a new transform

    CATransform3D transform = CATransform3DIdentity;

    //apply perspective

    transform.m34 = - 1.0 / 500.0;

    //rotate by 45 degrees along the Y axis

    transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);

    //apply to layer

    self.layerView.layer.transform = transform;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@property (nonatomic, weak) IBOutlet UIView *layerView1;

@property (nonatomic, weak) IBOutlet UIView *layerView2;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //apply perspective transform to container

    CATransform3D perspective = CATransform3DIdentity;

    perspective.m34 = - 1.0 / 500.0;

    self.containerView.layer.sublayerTransform = perspective;

    //rotate layerView1 by 45 degrees along the Y axis

    CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);

    self.layerView1.layer.transform = transform1;

    //rotate layerView2 by 45 degrees along the Y axis

    CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);

    self.layerView2.layer.transform = transform2;

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *outerView;

@property (nonatomic, weak) IBOutlet UIView *innerView;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    //rotate the outer layer 45 degrees

    CATransform3D outer = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);

    self.outerView.layer.transform = outer;

    //rotate the inner layer -45 degrees

    CATransform3D inner = CATransform3DMakeRotation(-M_PI_4, 0, 0, 1);

    self.innerView.layer.transform = inner;

}

@end

2

3

4

5

6

7

8

9

10

11

12

13

14

- (void)viewDidLoad

{

    [super viewDidLoad];

    //rotate the outer layer 45 degrees

    CATransform3D outer = CATransform3DIdentity;

    outer.m34 = -1.0 / 500.0;

    outer = CATransform3DRotate(outer, M_PI_4, 0, 1, 0);

    self.outerView.layer.transform = outer;

    //rotate the inner layer -45 degrees

    CATransform3D inner = CATransform3DIdentity;

    inner.m34 = -1.0 / 500.0;

    inner = CATransform3DRotate(inner, -M_PI_4, 0, 1, 0);

    self.innerView.layer.transform = inner;

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;

@end

@implementation ViewController

- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform

{

    //get the face view and add it to the container

    UIView *face = self.faces[index];

    [self.containerView addSubview:face];

    //center the face view within the container

    CGSize containerSize = self.containerView.bounds.size;

    face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);

    // apply the transform

    face.layer.transform = transform;

}

- (void)viewDidLoad

{

    [super viewDidLoad];

    //set up the container sublayer transform

    CATransform3D perspective = CATransform3DIdentity;

    perspective.m34 = -1.0 / 500.0;

    self.containerView.layer.sublayerTransform = perspective;

    //add cube face 1

    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);

    [self addFace:0 withTransform:transform];

    //add cube face 2

    transform = CATransform3DMakeTranslation(100, 0, 0);

    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);

    [self addFace:1 withTransform:transform];

    //add cube face 3

    transform = CATransform3DMakeTranslation(0, -100, 0);

    transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);

    [self addFace:2 withTransform:transform];

    //add cube face 4

    transform = CATransform3DMakeTranslation(0, 100, 0);

    transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);

    [self addFace:3 withTransform:transform];

    //add cube face 5

    transform = CATransform3DMakeTranslation(-100, 0, 0);

    transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);

    [self addFace:4 withTransform:transform];

    //add cube face 6

    transform = CATransform3DMakeTranslation(0, 0, -100);

    transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);

    [self addFace:5 withTransform:transform];

}

@end

2

perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0); 

perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

#import "ViewController.h" 

#import 

#import

#define LIGHT_DIRECTION 0, 1, -0.5 

#define AMBIENT_LIGHT 0.5

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;

@end

@implementation ViewController

- (void)applyLightingToFace:(CALayer *)face

{

    //add lighting layer

    CALayer *layer = [CALayer layer];

    layer.frame = face.bounds;

    [face addSublayer:layer];

    //convert the face transform to matrix

    //(GLKMatrix4 has the same structure as CATransform3D)

    CATransform3D transform = face.transform;

    GLKMatrix4 matrix4 = *(GLKMatrix4 *)&transform;

    GLKMatrix3 matrix3 = GLKMatrix4GetMatrix3(matrix4);

    //get face normal

    GLKVector3 normal = GLKVector3Make(0, 0, 1);

    normal = GLKMatrix3MultiplyVector3(matrix3, normal);

    normal = GLKVector3Normalize(normal);

    //get dot product with light direction

    GLKVector3 light = GLKVector3Normalize(GLKVector3Make(LIGHT_DIRECTION));

    float dotProduct = GLKVector3DotProduct(light, normal);

    //set lighting layer opacity

    CGFloat shadow = 1 + dotProduct - AMBIENT_LIGHT;

    UIColor *color = [UIColor colorWithWhite:0 alpha:shadow];

    layer.backgroundColor = color.CGColor;

}

- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform

{

    //get the face view and add it to the container

    UIView *face = self.faces[index];

    [self.containerView addSubview:face];

    //center the face view within the container

    CGSize containerSize = self.containerView.bounds.size;

    face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);

    // apply the transform

    face.layer.transform = transform;

    //apply lighting

    [self applyLightingToFace:face.layer];

}

- (void)viewDidLoad

{

    [super viewDidLoad];

    //set up the container sublayer transform

    CATransform3D perspective = CATransform3DIdentity;

    perspective.m34 = -1.0 / 500.0;

    perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);

    perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);

    self.containerView.layer.sublayerTransform = perspective;

    //add cube face 1

    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);

    [self addFace:0 withTransform:transform];

    //add cube face 2

    transform = CATransform3DMakeTranslation(100, 0, 0);

    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);

    [self addFace:1 withTransform:transform];

    //add cube face 3

    transform = CATransform3DMakeTranslation(0, -100, 0);

    transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);

    [self addFace:2 withTransform:transform];

    //add cube face 4

    transform = CATransform3DMakeTranslation(0, 100, 0);

    transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);

    [self addFace:3 withTransform:transform];

    //add cube face 5

    transform = CATransform3DMakeTranslation(-100, 0, 0);

    transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);

    [self addFace:4 withTransform:transform];

    //add cube face 6

    transform = CATransform3DMakeTranslation(0, 0, -100);

    transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);

    [self addFace:5 withTransform:transform];

}

@end