iOS仿微信搖一搖動(dòng)畫效果加震動(dòng)音效實(shí)例
眾所周知, 微信中的搖一搖功能: 搜索人/歌曲/電視,同樣在一些其他類APP中也有一個(gè)搖一搖簽到, 搖一搖隨機(jī)選號(hào)等功能,下面以微信搖一搖功能來介紹實(shí)現(xiàn)原理.
對(duì)于搖一搖功能, 在iOS中系統(tǒng)默認(rèn)為我們提供了搖一搖的功能檢測(cè)API. iOS 中既然已經(jīng)提供了接口, 我們直接調(diào)用就好了.
#import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h>
實(shí)現(xiàn)原理
1. 監(jiān)聽搖一搖方法
// 搖一搖開始 - (void)motionBegan:(UIEventSubtype)motion withEvent:(nullable UIEvent *)event NS_AVAILABLE_IOS(3_0); // 搖一搖結(jié)束 - (void)motionEnded:(UIEventSubtype)motion withEvent:(nullable UIEvent *)event NS_AVAILABLE_IOS(3_0); // 搖一搖取消 - (void)motionCancelled:(UIEventSubtype)motion withEvent:(nullable UIEvent *)event NS_AVAILABLE_IOS(3_0);
2. 解決搖一搖失效的情況.
ps: 使用 Xcode6.x 后創(chuàng)建的項(xiàng)目,僅僅實(shí)現(xiàn)第一步監(jiān)聽就可以實(shí)現(xiàn),沒有遇到這種問題.
- (BOOL)canBecomeFirstResponder { return YES; }
3. 搖一搖階段需要震動(dòng)及聲音.
// 搖動(dòng)開始 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); }
// 搖動(dòng)結(jié)束 - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event { if (motion ==UIEventSubtypeMotionShake ) { // 1.添加搖動(dòng)動(dòng)畫 // 見第四點(diǎn), 推薦第四點(diǎn)的方法二 // 2.設(shè)置播放音效 SystemSoundID soundID; NSString *path = [[NSBundle mainBundle ] pathForResource:@"shake_sound_male" ofType:@"wav"]; AudioServicesCreateSystemSoundID((__bridge CFURLRef)[NSURL fileURLWithPath:path], &soundID); // 添加搖動(dòng)聲音 AudioServicesPlaySystemSound (soundID); // 3.設(shè)置震動(dòng) AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); } }
4. 搖一搖階段需要?jiǎng)赢嬓Ч?
微信的搖一搖功能是先在視圖上放一個(gè)搖后要顯示的圖片:手拿手機(jī)的圖片, 這個(gè)圖片就是上下兩半拼在一起給人一種一張圖片的感覺;當(dāng)檢測(cè)到搖一搖 捕捉到晃動(dòng)事件后,上下兩張圖片分別上下做一個(gè)動(dòng)畫移動(dòng)(上面的一半往上移,下面的往下移),在completion 里面再移回來.
這里有兩種方法:
方法一: 抽出來添加動(dòng)畫效果的方法, 在搖一搖結(jié)束方法里添加這個(gè)方法.
- (void)addAnimations { // 讓imgup上下移動(dòng) CABasicAnimation *translation2 = [CABasicAnimation animationWithKeyPath:@"position"]; translation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; translation2.fromValue = [NSValue valueWithCGPoint:CGPointMake(160, 115)]; translation2.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 40)]; translation2.duration = 0.5; translation2.repeatCount = 1; translation2.autoreverses = YES; // 讓imagdown上下移動(dòng) CABasicAnimation *translation = [CABasicAnimation animationWithKeyPath:@"position"]; translation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; translation.fromValue = [NSValue valueWithCGPoint:CGPointMake(160, 345)]; translation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 420)]; translation.duration = 0.5; translation.repeatCount = 1; translation.autoreverses = YES; [self.imgDown.layer addAnimation:translation forKey:@"translation"]; [self.imgUp.layer addAnimation:translation2 forKey:@"translation2"]; }
方法二. 在搖一搖開始和結(jié)束里添加搖動(dòng)動(dòng)畫效果及菊花效果
/** * 搖動(dòng)開始 */ - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { NSLog(@"開始搖了"); // 菊花顯示并開始轉(zhuǎn)動(dòng) self.aiLoad.hidden = NO; [self.aiLoad startAnimating]; AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); CGFloat offset = self.bgImgView.height * 0.5; CGFloat duration = 0.4; [UIView animateWithDuration:duration animations:^{ self.imgUp.y -= offset; self.imgDown.y += offset; }]; } /** * 搖動(dòng)結(jié)束 */ - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event { NSLog(@"搖動(dòng)結(jié)束"); // 不是搖一搖事件則返回 if (motion != UIEventSubtypeMotionShake) return; // 1.添加搖動(dòng)動(dòng)畫 CGFloat offset = self.bgImgView.height * 0.5; CGFloat duration = 0.4; [UIView animateWithDuration:duration animations:^{ self.imgUp.y += offset; self.imgDown.y -= offset; }]; // 菊花暫停轉(zhuǎn)動(dòng)并隱藏 [self.aiLoad stopAnimating]; self.aiLoad.hidden = YES; }
當(dāng)然也有使用搖一搖做其他功能的,可以在當(dāng)結(jié)束搖動(dòng)時(shí),就發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求作相關(guān)操作即可。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS應(yīng)用開發(fā)中使用設(shè)計(jì)模式中的觀察者模式的實(shí)例
這篇文章主要介紹了iOS應(yīng)用開發(fā)中使用設(shè)計(jì)模式中的觀察者模式的實(shí)例,包括Cocoa框架使用中的KVO機(jī)制的相關(guān)配合運(yùn)用,代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03IOS倒計(jì)時(shí)設(shè)置UIButton標(biāo)題title的抖動(dòng)問題
這篇文章主要介紹了IOS倒計(jì)時(shí)設(shè)置UIButton標(biāo)題title的抖動(dòng)問題,在發(fā)送驗(yàn)證碼后,button狀態(tài)需要變?yōu)閐isable,每隔一秒顯示倒計(jì)時(shí)時(shí)間,下面通過本文給大家介紹設(shè)置方法,一起看看吧2016-12-12Objective-C實(shí)現(xiàn)身份證驗(yàn)證的方法示例
這篇文章主要給大家分享了Objective-C實(shí)現(xiàn)身份證驗(yàn)證的方法,文中給出了詳細(xì)的示例代碼,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決
這篇文章主要為大家介紹了混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08iOS 修改alertViewController彈框的字體顏色及字體的方法
下面小編就為大家分享一篇iOS 修改alertViewController彈框的字體顏色及字體的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01詳解Xcode 9 設(shè)置 iOS無線真機(jī)調(diào)試
本篇文章主要介紹了詳解Xcode 9 設(shè)置 iOS無線真機(jī)調(diào)試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12iOS使用WebView生成長(zhǎng)截圖的第3種解決方案
這篇文章主要給大家介紹了關(guān)于iOS使用WebView生成長(zhǎng)截圖的第3種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09iOS狀態(tài)欄frame計(jì)算問題的實(shí)現(xiàn)
這篇文章主要介紹了iOS狀態(tài)欄frame計(jì)算問題的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06MacOS無法掛載NFS Operation not permitted錯(cuò)誤解決辦法
這篇文章主要介紹了MacOS無法掛載NFS Operation not permitted錯(cuò)誤解決辦法的相關(guān)資料2017-02-02