UIDynamic物理引擎
<h2>概述</h2> <p>最近群里有人私信我关于iOS物理引擎的知识,虽然UIDynamic在iOS7就引入了,但项目中还真没用到过,就简单研究了下。由于本demo很简单,就没有上传GitHub,想要源码的可以进文章底部的技术群获取。</p> <h2>一、基本知识</h2> <p>UIDynamic可以为继承UIView的控件添加物理行为。可以看下这些API</p> <ul> <li> <p>Dynamic Animator 动画者,为动力学元素提供物理学相关的能力及动画,同时为这些元素提供相关的上下文,是动力学元素与底层iOS物理引擎之间的中介,将Behavior对象添加到Animator即可实现动力仿真</p> </li> <li> <p>Dynamic Animator Item:动力学元素,是任何遵守了UIDynamic协议的对象,从iOS7开始,UIView和UICollectionViewLayoutAttributes默认实现协议,如果自定义对象实现了该协议,即可通过Dynamic Animator实现物理仿真。</p> </li> <li> <p>UIDynamicBehavior:仿真行为,是动力学行为的父类,基本的动力学行为类包括:</p> </li> </ul> <ul> <li> <p>UIGravityBehavior 重力行为</p> </li> <li> <p>UICollisionBehavior 碰撞行为</p> </li> <li> <p>UIAttachmentBehavior 吸附行为</p> </li> <li> <p>UISnapBehavior 迅猛移动弹跳摆动行为</p> </li> <li> <p>UIPushBehavior 推动行为</p> </li> </ul> <p>具体实现步骤:</p> <ol> <li> <p>创建一个仿真者[UIDynamicAnimator] 用来仿真所有的物理行为</p> </li> <li> <p>创建具体的物理仿真行为[如重力UIGravityBehavior]</p> </li> <li> <p>将物理仿真行为添加给仿真者实现仿真效果。</p> </li> </ol> <h3>二、单行为效果</h3> <p>我这里简单写几个行为事例,其他创建方法基本和这一样,可以自己尝试:</p> <h3>1、重力效果:</h3> <pre> // 创建一个仿真者[UIDynamicAnimator] 用来仿真物理行为 UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; // 创建重力的物理仿真行为,并设置具体的items(需要仿真的view) UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[view]]; // 将重力仿真行为添加给仿真者实现仿真效果,开始仿真 [animator addBehavior:gravity];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2a7bd252d44d5975b97a888a9d839f44.gif"></p> <h3>2、碰撞效果:</h3> <p>是不是很简单,咱们再来一个碰撞效果:</p> <pre> // 碰撞检测 UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[view]]; // 设置不要出边界,碰到边界会被反弹 collision.translatesReferenceBoundsIntoBoundary = YES; // 开始仿真 [animator addBehavior:collision];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/058abbd00157547ad92029ef0b8dd52e.gif"></p> <p>碰撞效果</p> <h3>3、摆动效果:</h3> <pre> // 创建震动行为,snapPoint是它的作用点 self.snap = [[UISnapBehavior alloc] initWithItem:view snapToPoint:view.center]; // 开始仿真 [animator addBehavior:collision];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/78068ba3e71ea7ba17d6f9b143c2fe8a.gif"></p> <p>摆动效果</p> <p>单效果创建都差不多,这里只写几个简单的,其他的可以看我参考的这篇文章 <a href="/misc/goto?guid=4959751844295138872" rel="nofollow,noindex">http://www.jianshu.com/p/e096d2dda478</a></p> <h2>三、组合行为效果</h2> <p>把单效果稍微组合一下:</p> <h3>1、重力加碰撞:</h3> <pre> // 创建一个仿真者[UIDynamicAnimator] 用来仿真物理行为 UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; // 创建重力的物理仿真行为,并设置具体的items(需要仿真的view) _gravity = [[UIGravityBehavior alloc] init]; _collision = [[UICollisionBehavior alloc] init]; _collision.translatesReferenceBoundsIntoBoundary = YES; // 将重力仿真行为添加给仿真者实现仿真效果,开始仿真 [self.animator addBehavior:_gravity]; [self.animator addBehavior:_collision]; // 为view添加重力效果 [self.gravity addItem:view]; // 为view添加碰撞效果 [self.collision addItem:view];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e387c8904824bd040e860e23060f83f5.gif"></p> <p>重力加碰撞</p> <h3>2、重力加弹跳:</h3> <pre> // 动态媒介 UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; [self.animators addObject:animator]; // 重力 UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[square]]; [animator addBehavior:gravity]; // 碰撞 UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[square]]; collision.collisionDelegate = self; [collision addBoundaryWithIdentifier:@"barrier" forPath:[UIBezierPath bezierPathWithRect:self.view.bounds]]; collision.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:collision]; // 动力学属性 UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[square]]; itemBehavior.elasticity = 1; [animator addBehavior:itemBehavior];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1800780e109efa193bcce55c9adcfbb4.gif"></p> <p>重力加弹跳,酷炫吧?</p> <h2>四、大厂用到的实际效果</h2> <p>一些大厂在利用这些效果,比如苹果的iMessage消息滚动视觉差效果、百度外卖重力感应(这个用到了重力感应)、摩拜单车贴纸效果,接下来咱们就逐个实现一下这些效果:</p> <h3>1、防iMessage滚动效果:</h3> <p>这里参考了著名开发者王维 <a href="/misc/goto?guid=4959751844388806620" rel="nofollow,noindex">@onevcat</a> 重的一篇文章</p> <pre> // 自定义UICollectionViewFlowLayout @interface WZBCollectionViewLayout : UICollectionViewFlowLayout // 重写prepareLayout方法 - (void)prepareLayout { [super prepareLayout]; if (!_animator) { // 创建一个仿真者[UIDynamicAnimator] 用来仿真物理行为 _animator = [[UIDynamicAnimator alloc] initWithCollectionViewLayout:self]; CGSize contentSize = [self collectionViewContentSize]; NSArray *items = [super layoutAttributesForElementsInRect:CGRectMake(0, 0, contentSize.width, contentSize.height)]; for (UICollectionViewLayoutAttributes *item in items) { // 创建一个吸附行为 UIAttachmentBehavior *spring = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:item.center]; spring.length = 0; spring.damping = .8; spring.frequency = .5; [_animator addBehavior:spring]; } } } // 重写这个方法刷新布局 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { UIScrollView *scrollView = self.collectionView; CGFloat scrollDeltaY = newBounds.origin.y - scrollView.bounds.origin.y; CGFloat scrollDeltaX = newBounds.origin.x - scrollView.bounds.origin.x; CGPoint touchLocation = [scrollView.panGestureRecognizer locationInView:scrollView]; for (UIAttachmentBehavior *spring in _animator.behaviors) { CGPoint anchorPoint = spring.anchorPoint; CGFloat distanceFromTouch = fabs(touchLocation.y - anchorPoint.y); CGFloat scrollResistance = distanceFromTouch / 2000; UICollectionViewLayoutAttributes *item = (id)[spring.items firstObject]; CGPoint center = item.center; center.y += (scrollDeltaY > 0) ? MIN(scrollDeltaY, scrollDeltaY * scrollResistance) : MAX(scrollDeltaY, scrollDeltaY * scrollResistance); CGFloat distanceFromTouchX = fabs(touchLocation.x - anchorPoint.x); center.x += (scrollDeltaX > 0) ? MIN(scrollDeltaX, scrollDeltaX * distanceFromTouchX / 2000) : MAX(scrollDeltaX, scrollDeltaX * distanceFromTouchX / 2000); item.center = center; [_animator updateItemUsingCurrentState:item]; } return NO; }</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/753c846d0c917af02f43af0926535c09.gif"></p> <p>防iMessage滚动效果</p> <h3>2、防摩拜单车贴纸效果:</h3> <pre> // 这里需要创建一个监听运动的管理者用来监听重力,然后实时改变重力方向 _motionManager = [[CMMotionManager alloc] init]; // 设备状态更新帧率 _motionManager.deviceMotionUpdateInterval = 0.01; // 创建view for (NSInteger i = 0; i < 40; i++) { UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MobikeTest"]]; imageView.frame = CGRectMake(100, 0, 50, 50); imageView.layer.masksToBounds = YES; imageView.layer.cornerRadius = 25; [self.view addSubview:imageView]; // 添加重力效果 [self.gravity addItem:imageView]; // 碰撞效果 [self.collision addItem:imageView]; self.dynamicItem.elasticity = .7; // 添加动力学属性 [self.dynamicItem addItem:imageView]; } // 开始监听 [self.motionManager startDeviceMotionUpdatesToQueue:NSOperationQueue.mainQueue withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) { // 设置重力方向 self.gravity.gravityDirection = CGVectorMake(motion.gravity.x * 3, -motion.gravity.y * 3); }];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7c91f3a2c322d525b8f12d7938ba2330.gif"></p> <p>防摩拜单车贴纸效果</p> <h3>3、防百度外卖首页重力感应:</h3> <pre> // 这里需要创建一个监听运动的管理者用来监听重力方向,然后实时改变UI _motionManager = [[CMMotionManager alloc] init]; // 加速计更新频率,我这里设置每隔0.06s更新一次,也就是说,每隔0.06s会调用一次下边这个监听的block self.motionManager.accelerometerUpdateInterval = 0.06; // 开始监听 [self.motionManager startAccelerometerUpdatesToQueue:NSOperationQueue.mainQueue withHandler:^(CMAccelerometerData * _Nullable accelerometerData, NSError * _Nullable error) { // 获取加速计在x方向上的加速度 CGFloat x = accelerometerData.acceleration.x; // collectionView的偏移量 CGFloat offSetX = self.collectionView.contentOffset.x; CGFloat offSetY = self.collectionView.contentOffset.y; // 动态修改偏移量 offSetX -= 15 * x; CGFloat maxOffset = self.collectionView.contentSize.width + 15 - self.view.frame.size.width; // 判断最大和最小的偏移量 if (offSetX > maxOffset) { offSetX = maxOffset; } else if (offSetX < -15) { offSetX = -15; } // 动画修改collectionView的偏移量 [UIView animateWithDuration:0.06 animations:^{ [self.collectionView setContentOffset:CGPointMake(offSetX, offSetY) animated:NO]; }]; }];</pre> <p>具体效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a1b1f54e48ef404e5fb19739a5371df6.gif"></p> <p>防百度外卖首页重力感应</p> <h3>总结</h3> <ul> <li> <p>本篇文章参考了</p> </li> </ul> <ul> <li> <p><a href="/misc/goto?guid=4959751844295138872" rel="nofollow,noindex">iOS中UIDynamic物理仿真详解</a></p> </li> <li> <p><a href="/misc/goto?guid=4959751844476429205" rel="nofollow,noindex">王巍的技术博客</a></p> </li> </ul> <ul> <li> <p>最后几个效果图有点失真,具体效果可以找我要demo看</p> </li> </ul> <p>来自:http://www.jianshu.com/p/bed8f94c204d</p> <p> </p>
本文由用户 CleBennetts 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!