Dynamic Animator 、 CollectionViewLayout

1 给视图添加重力效果

1.1 问题

当给某个视图加上UIGravityBehavior重力行为之后，这个视图就具有重力，会如同掉入了无底洞，不断地下坠，不断的加速，本案例使用UIGravityBehavior重力行为给imageView添加重力行为，如图-1所示：

图-1

1.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和两个Button控件，在右边栏的检查器中设置好ImageView的显示图片。

将ImageView控件关联成TRViewController的属性imageView，两个按钮关联成TRViewController的动作方法start和end。

其次在TRViewController中定义两个私有属性UIDynamicAnimator类型的animator和UIGravityBehavior类型的gravityBehavior。

然后在viewDidLoad方法中创建属性animator和gravityBehavior，将self.view设置为属性animator的referenceView引用视图，给属性imageView添加重力行为。

最后实现start方法和end方法，点击start按钮imageView开始执行重力行为往下坠，点击end按钮停止重力行为。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和两个Button控件，在右边栏的检查器中设置好ImageView的显示图片，Storyboard中的界面如图-2所示：

图-2

将ImageView控件关联成TRViewController的属性imageView，两个按钮关联成TRViewController的动作方法start和end，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

步骤二：定义animator和gravityBehavior属性

首先在TRViewController中定义两个私有属性UIDynamicAnimator类型的animator和UIGravityBehavior类型的gravityBehavior，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @property (strong, nonatomic)UIDynamicAnimator *animator;
4. @property (strong, nonatomic)UIGravityBehavior *gravityBehavior;
5. @end

然后在viewDidLoad方法中创建属性animator和gravityBehavior，将self.view设置为属性animator的referenceView引用视图，给属性imageView添加重力行为，代码如下所示：

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //将self.view设置为动力坐标系的参考
5.     UIDynamicAnimator *animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
6. //给imageView添加重力行为
7. UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.imageView]];
8. self.gravityBehavior = gravity;
9. self.animator = animator;
10. }

步骤三：实现start和end方法

当点击start按钮时imageView开始执行重力行为往下坠，在start方法中使用addBehavior:方法执行重力行为。

当点击end按钮时停止重力行为，在end方法中使用removeBehavior:方法将重力行为移除，代码如下所示：

1. - (IBAction)start
2. {
3. //当点击start按钮时将重力行为添加到self.animator
4. [self.animator addBehavior:self.gravityBehavior];
5. }
6. - (IBAction)end
7. {
8. //当点击end按钮时将重力行为移除
9. [self.animator removeBehavior:self.gravityBehavior];
10. }

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @property (strong, nonatomic)UIDynamicAnimator *animator;
6. @property (strong, nonatomic)UIGravityBehavior *gravityBehavior;
7. @end
9. @implementation TRViewController
11. - (void)viewDidLoad
12. {
13. [super viewDidLoad];
14. //将self.view设置为动力坐标系的参考
15.     UIDynamicAnimator *animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
16. //给imageView添加重力行为
17. UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.imageView]];
18. self.gravityBehavior = gravity;
19. self.animator = animator;
20. }
22. - (IBAction)start
23. {
24. //当点击start按钮时将重力行为添加到self.animator
25. [self.animator addBehavior:self.gravityBehavior];
26. }
27. - (IBAction)end
28. {
29. //当点击end按钮时将重力行为移除
30. [self.animator removeBehavior:self.gravityBehavior];
31. }
32. @end

2 给视图添加碰撞效果

2.1 问题

如果给某个视图添加了UICollisionBehavior碰撞行为，该视图就有碰撞能力，能与引用视图产生碰撞效果，本案例使用UICollisionBehavior给视图添加碰撞效果，如图-3所示：

图-3

2.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRCollisionViewController的属性boxImageView。

其次创建一个TRBackgroundView类继承至UIView，该类有一个UIBezierPath类型的公开属性path。在Storyboard中将View关联成TRBackgroundView。

在TRBackgroundView.m文件中重写initWithCoder:方法和drawRect:绘制方法，initWithCoder:方法中使用colorWithPatternImage:方法设置背景颜色，drawRect:方法中则根据path属性进行绘制。

然后在TRCollisionViewController类中定义一个UIDynamicAnimator类型的属性animator。

在viewDidLoad方法中使boxImageView旋转45度，使一个角朝下。

在viewDidAppear:方法中创建属性animator，将self.view设置为属性animator的referenceView引用视图，给属性boxImageView添加重力行为和碰撞行为，使boxImageView和绘制出来的path进行碰撞。

最后通过实现UICollisionBehaviorDelegate的协议方法，当碰撞开始时boxImageView颜色发生改变。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：拖放ImageView控件

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRCollisionViewController的属性boxImageView，代码如下所示：

 

1. @interface TRCollisionViewController () <UICollisionBehaviorDelegate>
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @end

步骤二：创建TRBackgroundView类

