众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类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








发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。