swift - 頭像彈性動畫,類似即刻App的頭像動畫

首先附上 Demo地址

看下我們實現(xiàn)的效果

Untitled1.gif

效果實現(xiàn)應(yīng)該有很多種方法,先講一下涉及到的幾個動畫屬性

1.UIDynamicAnimator 仿真物理屬性,不懂的可以看下邊的網(wǎng)頁鏈接進行學習奧
UIDynamicAnimator - 仿真物理學
2.UISnapBehavior 動力彈性屬性涩拙,下邊附帶學習鏈接
UISnapBehavior - 動力學
3.UIAttachmentBehavior,吸附效果屬性,下邊是學習鏈接
UIAttachmentBehavior - 吸附效果
4.最后就是我們的UIPanGestureRecognizer這個我們都熟悉的手勢了耸采,

大家如果對這幾個物理仿真屬性不是太了解的也可以自行百度查找學習一下

為了方便外部使用兴泥,這里通過UIView的擴展(extension)實現(xiàn)上述效果,調(diào)用比較方便虾宇,
//object代表UIView的子類搓彻,直接調(diào)用這句話即可
object.signleDragable()

我們來看下代碼實現(xiàn)這塊,因為考慮到在擴展里邊沒辦法直接添加屬性嘱朽,因此旭贬。我們用到了OC里的那一套,用runtime來添加

上圖
image.png
上代碼

    private var zm_playground: UIView? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_playgroundKey!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_playgroundKey!) as? UIView
        }
    }
    
    private var zm_animator: UIDynamicAnimator? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_animatorKey!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_animatorKey!) as? UIDynamicAnimator
        }
    }
    
    private var zm_snapBehavior: UISnapBehavior? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_snapBehavior!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_snapBehavior!) as? UISnapBehavior
        }
    }
    
    private var zm_attachmentBehavior: UIAttachmentBehavior? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_attachmentBehavior!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_attachmentBehavior!) as? UIAttachmentBehavior
        }
    }
    
    private var zm_panGesture: UIPanGestureRecognizer? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_panGesture!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_panGesture!) as? UIPanGestureRecognizer
        }
    }
    
    private var zm_centerPoint: CGPoint? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_centerPoint!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_centerPoint!) as? CGPoint
        }
    }
    
    private var zm_damping: CGFloat? {
        set{
            objc_setAssociatedObject(self, RuntimeKey.zm_damping!, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        get{
            return objc_getAssociatedObject(self, RuntimeKey.zm_damping!) as? CGFloat
        }
    }

這里用這個runtime之前我還專門百度一下和OC的用法區(qū)別搪泳,果不其然稀轨。有人說key這個玩意不定義好容易為空,具體我也沒細看原因岸军。

因此奋刽,一方面為了方便,另一方面為了后期擴展艰赞,自己定義了一個結(jié)構(gòu)體來承載這些key
image.png
    static let zm_playgroundKey = UnsafeRawPointer.init(bitPattern: "zm_playgroundKey".hashValue)
    static let zm_animatorKey = UnsafeRawPointer.init(bitPattern: "zm_animatorKey".hashValue)
    static let zm_snapBehavior = UnsafeRawPointer.init(bitPattern: "zm_snapBehaviorKey".hashValue)
    static let zm_attachmentBehavior = UnsafeRawPointer.init(bitPattern: "zm_attachmentBehaviorKey".hashValue)
    static let zm_panGesture = UnsafeRawPointer.init(bitPattern: "zm_panGestureKey".hashValue)
    static let zm_centerPoint = UnsafeRawPointer.init(bitPattern: "zm_centerPointKey".hashValue)
    static let zm_damping = UnsafeRawPointer.init(bitPattern: "zm_dampingKey".hashValue)
我們來看下核心功能區(qū)佣谐,pan手勢那里都進行了什么操作
image.png
//swift 4.0語法,記得方法帶上@objc
    @objc func signlePanGesture(pan: UIPanGestureRecognizer) -> Void {
        let panLocation = pan.location(in: zm_playground)
        if pan.state == .began {
            signleUpdateSnapPoint()
            let offSet = UIOffsetMake(panLocation.x - (zm_centerPoint?.x)!, panLocation.y - (zm_centerPoint?.y)!)
            zm_animator?.removeAllBehaviors()
            zm_attachmentBehavior = UIAttachmentBehavior.init(item: self, offsetFromCenter: offSet, attachedToAnchor: panLocation)
            zm_animator?.addBehavior(zm_attachmentBehavior!)
        } else if pan.state == .changed {
            zm_attachmentBehavior?.anchorPoint = panLocation
        } else if (pan.state == .ended) || (pan.state == .cancelled) || (pan.state == .failed) {
            zm_animator?.addBehavior(zm_snapBehavior!)
            zm_animator?.removeBehavior(zm_attachmentBehavior!)
        }
    }

這里分了幾個步驟實現(xiàn)

1.當手勢觸發(fā)時方妖,添加UISnapBehavior 動力彈性屬性狭魂,UIAttachmentBehavior - 吸附效果,并且放到我們的UIDynamicAnimator 仿真物理屬性這個里邊
2.當手勢開始發(fā)生改變的時候党觅,我們看動畫可以看出雌澄,是一直跟著手勢滑動的,因此這里把中心點坐標拿了出來
3.當我們手勢結(jié)束仔役,取消掷伙,或者出現(xiàn)了不可控的情況導致手勢結(jié)束的情況下是己,移除當前動畫效果就可以了

以上就是關(guān)于swift版又兵,頭像仿物理引擎動畫。 Demo地址

有疑問的同學,可以下方評論區(qū)探討奧
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沛厨,一起剝皮案震驚了整個濱河市宙地,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌逆皮,老刑警劉巖宅粥,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異电谣,居然都是意外死亡秽梅,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門剿牺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來企垦,“玉大人,你說我怎么就攤上這事晒来〕睿” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵湃崩,是天一觀的道長荧降。 經(jīng)常有香客問我,道長攒读,這世上最難降的妖魔是什么朵诫? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮整陌,結(jié)果婚禮上拗窃,老公的妹妹穿的比我還像新娘。我一直安慰自己泌辫,他們只是感情好随夸,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著震放,像睡著了一般宾毒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上殿遂,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天诈铛,我揣著相機與錄音,去河邊找鬼墨礁。 笑死幢竹,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的恩静。 我是一名探鬼主播焕毫,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼蹲坷,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了邑飒?” 一聲冷哼從身側(cè)響起循签,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎疙咸,沒想到半個月后县匠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡撒轮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年乞旦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片题山。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡杆查,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出臀蛛,到底是詐尸還是另有隱情亲桦,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布浊仆,位于F島的核電站客峭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏抡柿。R本人自食惡果不足惜舔琅,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望洲劣。 院中可真熱鬧备蚓,春花似錦、人聲如沸囱稽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽战惊。三九已至流昏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吞获,已是汗流浹背况凉。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留各拷,地道東北人刁绒。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像烤黍,于是被迫代替她去往敵國和親知市。 傳聞我的和親對象是個殘疾皇子粮坞,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容