首先创建一个TRBackgroundView类继承至UIView，该类有一个UIBezierPath类型的公开属性path。在Storyboard中将View关联成TRBackgroundView，如图-4所示：

图-4

然后在TRBackgroundView.m文件中重写initWithCoder:方法和drawRect:绘制方法，initWithCoder:方法中使用colorWithPatternImage:方法设置背景颜色，drawRect:方法中则根据path属性进行绘制，代码如下所示：

 

1. #import "TRBackgroundView.h"
2. @implementation TRBackgroundView
3. - (id)initWithCoder:(NSCoder *)aDecoder
4. {
5. self = [super initWithCoder:aDecoder];
6. if(self){
7. self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BackgroundTile"]];
8. }
9. return self;
10. }
12. - (void)drawRect:(CGRect)rect
13. {
14. [[UIColor redColor]setFill];
15. [[UIColor greenColor]setStroke];
16. [self.path stroke];
17. [self.path fill];
18. }
19. @end

步骤三：添加重力行为和碰撞行为

首先在TRCollisionViewController类中定义一个UIDynamicAnimator类型的私用属性animator，代码如下所示：

 

1. @interface TRCollisionViewController () <UICollisionBehaviorDelegate>
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @property (strong, nonatomic) UIDynamicAnimator *animator;
4. @end

然后在viewDidLoad方法中使boxImageView旋转45度，使boxImageView的一个角朝下，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. self.boxImageView.transform = CGAffineTransformRotate(self.boxImageView.transform, M_PI_4);
5. }

最后在viewDidAppear:方法中创建属性animator，将self.view设置为属性animator的referenceView引用视图，给属性boxImageView添加重力行为和碰撞行为，使boxImageView和绘制出来的path进行碰撞，代码如下所示：

 

1. - (void)viewDidAppear:(BOOL)animated
2. {
3. UIDynamicAnimator *animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
4. self.animator = animator;
5. //创建重力行为
6. UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.boxImageView]];
7. //重力的强度
8. gravity.magnitude = 0.1;
9. //重力的方向
10. gravity.gravityDirection = CGVectorMake(0, 1);
11. [animator addBehavior:gravity];
12. //创建碰撞行为
13. UICollisionBehavior *collision = [[UICollisionBehavior alloc]initWithItems:@[self.boxImageView]];
14. //将引用视图的四周翻译成可碰撞的四个边
15. collision.translatesReferenceBoundsIntoBoundary = YES;
16. //设置delegate
17. collision.collisionDelegate = self;
18. //用UIBezierPath创建一个形状并具有碰撞行为
19. UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 450, 280, 30) cornerRadius:10.0];
20. TRBackgroundView *myView = (TRBackgroundView *)self.view;
21. myView.path = path;
22. [myView setNeedsDisplay];
23. [collision addBoundaryWithIdentifier:@"MyPathIdenrifier" forPath:path];
24. [animator addBehavior:collision];
25. }

步骤四：实现协议方法

实现UICollisionBehaviorDelegate的协议方法beganContactForItem: withBoundaryIdentifier:atPoint:，完碰撞开始时boxImageView颜色发生改变，代码如下所示：

 

