如何实现mobike我的贴纸功能

前言:

谈到摩拜,不得不提共享单车间的这场战争。当巨大的资本注入这个行业的时候,在短短的几个月就能发生翻天覆地的变化:无数的自行车行岌岌可危,骑行成为我们出行的一种新方式。我曾经认为的高损坏,高遗失等问题,在资本的推动下,甚至给了我一种这样的感觉:偷车的抱怨车太多,搞破坏的累到不行,资本的力量真是无穷尽!

正文:

言归正传,先上图回忆下,摩拜我的贴纸功能到底是什么样的


屏幕快照 2017-07-01 下午6.10.40.png

若要完成带有重力感应的小球,其实主要在两个点:

1.赋予小球重力属性及碰撞属性《UIDynamic》
2.手机移动时,重力方向动态改变 《CoreMotion》

此时,我们的目标就很明确了。

1.赋予小球重力属性及碰撞属性《UIDynamic》

1、UIDynamic隶属于UIKit框架,可以模拟现实世界动力驱动的动画,比如重力、碰撞、悬挂等。
2、任何遵守UIDynamicItem协议的对象可以进行物理仿真。UIView默认已经遵守了UIDynamicItem协议,因此任何UI控件都能做物理仿真;UICollectionViewLayoutAttributes类默认也遵守UIDynamicItem协议。

使用步骤

1、创建物理仿真器 UIDynamicAnimator

//bgView为仿真的有效范围
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:bgView];

2、添加物理仿真行为,UIDynamic提供了以下几种物理仿真行为:

UIGravityBehavior:重力行为
UICollisionBehavior:碰撞行为
UISnapBehavior:捕捉行为
UIPushBehavior:推动行为
UIAttachmentBehavior:附着行为
UIDynamicItemBehavior:动力元素行为

//添加重力仿真
_gravityBeahvior = [[UIGravityBehavior alloc] init];

3、开始仿真

//添加仿真行为,开始仿真
[_animator addBehavior:_gravityBeahvior];

完成重力感应和碰撞效果的小球,只需遵循以上三个步骤,具体细节可以直接看Demo。

细节

按照上面三个步骤,实际我们已经能够初尝这个动画效果了。但是,里面也有很多细节需要注意。
1、关于小球初始位置的处理。摩拜我的贴纸中,每次进入都是默认从顶部开始坠落。所以我为每个小球初始化了一个随机的x值,y=0。但是当小球个数过多时,可能会出现小球出现到仿真范围之外(摩拜中同样有此问题)。所以我将小球的初始x,y全部随机。

GBBall *ball = [[GBBall alloc] initWithFrame:CGRectMake([[self class] randValueBetween:0 and: (referenceViewSize.width - GBBALLWIDTH)], [[self class] randValueBetween:0 and: (referenceViewSize.height - GBBALLWIDTH)], GBBALLWIDTH, GBBALLWIDTH)];

2、在自定义的小球GBBall想碰撞时,有时候相邻之间的无法紧贴,原来此时小球仍以方形进行物理碰撞。iOS9在UIDynamicItem新增了collisionBoundsType(只读),所以需要改写GBBall中此属性

- (UIDynamicItemCollisionBoundsType)collisionBoundsType {
    return UIDynamicItemCollisionBoundsTypeEllipse;
}

2.手机移动时,重力方向动态改变 《CoreMotion》

CoreMotion是一个专门处理运动的框架,其中包含了两个部分加速度计和陀螺仪。通过此模块我们可以监听到手机的倾斜,更改重力仿真UIGravityBehavior的重力加速度方向。

[_motionManager startDeviceMotionUpdatesToQueue:queue withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) {
            if (!error) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    _gravityBeahvior.gravityDirection = CGVectorMake(motion.gravity.x, -motion.gravity.y);
                });
            }
        }];

我觉得看完这篇文章,对于摩拜我的贴纸中这个好玩的动画的实现,已经非常简单清晰。UIDynamicCoreMotion里面中,我没有做过细的描述,有兴趣的可以自己研究文档。
附上Demo:https://github.com/xxg90s/XXGravityBall

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 本文中所有代码演示均有GitHub源码,点击下载 UIDynamic简介 简介:UIKit动力学最大的特点是将现实...
    si1ence阅读 10,223评论 8 79
  • 简介 什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认...
    JonesCxy阅读 196评论 0 1
  • 目录 ** UIView 动画 ** ** Core Animation ** ** FaceBook POP动画...
    方向_4d0d阅读 1,596评论 0 3
  • 概述 最近群里有人私信我关于iOS物理引擎的知识,虽然UIDynamic在iOS7就引入了,但项目中还真没用到过,...
    杂雾无尘阅读 2,135评论 2 41
  • 从小看到娃娃,毛绒玩具就有一种特殊的感情,哪怕是现在26岁的我,依然对它们爱不释手,是一种情节,也是童年留下的记忆。
    95ddd43d77ae阅读 109评论 0 0