眾所周知, 微信中的搖一搖功能: 搜索人/歌曲/電視，同樣在一些其他類APP中也有一個搖一搖簽到, 搖一搖隨機(jī)選號等功能，下面以微信搖一搖功能來介紹實現(xiàn)原理.
對于搖一搖功能, 在iOS中系統(tǒng)默認(rèn)為我們提供了搖一搖的功能檢測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.添加搖動動畫 // 見第四點(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. 搖一搖階段需要動畫效果.
微信的搖一搖功能是先在視圖上放一個搖后要顯示的圖片:手拿手機(jī)的圖片, 這個圖片就是上下兩半拼在一起給人一種一張圖片的感覺；當(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í)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