1. - (void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(id <NSCopying>)identifier atPoint:(CGPoint)p
2. {
3. UIImageView *box = (UIImageView *)item;
4. box.tintColor = [UIColor redColor];
5. // imageWithRenderingMode:IOS7提供的新的功能，设置一个UIImage在渲染时是否使用当前视图的Tint Color
6. //UIImageRenderingModeAlwaysTemplate表示始终根据Tint Color绘制图片，忽略图片的颜色信息。
7. box.image = [box.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
8. NSLog(@"%@,%@,point:(%.0f, %.0f", item, identifier, p.x, p.y);
9. }

2.4 完整代码

本案例中，TRCollisionViewController.m文件中的完整代码如下所示：

 

1. #import "TRCollisionViewController.h"
2. #import "TRBackgroundView.h"
3. @interface TRCollisionViewController () <UICollisionBehaviorDelegate>
4. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
5. @property (strong, nonatomic) UIDynamicAnimator *animator;
6. @end
8. @implementation TRCollisionViewController
10. - (void)viewDidLoad
11. {
12. [super viewDidLoad];
13. self.boxImageView.transform = CGAffineTransformRotate(self.boxImageView.transform, M_PI_4);
14. }
16. - (void)viewDidAppear:(BOOL)animated
17. {
18. UIDynamicAnimator *animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
19. self.animator = animator;
20. //重力行为
21. UIGravityBehavior *gravity = [[UIGravityBehavior alloc]initWithItems:@[self.boxImageView]];
22. //重力的强度
23. gravity.magnitude = 0.1;
24. //重力的方向
25. gravity.gravityDirection = CGVectorMake(0, 1);
26. [animator addBehavior:gravity];
27. //碰撞行为
28. UICollisionBehavior *collision = [[UICollisionBehavior alloc]initWithItems:@[self.boxImageView]];
29. //将引用视图的四周翻译成可碰撞的四个边
30. collision.translatesReferenceBoundsIntoBoundary = YES;
31. collision.collisionDelegate = self;
32. //用UIBezierPath创建一个形状并具有碰撞行为
33. UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 450, 280, 30) cornerRadius:10.0];
34. TRBackgroundView *myView = (TRBackgroundView *)self.view;
35. myView.path = path;
36. [myView setNeedsDisplay];
37. [collision addBoundaryWithIdentifier:@"MyPathIdenrifier" forPath:path];
38. [animator addBehavior:collision];
39. }
41. - (void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(id <NSCopying>)identifier atPoint:(CGPoint)p
42. {
43. UIImageView *box = (UIImageView *)item;
44. box.tintColor = [UIColor redColor];
45. // imageWithRenderingMode:IOS7提供的新的功能，设置一个UIImage在渲染时是否使用当前视图的Tint Color
46. //UIImageRenderingModeAlwaysTemplate表示始终根据Tint Color绘制图片，忽略图片的颜色信息。
47. box.image = [box.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
48. NSLog(@"%@,%@,point:(%.0f, %.0f", item, identifier, p.x, p.y);
49. }
51. - (void)collisionBehavior:(UICollisionBehavior*)behavior endedContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(id <NSCopying>)identifier
52. {
53. NSLog(@"....");
54. }
55. @end

本案例中，TRBackgroundView.h文件中的完整代码如下所示：

1. #import<UIKit/UIKit.h>
2. @interface TRBackgroundView : UIView
3. @property (nonatomic, strong) UIBezierPath *path;
4. @end

本案例中，TRBackgroundView.m文件中的完整代码如下所示：

 

1. #import "TRBackgroundView.h"
2. @implementation TRBackgroundView
3. - (id)initWithCoder:(NSCoder *)aDecoder
4. {
5. self = [super initWithCoder:aDecoder];
6. if(self){
7. self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BackgroundTile"]];
8. }
9. return self;
10. }
11. - (void)drawRect:(CGRect)rect
12. {
13. [[UIColor redColor]setFill];
14. [[UIColor greenColor]setStroke];
15. [self.path stroke];
16. [self.path fill];
17. }
18. @end

3 给视图添加吸附效果

3.1 问题

UIAttachmentBehavior吸附行为，一个视图产生某种行为后相关联的对象也随之一起运动，本案例使用UIAttachmentBehavior给视图添加吸附效果，是两个视图产生关联行为，如图-5所示：

图-5

3.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRAttachmentViewController的属性boxImageView。

本案例同样需要一个TRBackgroundView类，直接使用上一个案例的TRBackgroundView类即可，在Storyboard中将View关联成TRBackgroundView。

然后在TRAttachmentViewController类中定义三个属性分别为UIDynamicAnimator类型的animator，UIGravityBehavior类型的gravityBehavior，以及UIAttachmentBehavior类型的attachmentBehavior，并且使用重写setter的方法进行初始化。

在Storyboard中给View添加UIPanGestureRecognizer类型的手势，关联成pan:方法。

最后在TRAttachmentViewController中实现pan:方法，每次触摸屏幕则在boxImageView的中心点和手指触摸点绘制一条直线，并且boxImageView和手指触摸点产生关联的动力行为。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：拖放ImageView控件

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRAttachmentViewController的属性boxImageView，代码如下所示：

 

1. @interface TRAttachmentViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @end

本案例同样需要一个TRBackgroundView类，直接使用上一个案例的TRBackgroundView类即可，在Storyboard中将View关联成TRBackgroundView。

步骤二：定义属性

在TRAttachmentViewController类中定义三个属性分别为UIDynamicAnimator类型的animator，UIGravityBehavior类型的gravityBehavior，以及UIAttachmentBehavior类型的attachmentBehavior，并且使用重写setter的方法进行初始化，代码如下所示：

 

1. @interface TRAttachmentViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @property (strong, nonatomic) UIDynamicAnimator *animator;
4. @property (strong, nonatomic) UIGravityBehavior *gravityBehavior;
5. @property (strong, nonatomic) UIAttachmentBehavior *attachmentBehavior;
6. @end
7. //重写setter方法
8. - (UIDynamicAnimator *)animator
9. {
10. if(!_animator)_animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
11. return _animator;
12. }
14. - (UIGravityBehavior *)gravityBehavior
15. {
16. if (!_gravityBehavior) {
17. _gravityBehavior = [[UIGravityBehavior alloc]initWithItems:@[self.boxImageView]];
18. }
19. return _gravityBehavior;
20. }
22. - (UIAttachmentBehavior *)attachmentBehavior
23. {
24. CGPoint attachedToAnchor = CGPointMake(self.boxImageView.center.x, self.boxImageView.frame.origin.y - 50);
25. if (!_attachmentBehavior) {
26. //使用initWithItem:attachedToAnchor:方法进行初始化，使boxImageView和attachedToAnchor产生关联行为
27. _attachmentBehavior = [[UIAttachmentBehavior alloc]initWithItem:self.boxImageView attachedToAnchor:attachedToAnchor];
28. }
29. return _attachmentBehavior;
30. }

步骤三：添加手势，实现关联动力行为

首先在Storyboard中给View添加UIPanGestureRecognizer类型的手势，关联成pan:方法。

然后在TRAttachmentViewController中实现pan:方法，该方法中根据手势的状态在boxImageView的中心点和手指触摸点绘制一条直线，并且boxImageView和手指触摸点产生关联的动力行为，代码如下所示：

 

1. - (IBAction)pan:(UIPanGestureRecognizer *)sender
2. {
3. if (sender.state == UIGestureRecognizerStateBegan) {
4. //手势开始添加关联行为和重力行为
5. [self.animator addBehavior:self.gravityBehavior];
6. self.attachmentBehavior.anchorPoint = [sender locationInView:self.view];
7. //阻尼
8. self.attachmentBehavior.damping = 0.1;
9. //频率
10. self.attachmentBehavior.frequency = 1.0;
11. [self.animator addBehavior:self.attachmentBehavior];
12. [self drawLine];
13. [self.view setNeedsDisplay];
14. }
15. if(sender.state == UIGestureRecognizerStateChanged){
16. CGPoint location = [sender locationInView:self.view];
17. //手指移动过程中改变anchorPoint
18. self.attachmentBehavior.anchorPoint = location;
19. [self drawLine];
20. [self.view setNeedsDisplay];
21. }else if(sender.state == UIGestureRecognizerStateEnded){
22. //手势结束移除关联行为和重力行为
23. [self.animator removeBehavior:self.attachmentBehavior];
24. [self.animator removeBehavior:self.gravityBehavior];
25. ((TRBackgroundView *)self.view).path = nil;
26. [self.view setNeedsDisplay];
27. }
28. }
29. - (void)drawLine
30. {
31. __weak UIAttachmentBehavior *weakAttachmentBehavior = self.attachmentBehavior;
32. __weak UIImageView *weakBoxImageView = self.boxImageView;
33. __weak TRBackgroundView *weakMyView = (TRBackgroundView *)self.view;
34. self.attachmentBehavior.action = ^{
35. UIBezierPath *path = [UIBezierPath bezierPath];
36. [path moveToPoint:weakAttachmentBehavior.anchorPoint];
37. [path addLineToPoint:weakBoxImageView.center];
38. path.lineWidth = 2;
39. weakMyView.path = path;
40. [weakMyView setNeedsDisplay];
41. };
42. }

3.4 完整代码

本案例中，TRAttachmentViewController.m文件中的完整代码如下所示：

 

1. #import "TRAttachmentViewController.h"
2. #import "TRBackgroundView.h"
4. @interface TRAttachmentViewController ()
5. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
6. @property (strong, nonatomic) UIDynamicAnimator *animator;
7. @property (strong, nonatomic) UIGravityBehavior *gravityBehavior;
8. @property (strong, nonatomic) UIAttachmentBehavior *attachmentBehavior;
9. @end
11. @implementation TRAttachmentViewController
13. - (UIDynamicAnimator *)animator
14. {
15. if(!_animator)_animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
16. return _animator;
17. }
19. - (UIGravityBehavior *)gravityBehavior
20. {
21. if (!_gravityBehavior) {
22. _gravityBehavior = [[UIGravityBehavior alloc]initWithItems:@[self.boxImageView]];
23. }
24. return _gravityBehavior;
25. }
27. - (UIAttachmentBehavior *)attachmentBehavior
28. {
29. CGPoint attachedToAnchor = CGPointMake(self.boxImageView.center.x, self.boxImageView.frame.origin.y - 50);
30. if (!_attachmentBehavior) {
31. _attachmentBehavior = [[UIAttachmentBehavior alloc]initWithItem:self.boxImageView attachedToAnchor:attachedToAnchor];
32. }
33. return _attachmentBehavior;
34. }
36. - (IBAction)pan:(UIPanGestureRecognizer *)sender
37. {
38. if (sender.state == UIGestureRecognizerStateBegan) {
39. [self.animator addBehavior:self.gravityBehavior];
40. self.attachmentBehavior.anchorPoint = [sender locationInView:self.view];
41. //阻尼
42. self.attachmentBehavior.damping = 0.1;
43. //频率
44. self.attachmentBehavior.frequency = 1.0;
45. [self.animator addBehavior:self.attachmentBehavior];
46. [self drawLine];
47. [self.view setNeedsDisplay];
49. }
50. if(sender.state == UIGestureRecognizerStateChanged){
51. CGPoint location = [sender locationInView:self.view];
52. self.attachmentBehavior.anchorPoint = location;
53. [self drawLine];
54. [self.view setNeedsDisplay];
55. }else if(sender.state == UIGestureRecognizerStateEnded){
56. [self.animator removeBehavior:self.attachmentBehavior];
57. [self.animator removeBehavior:self.gravityBehavior];
58. ((TRBackgroundView *)self.view).path = nil;
59. [self.view setNeedsDisplay];
60. }
61. }
63. - (void)drawLine
64. {
65. __weak UIAttachmentBehavior *weakAttachmentBehavior = self.attachmentBehavior;
66. __weak UIImageView *weakBoxImageView = self.boxImageView;
67. __weak TRBackgroundView *weakMyView = (TRBackgroundView *)self.view;
68. self.attachmentBehavior.action = ^{
69. UIBezierPath *path = [UIBezierPath bezierPath];
70. [path moveToPoint:weakAttachmentBehavior.anchorPoint];
71. [path addLineToPoint:weakBoxImageView.center];
72. path.lineWidth = 2;
73. weakMyView.path = path;
74. [weakMyView setNeedsDisplay];
75. };
76. }
77. @end

4 给视图添加闪的效果

4.1 问题

本案例使用UISnapBehavior给视图添加闪的效果，点击屏幕某处imageView就闪向某处，如图-6所示：

图-6

4.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRSnapViewController的属性boxImageView。

从对象库中拖放一个TapGestureRecognizer类型的手势到Storyboard的场景中，并将手势关联成TRSnapViewController的动作方法tap：。

其次在TRSnapViewController中定义两个私有属性UIDynamicAnimator类型的animator和UISnapBehavior类型的snapBehavior。重写setter方法对animator属性进行初始化。

最后实现tap：方法，该方法中创建snapBehavior行为，使boxImageView闪向手指触摸的地方。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRSnapViewController的属性boxImageView，代码如下所示：

1. @interface TRSnapViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @end

然后从对象库中拖放一个TapGestureRecognizer类型的手势到Storyboard的场景中，并将手势关联成TRSnapViewController的动作方法tap：。

步骤二：定义属性animator和snapBehavior

首先在TRSnapViewController中定义两个私有属性UIDynamicAnimator类型的animator和UISnapBehavior类型的snapBehavior。

然后重写setter方法对animator属性进行初始化，代码如下所示：

 

1. @interface TRSnapViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @property (strong, nonatomic) UIDynamicAnimator *animator;
4. @property (strong, nonatomic) UISnapBehavior *snapBehavior;
5. @end

最后实现tap：方法，该方法中创建snapBehavior行为，使boxImageView闪向手指触摸的地方，代码如下所示：

1. - (IBAction)tap:(UITapGestureRecognizer *)sender
2. {
3. CGPoint point = [sender locationInView:self.view];
4. [self.animator removeBehavior:self.snapBehavior];
5. self.snapBehavior = [[UISnapBehavior alloc]initWithItem:self.boxImageView snapToPoint:point];
6. [self.animator addBehavior:self.snapBehavior];
7. }

4.4 完整代码

本案例中，TRSnapViewController.m文件中的完整代码如下所示：

 

1. #import "TRSnapViewController.h"
2. @interface TRSnapViewController ()
3. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
4. @property (strong, nonatomic) UIDynamicAnimator *animator;
5. @property (strong, nonatomic) UISnapBehavior *snapBehavior;
6. @end
7. @implementation TRSnapViewController
9. - (UIDynamicAnimator *)animator
10. {
11. if (!_animator) {
12. _animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
13. }
14. return _animator;
15. }
17. - (IBAction)tap:(UITapGestureRecognizer *)sender
18. {
19. CGPoint point = [sender locationInView:self.view];
20. [self.animator removeBehavior:self.snapBehavior];
21. self.snapBehavior = [[UISnapBehavior alloc]initWithItem:self.boxImageView snapToPoint:point];
22. [self.animator addBehavior:self.snapBehavior];
23. }
24. @end

5 给视图添加推（拍）效果和UIDynamicItemBehavior

5.1 问题

本案例使用UIPushBehavior和UIDynamicItemBehavior给视图添加pushBehavior行为和dynamicItemBehavior行为，使视图可以在某个动作结束后，继续沿轨迹运动，如图-7所示：

图-7

5.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRPushViewController的属性boxImageView。

从对象库中拖放一个PanGestureRecognizer类型的手势到Storyboard的场景中，并将手势关联成TRPushViewController的动作方法panAction:。

其次在TRPushViewController中定义两个私有属性UIDynamicAnimator类型的animator和UIPushBehavior类型pushBehavior。重写setter方法对animator属性进行初始化。

然后创建碰撞行为和push行为，由于碰撞行为需要计算视图边距，需要获取self.topLayoutGuide.length的值，所以将碰撞行为和push行为的代码写在viewDidAppear:方法中。

最后实现tap：方法，该方法中boxImageView随着手指滑动实现碰撞和推动，并具有摩擦和反弹效果。

5.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置好ImageView的显示图片。将ImageView控件关联成TRPushViewController的属性boxImageView，代码如下所示：

 

1. @interface TRPushViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @end

从对象库中拖放一个PanGestureRecognizer类型的手势到Storyboard的场景中，并将手势关联成TRPushViewController的动作方法panAction:。

步骤二：定义属性animator和pushBehavior

在TRPushViewController中定义两个私有属性UIDynamicAnimator类型的animator和UIPushBehavior类型pushBehavior，代码如下所示：

 

1. @interface TRPushViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
3. @property (strong, nonatomic) UIDynamicAnimator *animator;
4. @property (strong, nonatomic)UIPushBehavior *pushBehavior;
5. @end

然后重写setter方法对animator属性进行初始化，代码如下所示：

 

1. - (UIDynamicAnimator *)animator
2. {
3. if(!_animator)_animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
4. return _animator;
5. }

属性三：创建动力行为，实现手势的动作方法

首先创建碰撞行为和push行为，由于碰撞行为需要计算视图边距，需要获取self.topLayoutGuide.length的值，所以将碰撞行为和push行为的代码写在viewDidAppear:方法中，代码如下所示：

 

1. - (void)viewDidAppear:(BOOL)animated
2. {
3. [super viewDidAppear:animated];
4. //创建碰撞行为
5. UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc]initWithItems:@[self.boxImageView]];
6. [collisionBehavior setTranslatesReferenceBoundsIntoBoundaryWithInsets:UIEdgeInsetsMake(self.topLayoutGuide.length, 0, self.bottomLayoutGuide.length, 0)];
7. [self.animator addBehavior:collisionBehavior];
8. //创建pushBehavior行为，UIPushBehaviorModeContinuous模式表示推力持续施加
9. self.pushBehavior = [[UIPushBehavior alloc]initWithItems:@[self.boxImageView] mode:UIPushBehaviorModeContinuous];
10. [self.animator addBehavior:self.pushBehavior];
11. }

