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

對于搖一搖功能, 在iOS中系統(tǒng)默認為我們提供了搖一搖的功能檢測API. iOS 中既然已經(jīng)提供了接口, 我們直接調(diào)用就好了.
#import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h>
實現(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àn)第一步監(jiān)聽就可以實現(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.添加搖動動畫
// 見第四點, 推薦第四點的方法二
// 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. 搖一搖階段需要動畫效果.
微信的搖一搖功能是先在視圖上放一個搖后要顯示的圖片:手拿手機的圖片, 這個圖片就是上下兩半拼在一起給人一種一張圖片的感覺;當(dāng)檢測到搖一搖 捕捉到晃動事件后,上下兩張圖片分別上下做一個動畫移動(上面的一半往上移,下面的往下移),在completion 里面再移回來.
這里有兩種方法:
方法一: 抽出來添加動畫效果的方法, 在搖一搖結(jié)束方法里添加這個方法.
- (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é)束搖動時,就發(fā)送一個網(wǎng)絡(luò)請求作相關(guān)操作即可。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS應(yīng)用開發(fā)中使用設(shè)計模式中的觀察者模式的實例
這篇文章主要介紹了iOS應(yīng)用開發(fā)中使用設(shè)計模式中的觀察者模式的實例,包括Cocoa框架使用中的KVO機制的相關(guān)配合運用,代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
IOS倒計時設(shè)置UIButton標(biāo)題title的抖動問題
這篇文章主要介紹了IOS倒計時設(shè)置UIButton標(biāo)題title的抖動問題,在發(fā)送驗證碼后,button狀態(tài)需要變?yōu)閐isable,每隔一秒顯示倒計時時間,下面通過本文給大家介紹設(shè)置方法,一起看看吧2016-12-12
混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決
這篇文章主要為大家介紹了混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
iOS 修改alertViewController彈框的字體顏色及字體的方法
下面小編就為大家分享一篇iOS 修改alertViewController彈框的字體顏色及字體的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
詳解Xcode 9 設(shè)置 iOS無線真機調(diào)試
本篇文章主要介紹了詳解Xcode 9 設(shè)置 iOS無線真機調(diào)試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
MacOS無法掛載NFS Operation not permitted錯誤解決辦法
這篇文章主要介紹了MacOS無法掛載NFS Operation not permitted錯誤解決辦法的相關(guān)資料2017-02-02

