| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
CleBennetts
7年前发布

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 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1504059083041.html
UIDynamic iOS开发 移动开发