然后实现tap：方法，该方法中boxImageView随着手指滑动实现碰撞和推动，代码如下所示：

 

1. - (IBAction)panAction:(UIPanGestureRecognizer *)sender {
2. CGPoint point = [sender locationInView:self.view];
3. CGPoint center = self.boxImageView.center;
4. //计算移动的方向
5. CGFloat angle = atan2(center.y - point.y, center.x - point.x) + M_PI;
6. self.pushBehavior.angle = angle;
7. //计算移动的速度
8. CGFloat distance = sqrt(powf(point.x - center.x, 2) + powf(point.y - center.y, 2));
9. self.pushBehavior.magnitude = distance / 10;
10. //激活
11. self.pushBehavior.active = YES;
12. }

最后添加dynamicItemBehavior行为，是视图在移动过程中产生摩擦和反弹，代码如下所示：

 

1. - (IBAction)panAction:(UIPanGestureRecognizer *)sender {
2. CGPoint point = [sender locationInView:self.view];
3. CGPoint center = self.boxImageView.center;
4. //计算移动的方向
5. CGFloat angle = atan2(center.y - point.y, center.x - point.x) + M_PI;
6. self.pushBehavior.angle = angle;
7. //计算移动的速度
8. CGFloat distance = sqrt(powf(point.x - center.x, 2) + powf(point.y - center.y, 2));
9. self.pushBehavior.magnitude = distance / 10;
10. //激活
11. self.pushBehavior.active = YES;
12. //添加UIDynamicItemBehavior
13. UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.boxImageView]];
14. //设置摩擦力大小
15. itemBehavior.friction = 0.2;
16. //允许旋转
17. itemBehavior.allowsRotation = YES;
18. //设置旋转速度
19. [itemBehavior addAngularVelocity:M_PI_4 forItem:self.boxImageView];
20. [self.animator addBehavior:itemBehavior];
21. }

