iOS仿微信搖一搖動畫效果加震動音效實例

更新時間：2017年03月29日 15:32:11 作者：smile麗語

這篇文章主要介紹了iOS仿微信搖一搖動畫效果加震動音效實例，詳細介紹了微信搖一搖功能的實現(xiàn)原理，非常具有實用價值，需要的朋友可以參考下。

眾所周知, 微信中的搖一搖功能: 搜索人/歌曲/電視，同樣在一些其他類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.設置播放音效
    SystemSoundID soundID; 
    NSString *path = [[NSBundle mainBundle ] pathForResource:@"shake_sound_male" ofType:@"wav"];
    AudioServicesCreateSystemSoundID((__bridge CFURLRef)[NSURL fileURLWithPath:path], &soundID);
    // 添加搖動聲音
    AudioServicesPlaySystemSound (soundID);

    // 3.設置震動
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
  }
}

4. 搖一搖階段需要動畫效果.

微信的搖一搖功能是先在視圖上放一個搖后要顯示的圖片:手拿手機的圖片, 這個圖片就是上下兩半拼在一起給人一種一張圖片的感覺；當檢測到搖一搖捕捉到晃動事件后，上下兩張圖片分別上下做一個動畫移動(上面的一半往上移,下面的往下移)，在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;
}

當然也有使用搖一搖做其他功能的,可以在當結(jié)束搖動時，就發(fā)送一個網(wǎng)絡請求作相關操作即可。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

iOS 更改UILabel某些字體樣式方法
本文通過實例代碼給大家介紹了iOS 更改UILabel某些字體樣式方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-03-03
iOS實現(xiàn)簡易的計算器
這篇文章主要為大家詳細介紹了iOS實現(xiàn)簡易的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
iOS CoreTelephony 實現(xiàn)監(jiān)聽通話狀態(tài)
這篇文章主要介紹了iOS CoreTelephony 實現(xiàn)監(jiān)聽通話狀態(tài) 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
判斷iPhone的WiFi是否打開的兩種方法
大家都知道判斷WiFi是否連接可以使用Reachability進行判斷，那么wifi是否打開應該怎么判斷呢？下面小編給大家分享兩種完全基于不同思路的方法，需要的朋友參考下
2016-11-11
iOS項目開發(fā)鍵盤彈出遮擋輸入框問題解決方案
大家在用IOS開發(fā)項目的時候，經(jīng)常出現(xiàn)鍵盤彈出遮擋輸入框問題，小編給大家整理的這個問題的處理方法，一起學習下。
2018-01-01
利用iOS手勢與scrollView代理實現(xiàn)圖片的放大縮小
這篇文章主要介紹了利用iOS的手勢、scrollView代理來實現(xiàn)圖片放大縮小的方法，文中通過示例代碼介紹的很詳細，相信對各位iOS開發(fā)者們來說具有一定的參考借鑒價值，有需要的朋友們下面來一起學習學習吧。
2017-01-01
iOS獲取到用戶當前位置
這篇文章主要為大家詳細介紹了iOS獲取到用戶當前位置,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
iOS11中的定位授權(quán)的解決方法
本篇文章主要介紹了iOS11中的定位授權(quán)的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
iOS實現(xiàn)后臺長時間運行
這篇文章主要為大家詳細介紹了iOS實現(xiàn)后臺長時間運行，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
IOS LaunchScreen設置啟動圖片與啟動頁停留時間詳解
這篇文章主要介紹了IOS LaunchScreen設置啟動圖片與啟動頁停留時間詳解的相關資料,需要的朋友可以參考下
2017-02-02