iOS animtion動畫姑躲、關(guān)鍵幀動畫滾動時可點擊效果

以下所有內(nèi)容均為個人觀點睡扬,轉(zhuǎn)載請注明出處<簡書--小蝸牛吱呀之悠悠 >,謝謝黍析!

最近項目中需要實現(xiàn)一個視圖從右向左滑動卖怜,動畫播放過程子視圖需要能響應(yīng)點擊事件,效果和彈幕滾動過程支持點擊類似阐枣。

1马靠、首先想到的方案是在UIView視圖上放一個按鈕,然后使用animation動畫播放

[UIView animateWithDuration:15 animations:^{
        self.colorView.transform = CGAffineTransformMakeTranslation(-700, 0);
    } completion:^(BOOL finished) {
 }];

運行后發(fā)現(xiàn)侮繁,動畫播放過程中虑粥,點擊上面的按鈕,點擊事件不響應(yīng)宪哩。why!!

why?

2旦事、從動畫過程看,會不會是animation動畫播放過程涕癣,系統(tǒng)自動將視圖的用戶交互給關(guān)掉了呢仿贬?于是帶著這個疑問去查看animation動畫的頭文件,發(fā)現(xiàn)果然有這么一個枚舉UIViewAnimationOptionAllowUserInteraction存在品抽,于是趕緊將動畫修改成下面的樣子:

[UIView animateWithDuration:15 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        self.colorView.transform = CGAffineTransformMakeTranslation(-700, 0);
    } completion:^(BOOL finished) {
}];

很可惜储笑,運行后發(fā)現(xiàn)并沒有效果,這是什么原因呢圆恤?經(jīng)過一番研究后發(fā)現(xiàn)突倍,在animation動畫播放過程中,對視圖的坐標(biāo)設(shè)定是立即生效的(即使你看上去視圖是從右往左移動的)盆昙,也就是說此時這個視圖已經(jīng)處于CGAffineTransformMakeTranslation(-700, 0)所在的位置羽历,所以此時你的點擊操作并沒有被這個在滑動的視圖捕獲。既然沒有被捕獲到淡喜,那這個手勢被誰獲取到了呢秕磷?父視圖。

3炼团、既然手勢被父視圖獲取到了澎嚣,那么意味著我們可以獲取到此時手指點擊的坐標(biāo)

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 獲取到點擊的位置
       UITouch * touch = touches.anyObject;
       CGPoint point = [touch locationInView:self.view];
}

由于animation動畫播放過程,實際上移動的是layer層瘟芝,那么我們考慮是不是可以獲取到這個移動的layer呢易桃,然后通過比較layer的frame與point的位置關(guān)系來判斷這個手勢是否需要響應(yīng)。那么怎么獲取這個layer呢锌俱,我們的layer有這么一個屬性presentationLayer颈抚,這個屬性獲取到的就是當(dāng)前正在播放動畫的layer,于是touchesBegan方法修改如下

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 獲取到點擊的位置
    UITouch * touch = touches.anyObject;
    CGPoint point = [touch locationInView:self.view];

    CGRect frame1 = self.tapView.layer.presentationLayer.frame;
    CGRect frame2 = self.colorView.layer.presentationLayer.frame;
    
    frame1.origin.x += frame2.origin.x;
    frame1.origin.y += frame2.origin.y;
       if ( CGRectContainsPoint(frame1, point) ) {
           NSLog(@"contain");
       }
       // 方式2:hitT
}

由于tapView是colorView的子視圖,所以frame1的坐標(biāo)是相對于colorView的坐標(biāo)贩汉,但我們的point卻是相對于self.view的驱富,所以此時需要將坐標(biāo)轉(zhuǎn)換一下。修改完成后運行匹舞,效果正是我們想要的褐鸥。

4、通過demo驗證效果后就將效果放到自己的項目上去赐稽,可最后發(fā)現(xiàn)還是不行叫榕,這是為什么呢?于是考慮是不是我這個手勢被別的視圖捕獲了姊舵,沒有傳遞到self.view上面呢晰绎?查看圖層結(jié)構(gòu)后發(fā)現(xiàn),確實如此括丁,我們的點擊手勢被tableview給捕獲了荞下。到這里,我們穿插一下基本的事件傳遞過程史飞,我們的圖層結(jié)構(gòu)如下圖

image.png

從圖上我們可以看到尖昏,tableview與滾動視圖是同層級的關(guān)系,tableView是self.view的子視圖构资。那么當(dāng)我們點擊事件發(fā)生時抽诉,根據(jù)事件的傳遞規(guī)律,從self.view開始遍歷子視圖吐绵,前面提到迹淌,滑動視圖此時已經(jīng)不在手勢點擊的位置,所以它無法響應(yīng)事件己单,那么事件就被tableview捕獲了唉窃。
那么好了,原因就出在這里荷鼠,事件被tableview捕獲了,self.view的touchesBegan方法就不響應(yīng)榔幸。那么如何才能讓self.view獲得事件呢允乐?將tableview的userInterface關(guān)了,運行后發(fā)現(xiàn)是OK的削咆。但是牍疏,tableview需要響應(yīng)自己的事件,userInterface關(guān)了以后無法再響應(yīng)了拨齐。因此鳞陨,這個方式不可行。

5、考慮到touchesBegan是UIView的方法厦滤,那么可以為滑動視圖增加一個父視圖援岩,touchesBegan的處理交給這個父視圖來做。

image.png

注:關(guān)鍵幀動畫也同樣可以用此方法解決
demo地址鏈接

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掏导,一起剝皮案震驚了整個濱河市享怀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌趟咆,老刑警劉巖添瓷,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異值纱,居然都是意外死亡鳞贷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門虐唠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來搀愧,“玉大人,你說我怎么就攤上這事凿滤÷栝希” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵翁脆,是天一觀的道長眷蚓。 經(jīng)常有香客問我,道長反番,這世上最難降的妖魔是什么沙热? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮罢缸,結(jié)果婚禮上篙贸,老公的妹妹穿的比我還像新娘。我一直安慰自己枫疆,他們只是感情好爵川,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著息楔,像睡著了一般寝贡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上值依,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天圃泡,我揣著相機與錄音,去河邊找鬼愿险。 笑死颇蜡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播风秤,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼鳖目,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了唁情?” 一聲冷哼從身側(cè)響起疑苔,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎甸鸟,沒想到半個月后惦费,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡抢韭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年薪贫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刻恭。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡瞧省,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鳍贾,到底是詐尸還是另有隱情鞍匾,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布骑科,位于F島的核電站橡淑,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏咆爽。R本人自食惡果不足惜梁棠,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望斗埂。 院中可真熱鬧符糊,春花似錦、人聲如沸呛凶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽漾稀。三九已至模闲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間县好,已是汗流浹背围橡。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工暖混, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缕贡,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像晾咪,于是被迫代替她去往敵國和親收擦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353