5.4 完整代码

本案例中，TRPushViewController.m文件中的完整代码如下所示：

 

1. #import "TRPushViewController.h"
3. @interface TRPushViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *boxImageView;
5. @property (strong, nonatomic) UIDynamicAnimator *animator;
6. @property (strong, nonatomic)UIPushBehavior *pushBehavior;
7. @end
9. @implementation TRPushViewController
10. - (UIDynamicAnimator *)animator
11. {
12. if(!_animator)_animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
13. return _animator;
14. }
16. - (void)viewDidAppear:(BOOL)animated
17. {
18. [super viewDidAppear:animated];
19. //创建碰撞行为
20. UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc]initWithItems:@[self.boxImageView]];
21. [collisionBehavior setTranslatesReferenceBoundsIntoBoundaryWithInsets:UIEdgeInsetsMake(self.topLayoutGuide.length, 0, self.bottomLayoutGuide.length, 0)];
22. [self.animator addBehavior:collisionBehavior];
23. //创建pushBehavior行为，UIPushBehaviorModeContinuous模式表示推力持续施加
24. self.pushBehavior = [[UIPushBehavior alloc]initWithItems:@[self.boxImageView] mode:UIPushBehaviorModeContinuous];
25. [self.animator addBehavior:self.pushBehavior];
26. }
28. - (IBAction)panAction:(UIPanGestureRecognizer *)sender {
29. CGPoint point = [sender locationInView:self.view];
30. CGPoint center = self.boxImageView.center;
31. //计算移动的方向
32. CGFloat angle = atan2(center.y - point.y, center.x - point.x) + M_PI;
33. self.pushBehavior.angle = angle;
34. //计算移动的速度
35. CGFloat distance = sqrt(powf(point.x - center.x, 2) + powf(point.y - center.y, 2));
36. self.pushBehavior.magnitude = distance / 10;
37. //激活
38. self.pushBehavior.active = YES;
39. //添加UIDynamicItemBehavior
40. UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.boxImageView]];
41. //设置摩擦力大小
42. itemBehavior.friction = 0.2;
43. //允许旋转
44. itemBehavior.allowsRotation = YES;
45. //设置旋转速度
46. [itemBehavior addAngularVelocity:M_PI_4 forItem:self.boxImageView];
47. [self.animator addBehavior:itemBehavior];
48. }
49. @end

