如何實(shí)現(xiàn)mobike我的貼紙功能

前言:

談到摩拜,不得不提共享單車(chē)間的這場(chǎng)戰(zhàn)爭(zhēng)。當(dāng)巨大的資本注入這個(gè)行業(yè)的時(shí)候,在短短的幾個(gè)月就能發(fā)生翻天覆地的變化:無(wú)數(shù)的自行車(chē)行岌岌可危,騎行成為我們出行的一種新方式。我曾經(jīng)認(rèn)為的高損壞,高遺失等問(wèn)題,在資本的推動(dòng)下,甚至給了我一種這樣的感覺(jué):偷車(chē)的抱怨車(chē)太多,搞破壞的累到不行,資本的力量真是無(wú)窮盡!

正文:

言歸正傳,先上圖回憶下,摩拜我的貼紙功能到底是什么樣的


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

若要完成帶有重力感應(yīng)的小球,其實(shí)主要在兩個(gè)點(diǎn):

1.賦予小球重力屬性及碰撞屬性《UIDynamic》
2.手機(jī)移動(dòng)時(shí),重力方向動(dòng)態(tài)改變 《CoreMotion》

此時(shí),我們的目標(biāo)就很明確了。

1.賦予小球重力屬性及碰撞屬性《UIDynamic》

1、UIDynamic隸屬于UIKit框架,可以模擬現(xiàn)實(shí)世界動(dòng)力驅(qū)動(dòng)的動(dòng)畫(huà),比如重力、碰撞、懸掛等。
2、任何遵守UIDynamicItem協(xié)議的對(duì)象可以進(jìn)行物理仿真。UIView默認(rèn)已經(jīng)遵守了UIDynamicItem協(xié)議,因此任何UI控件都能做物理仿真;UICollectionViewLayoutAttributes類(lèi)默認(rèn)也遵守UIDynamicItem協(xié)議。

使用步驟

1、創(chuàng)建物理仿真器 UIDynamicAnimator

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

2、添加物理仿真行為,UIDynamic提供了以下幾種物理仿真行為:

UIGravityBehavior:重力行為
UICollisionBehavior:碰撞行為
UISnapBehavior:捕捉行為
UIPushBehavior:推動(dòng)行為
UIAttachmentBehavior:附著行為
UIDynamicItemBehavior:動(dòng)力元素行為

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

3、開(kāi)始仿真

//添加仿真行為,開(kāi)始仿真
[_animator addBehavior:_gravityBeahvior];

完成重力感應(yīng)和碰撞效果的小球,只需遵循以上三個(gè)步驟,具體細(xì)節(jié)可以直接看Demo。

細(xì)節(jié)

按照上面三個(gè)步驟,實(shí)際我們已經(jīng)能夠初嘗這個(gè)動(dòng)畫(huà)效果了。但是,里面也有很多細(xì)節(jié)需要注意。
1、關(guān)于小球初始位置的處理。摩拜我的貼紙中,每次進(jìn)入都是默認(rèn)從頂部開(kāi)始?jí)嬄洹K晕覟槊總€(gè)小球初始化了一個(gè)隨機(jī)的x值,y=0。但是當(dāng)小球個(gè)數(shù)過(guò)多時(shí),可能會(huì)出現(xiàn)小球出現(xiàn)到仿真范圍之外(摩拜中同樣有此問(wèn)題)。所以我將小球的初始x,y全部隨機(jī)。

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想碰撞時(shí),有時(shí)候相鄰之間的無(wú)法緊貼,原來(lái)此時(shí)小球仍以方形進(jìn)行物理碰撞。iOS9在UIDynamicItem新增了collisionBoundsType(只讀),所以需要改寫(xiě)GBBall中此屬性

- (UIDynamicItemCollisionBoundsType)collisionBoundsType {
    return UIDynamicItemCollisionBoundsTypeEllipse;
}

2.手機(jī)移動(dòng)時(shí),重力方向動(dòng)態(tài)改變 《CoreMotion》

CoreMotion是一個(gè)專(zhuān)門(mén)處理運(yùn)動(dòng)的框架,其中包含了兩個(gè)部分加速度計(jì)和陀螺儀。通過(guò)此模塊我們可以監(jiān)聽(tīng)到手機(jī)的傾斜,更改重力仿真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);
                });
            }
        }];

我覺(jué)得看完這篇文章,對(duì)于摩拜我的貼紙中這個(gè)好玩的動(dòng)畫(huà)的實(shí)現(xiàn),已經(jīng)非常簡(jiǎn)單清晰。UIDynamicCoreMotion里面中,我沒(méi)有做過(guò)細(xì)的描述,有興趣的可以自己研究文檔。
附上Demo:https://github.com/xxg90s/XXGravityBall

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文中所有代碼演示均有GitHub源碼,點(diǎn)擊下載 UIDynamic簡(jiǎn)介 簡(jiǎn)介:UIKit動(dòng)力學(xué)最大的特點(diǎn)是將現(xiàn)實(shí)...
    si1ence閱讀 10,494評(píng)論 8 79
  • 簡(jiǎn)介 什么是UIDynamic UIDynamic是從iOS 7開(kāi)始引入的一種新技術(shù),隸屬于UIKit框架 可以認(rèn)...
    JonesCxy閱讀 253評(píng)論 0 1
  • 目錄 ** UIView 動(dòng)畫(huà) ** ** Core Animation ** ** FaceBook POP動(dòng)畫(huà)...
    方向_4d0d閱讀 1,830評(píng)論 0 3
  • 概述 最近群里有人私信我關(guān)于iOS物理引擎的知識(shí),雖然UIDynamic在iOS7就引入了,但項(xiàng)目中還真沒(méi)用到過(guò),...
    雜霧無(wú)塵閱讀 2,266評(píng)論 2 41
  • 從小看到娃娃,毛絨玩具就有一種特殊的感情,哪怕是現(xiàn)在26歲的我,依然對(duì)它們愛(ài)不釋手,是一種情節(jié),也是童年留下的記憶。
    95ddd43d77ae閱讀 145評(píng)論 0 0

友情鏈接更多精彩內(nèi)容