iOS仿微信搖一搖動畫效果加震動音效實(shí)例
眾所周知, 微信中的搖一搖功能: 搜索人/歌曲/電視,同樣在一些其他類APP中也有一個(gè)搖一搖簽到, 搖一搖隨機(jī)選號等功能,下面以微信搖一搖功能來介紹實(shí)現(xiàn)原理.

對于搖一搖功能, 在iOS中系統(tǒng)默認(rèn)為我們提供了搖一搖的功能檢測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. 搖一搖階段需要震動及聲音.
// 搖動開始
- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event {
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
}
// 搖動結(jié)束
- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {
if (motion ==UIEventSubtypeMotionShake ) {
// 1.添加搖動動畫
// 見第四點(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);
// 添加搖動聲音
AudioServicesPlaySystemSound (soundID);
// 3.設(shè)置震動
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
}
}
4. 搖一搖階段需要動畫效果.
微信的搖一搖功能是先在視圖上放一個(gè)搖后要顯示的圖片:手拿手機(jī)的圖片, 這個(gè)圖片就是上下兩半拼在一起給人一種一張圖片的感覺;當(dāng)檢測到搖一搖 捕捉到晃動事件后,上下兩張圖片分別上下做一個(gè)動畫移動(上面的一半往上移,下面的往下移),在completion 里面再移回來.
這里有兩種方法:
方法一: 抽出來添加動畫效果的方法, 在搖一搖結(jié)束方法里添加這個(gè)方法.
- (void)addAnimations {
// 讓imgup上下移動
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上下移動
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é)束里添加搖動動畫效果及菊花效果
/**
* 搖動開始
*/
- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event {
NSLog(@"開始搖了");
// 菊花顯示并開始轉(zhuǎn)動
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;
}];
}
/**
* 搖動結(jié)束
*/
- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {
NSLog(@"搖動結(jié)束");
// 不是搖一搖事件則返回
if (motion != UIEventSubtypeMotionShake) return;
// 1.添加搖動動畫
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)動并隱藏
[self.aiLoad stopAnimating];
self.aiLoad.hidden = YES;
}
當(dāng)然也有使用搖一搖做其他功能的,可以在當(dāng)結(jié)束搖動時(shí),就發(fā)送一個(gè)網(wǎng)絡(luò)請求作相關(guān)操作即可。
以上就是本文的全部內(nèi)容,希望對大家的學(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-03
IOS倒計(jì)時(shí)設(shè)置UIButton標(biāo)題title的抖動問題
這篇文章主要介紹了IOS倒計(jì)時(shí)設(shè)置UIButton標(biāo)題title的抖動問題,在發(fā)送驗(yàn)證碼后,button狀態(tài)需要變?yōu)閐isable,每隔一秒顯示倒計(jì)時(shí)時(shí)間,下面通過本文給大家介紹設(shè)置方法,一起看看吧2016-12-12
Objective-C實(shí)現(xiàn)身份證驗(yàn)證的方法示例
這篇文章主要給大家分享了Objective-C實(shí)現(xiàn)身份證驗(yàn)證的方法,文中給出了詳細(xì)的示例代碼,對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03
混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決
這篇文章主要為大家介紹了混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
iOS 修改alertViewController彈框的字體顏色及字體的方法
下面小編就為大家分享一篇iOS 修改alertViewController彈框的字體顏色及字體的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
詳解Xcode 9 設(shè)置 iOS無線真機(jī)調(diào)試
本篇文章主要介紹了詳解Xcode 9 設(shè)置 iOS無線真機(jī)調(diào)試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
iOS狀態(tài)欄frame計(jì)算問題的實(shí)現(xiàn)
這篇文章主要介紹了iOS狀態(tài)欄frame計(jì)算問題的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
MacOS無法掛載NFS Operation not permitted錯(cuò)誤解決辦法
這篇文章主要介紹了MacOS無法掛載NFS Operation not permitted錯(cuò)誤解決辦法的相關(guān)資料2017-02-02