6 使用集合视图的布局实现Cell滚动时候的动画效果

6.1 问题

集合视图的布局是其精髓，相当于集合视图的大脑和中枢，负责设置集合视图的一些属性，包括位置、尺寸、透明度、层级关系、形状等。本案例将使用集合视图的布局实现单元格滚动时的动画效果，如图-8所示：

图-8

6.2 方案

首先创建一个SingleViewApplication项目，在StoryBoard中拖放一个CollectionViewController作为根视图控制器，并于TRViewController进行绑定，TRViewController继承至UICollectionViewController。

其次创建一个TRCell类，继承至UICollectionViewCell，TRCell有一个公开属性UILabel类型的label。然后重写initWithFrame：方法，通过frame参数计算出每个cell中子视图label的frame，并且设置cell的contentView的layer属性。

然后创建一个TRCollectionViewCustomLayout继承至UICollectionViewFlowLayout。重写初始化方法initWithCoder:对布局类进行一些初始化的设置，例如滚动方向、间距、item的大小等。

UICollectionViewLayoutAttributes是一个非常重要的类包含了cell布局信息，包括边框、中心点、大小、形状、透明度、层次关系以及是否隐藏等信息。本案例在TRCollectionViewCustomLayout类中重写layoutAttributesForElementsInRect:方法，获取每一个Cell的布局属性，通过attributes.transform3D实现Cell的缩放动画。

