众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视，同样在一些其他类app中也有一个摇一摇签到, 摇一摇随机选号等功能，下面以微信摇一摇功能来介绍实现原理.
对于摇一摇功能, 在ios中系统默认为我们提供了摇一摇的功能检测api. ios 中既然已经提供了接口, 我们直接调用就好了.
|
1
2
|
#import <quartzcore/quartzcore.h>#import <audiotoolbox/audiotoolbox.h> |
实现原理
1. 监听摇一摇方法
|
1
2
3
4
5
6
|
// 摇一摇开始- (void)motionbegan:(uieventsubtype)motion withevent:(nullable uievent *)event ns_available_ios(3_0);// 摇一摇结束- (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 后创建的项目,仅仅实现第一步监听就可以实现,没有遇到这种问题.
|
1
2
3
|
- (bool)canbecomefirstresponder { return yes;} |
3. 摇一摇阶段需要震动及声音.
|
1
2
3
4
|
// 摇动开始- (void)motionbegan:(uieventsubtype)motion withevent:(uievent *)event { audioservicesplaysystemsound(ksystemsoundid_vibrate);} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 摇动结束- (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 里面再移回来.
这里有两种方法:
方法一: 抽出来添加动画效果的方法, 在摇一摇结束方法里添加这个方法.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
- (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"];} |
方法二. 在摇一摇开始和结束里添加摇动动画效果及菊花效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
/** * 摇动开始 */- (void)motionbegan:(uieventsubtype)motion withevent:(uievent *)event { nslog(@"开始摇了"); // 菊花显示并开始转动 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; }];}/** * 摇动结束 */- (void)motionended:(uieventsubtype)motion withevent:(uievent *)event { nslog(@"摇动结束"); // 不是摇一摇事件则返回 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; }]; // 菊花暂停转动并隐藏 [self.aiload stopanimating]; self.aiload.hidden = yes;} |
当然也有使用摇一摇做其他功能的,可以在当结束摇动时，就发送一个网络请求作相关操作即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/6e5b452438b5
