美文网首页
摩拜贴纸的仿真动画以及传感器

摩拜贴纸的仿真动画以及传感器

作者: Miss_DQ | 来源:发表于2017-09-29 10:14 被阅读205次

先看看摩拜贴纸的动画:

知识点归纳:

  • 使用重力行为
  • 使用碰撞行为
  • 使用弹力行为
  • 使用屏幕旋转的传感器

代码实现:

  1. 创建若干个小球(UIImageView)
    NSMutableArray *ballViewArr = [NSMutableArray array];
    for(int i=0;i<imageArr.count;i++)
    {
        UIImageView * imgView = [[UIImageView alloc]initWithFrame:CGRectMake(arc4random()%((int)(self.view.bounds.size.width-diameter)), 0, diameter, diameter)];
        imgView.image = [UIImage imageNamed:imageArr[i]];
        imgView.layer.masksToBounds = YES;
        imgView.layer.cornerRadius = diameter/2;
        [self.view addSubview:imgView];
        
        [ballViewArr addObject:imgView];
    }

2.创建动画的播放者

    //_animator为全局定义的,否则不会生效,self.view为力学参考系,动力效果才能生效
    _animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];

3.创建动力行为,并赋给小球

    //添加重力
    _gravity = [[UIGravityBehavior alloc]initWithItems:ballViewArr];
    [_animator addBehavior:_gravity];
    
    //添加碰撞
    UICollisionBehavior *collision = [[UICollisionBehavior alloc]initWithItems:ballViewArr];
    collision.translatesReferenceBoundsIntoBoundary = YES;
    [_animator addBehavior:collision];
    
    //添加弹性
    UIDynamicItemBehavior *dyItem = [[UIDynamicItemBehavior alloc]initWithItems:ballViewArr];
    dyItem.allowsRotation = YES;
    dyItem.elasticity = 0.8;        //弹性系数
    [_animator addBehavior:dyItem];
    
    //还有很多behavior:UIAttachmentBehavior(附着行为)、UISnapBehavior(捕捉行为)、UIPushBehavior(推动行为)、UIDynamicItemBehavior(动力元素行为)

4.创建检测屏幕旋转的传感器,并计算新的弧度给重力行为属性赋值

-(void)initGyroManager
{
    self.motionManager = [[CMMotionManager alloc]init];
    self.motionManager.deviceMotionUpdateInterval = 0.01;
    
    [self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue mainQueue] withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) {
        //返回至原点的方位角
        double rotation = atan2(motion.attitude.pitch, motion.attitude.roll);
        NSLog(@"rotation:%f",motion.attitude.pitch);
        self.gravity.angle = rotation;
    }];
}
-(void)dealloc
{
    [self.motionManager stopDeviceMotionUpdates];
}

这样,代码就搞定咯。另外可以参考:iOS进阶 - UIDynamic以及iOS的一些传感器

此篇博客的Demo地址

相关文章

  • 摩拜贴纸的仿真动画以及传感器

    先看看摩拜贴纸的动画: 知识点归纳: 使用重力行为 使用碰撞行为 使用弹力行为 使用屏幕旋转的传感器 代码实现: ...

  • iOS 高仿摩拜单车我的贴纸效果

    高仿摩拜单车我的贴纸效果 昨天在看摩拜单车APP时发现了一个有趣的地方,如下图。多个小球可以随手机的晃动而滚动,并...

  • JBox2D运用-打造摩拜单车贴纸动画效果

    1. 准备工作 **1. 在github上下载JBox2d源码:https://github.com/jbox2d...

  • android仿摩拜贴纸碰撞|气泡碰撞

    转载请注明出处 准备 气泡碰撞最重要的就是边缘检测,气泡的运动涉及到重力,方向,重心,线速度,角速度,,等等一系列...

  • 摩拜 vs ofo

    1、车辆外观: 摩拜4 ofo3 摩拜科技感足 ofo略单薄 2、骑行体验: 摩拜3 ofo4 摩拜的实心...

  • box2d 圆形边界的创建

    本片文章是android仿摩拜贴纸碰撞|气泡碰撞的补充。好多同学私信问我,圆形边界如何创建,今天就写篇文章一起学习...

  • 2018-08-05 用户增长学习(一)

    摩拜红包车补贴增长学习,以及ONTO补贴思路设想 已通过某知识付费平台用户增长课程,学习了摩拜策略产品团队负责人张...

  • 摩拜单车产品分析

    背景介绍 最近已经被摩拜单车刷屏了,看一下摩拜单车的定义。 摩拜单车,英文名mobike,是由北京摩拜科技有限公司...

  • 摩拜单车,环保出行

    2016年北京摩拜科技有限公司在上海召开发布会,正式宣布摩拜单车服务登陆申城,开始了摩拜单车的征程。9月20号摩拜...

  • 我是不是错过一位姑娘

    “摩拜摩拜,顺应时代,摩拜摩拜,如我依赖”念叨着自创的顺口溜,柳尚骑着单车赶往下班回家的路上。路过一家咖啡馆,门前...

网友评论

      本文标题:摩拜贴纸的仿真动画以及传感器

      本文链接:https://www.haomeiwen.com/subject/vgwbextx.html