最后在TRViewController的viewDidLoad方法中注册集合视图的cell，TRViewController遵守集合视图协议，并且实现协议方法给集合视图加载数据。

6.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建集合视图项目

首先创建一个SingleViewApplication项目，在StoryBoard中拖放一个CollectionViewController作为根视图控制器，并于TRViewController进行绑定，TRViewController继承至UICollectionViewController，Storyboard中的界面如图-9所示：

图-9

步骤二：创建TRCell类

首先创建一个TRCell类，继承至UICollectionViewCell，TRCell有一个公开属性UILabel类型的label，代码如下所示：

 

1. @interface TRCell : UICollectionViewCell
2. @property (nonatomic, strong) UILabel *label;
3. @end

然后重写initWithFrame：方法，通过frame参数计算出每个cell中子视图label的frame，并且设置cell的contentView的layer属性，代码如下所示：

 

1. - (id)initWithFrame:(CGRect)frame
2. {
3. self = [super initWithFrame:frame];
4. if (self) {
5. //创建并设置label属性
6. self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
7. self.label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
8. self.label.textAlignment = NSTextAlignmentCenter;
9. self.label.backgroundColor = [UIColor lightGrayColor];
10. self.label.textColor = [UIColor blackColor];
11. [self.contentView addSubview:self.label];
12. //设置contentView的layer属性，添加圆角和边框
13. self.contentView.layer.borderWidth = 1.0f;
14. self.contentView.layer.cornerRadius = 8.0;
15. self.contentView.layer.masksToBounds = YES;
16. self.contentView.layer.borderColor = [UIColor whiteColor].CGColor;
17. }
18. return self;
19. }

步骤三：创建布局类TRCollectionViewCustomLayout

首先创建一个TRCollectionViewCustomLayout继承至UICollectionViewFlowLayout。重写初始化方法initWithCoder:对布局类进行一些初始化的设置，例如滚动方向、间距、item的大小等，代码如下所示：

 

1. - (id)initWithCoder:(NSCoder *)aDecoder
2. {
3. self = [super initWithCoder:aDecoder];
4. if (self) {
5. [self initiate];
6. }
7. return self;
8. }
9. - (void)initiate
10. {
11. //设置Cell的大小
12. self.itemSize = CGSizeMake(100, 100);
13. //设置CollectionView的滚动方向
14. self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
15. //设置CollectionView的内边距
16. self.sectionInset = UIEdgeInsetsMake(100, 0, 100, 0);
17. //设置Cell之间的间距
18. self.minimumLineSpacing = 50;
19. }

