iOS仿微信摇一摇动画效果加震动音效实例

2025-05-29 0 90

众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类app中也有一个摇一摇签到, 摇一摇随机选号等功能,下面以微信摇一摇功能来介绍实现原理.

iOS仿微信摇一摇动画效果加震动音效实例

对于摇一摇功能, 在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;

}

当然也有使用摇一摇做其他功能的,可以在当结束摇动时,就发送一个网络请求作相关操作即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持快网idc。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS仿微信摇一摇动画效果加震动音效实例 https://www.kuaiidc.com/91066.html

相关文章

发表评论
暂无评论