然后在TRCollectionViewCustomLayout类中重写layoutAttributesForElementsInRect:方法，获取每一个Cell的布局属性，通过attributes.transform3D实现Cell的缩放动画，代码如下所示：

 

1. //当边界改变时重新计算布局
2. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
3. {
4. return YES;
5. }
6. //返回所有Cell的布局属性
7. - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
8. {
9. //获取每一个Cell的布局属性
10. NSArray *array = [super layoutAttributesForElementsInRect:rect];
11. CGRect visibleRect;
12. visibleRect.origin = self.collectionView.contentOffset;
13. visibleRect.size = self.collectionView.bounds.size;
14. for (UICollectionViewLayoutAttributes *attributes in array) {
15. CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
16. CGFloat distance2 = distance / 100;
17. if(ABS(distance) < 100){
18. CGFloat zoom = 1 + 0.3* (1 - ABS(distance2));
19. attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1);
20. }
21. }
22. return array;
23. }

步骤四：遵守委托协议，实现协议方法

首先在TRViewController的viewDidLoad方法中注册集合视图的cell，代码如下所示：

 

1. static NSString *cellIdentifier = @"MyCell";
2. - (void)viewDidLoad
3. {
4. [super viewDidLoad];
5.     [self.collectionView registerClass:[TRCell class] forCellWithReuseIdentifier:cellIdentifier];
6. }

然后TRViewController遵守集合视图协议，并且实现协议方法给集合视图加载数据，代码如下所示：

 

1. -(NSInteger)collectionView:(UICollectionView *)collectionView
2. numberOfItemsInSection:(NSInteger)section
3. {
4. return 60;
5. }
7. -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
8. cellForItemAtIndexPath:(NSIndexPath *)indexPath
9. {
10. TRCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
11. cell.label.text = [NSString stringWithFormat:@"%d", indexPath.row];
12. return cell;
13. }

6.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
2. #import "TRCell.h"
4. @implementation TRViewController
5. static NSString *cellIdentifier = @"MyCell";
6. - (void)viewDidLoad
7. {
8. [super viewDidLoad];
9.     [self.collectionView registerClass:[TRCell class] forCellWithReuseIdentifier:cellIdentifier];
10. }
12. - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
13. {
14. return 60;
15. }
16. - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
17. {
18. TRCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
19. cell.label.text = [NSString stringWithFormat:@"%d", indexPath.row];
20. return cell;
21. }
22. @end

本案例中，TRCell.h文件中的完整代码如下所示：

 

1. #import<UIKit/UIKit.h>
3. @interface TRCell : UICollectionViewCell
4. @property (nonatomic, strong) UILabel *label;
5. @end

本案例中，TRCell.m文件中的完整代码如下所示：

 

1. #import "TRCell.h"
3. @implementation TRCell
5. - (id)initWithFrame:(CGRect)frame
6. {
7. self = [super initWithFrame:frame];
8. if (self) {
9. self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
10. self.label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
11. self.label.textAlignment = NSTextAlignmentCenter;
12. self.label.backgroundColor = [UIColor lightGrayColor];
13. self.label.textColor = [UIColor blackColor];
14. [self.contentView addSubview:self.label];
16. self.contentView.layer.borderWidth = 1.0f;
17. self.contentView.layer.cornerRadius = 8.0;
18. self.contentView.layer.masksToBounds = YES;
19. self.contentView.layer.borderColor = [UIColor whiteColor].CGColor;
20. }
21. return self;
22. }
23. @end

本案例中，TRCollectionViewCustomLayout.m文件中的完整代码如下所示：

 

1. #import "TRCollectionViewCustomLayout.h"
3. @implementation TRCollectionViewCustomLayout
4. - (id)initWithCoder:(NSCoder *)aDecoder
5. {
6. self = [super initWithCoder:aDecoder];
7. if (self) {
8. [self initiate];
9. }
10. return self;
11. }
12. - (void)initiate
13. {
14. //设置Cell的大小
15. self.itemSize = CGSizeMake(100, 100);
16. //设置CollectionView的滚动方向
17. self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
18. //设置CollectionView的内边距
19. self.sectionInset = UIEdgeInsetsMake(100, 0, 100, 0);
20. //设置Cell之间的间距
21. self.minimumLineSpacing = 50;
22. }
24. //当边界改变时重新计算布局
25. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
26. {
27. return YES;
28. }
29. //返回所有Cell的布局属性
30. - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
31. {
32. //获取每一个Cell的布局属性
33. NSArray *array = [super layoutAttributesForElementsInRect:rect];
34. CGRect visibleRect;
35. visibleRect.origin = self.collectionView.contentOffset;
36. visibleRect.size = self.collectionView.bounds.size;
37. for (UICollectionViewLayoutAttributes *attributes in array) {
38. CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
39. CGFloat distance2 = distance / 100;
40. if(ABS(distance) < 100){
41. CGFloat zoom = 1 + 0.3* (1 - ABS(distance2));
42. attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1);
43. }
44. }
45. return array;
46. }
47. @end