iOS-高仿微信摇一摇动画效果加震动音效
概述
详细
代码下载:http://www.demodashi.com/demo/10707.html
众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类APP中也有一个摇一摇签到, 摇一摇随机选号等功能,下面以微信摇一摇功能来介绍实现原理.
对于摇一摇功能, 在iOS中系统默认为我们提供了摇一摇的功能检测API. iOS 中既然已经提供了接口, 我们直接调用就好
#import <QuartzCore/QuartzCore.h>
#import <AudioToolbox/AudioToolbox.h>
一、程序实现
实现原理:
1. 监听摇一摇方法
// 摇一摇开始
- (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 后创建的项目,仅仅实现第一步监听就可以实现,没有遇到这种问题.
- (BOOL)canBecomeFirstResponder {return YES;
}
3. 摇一摇阶段需要震动及声音.
摇动开始:
- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event {AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
}
摇动结束:
- (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 里面再移回来.
这里有两种方法:
方法一: 抽出来添加动画效果的方法, 在摇一摇结束方法里添加这个方法.
- (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"];
}
方法二. 在摇一摇开始和结束里添加摇动动画效果及菊花效果
/*** 摇动开始*/
- (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;
}
二、运行效果与界面截图
1、运行效果:
2、界面截图:
三、其他补充
当然也有使用摇一摇做其他功能的,可以在当结束摇动时,就发送一个网络请求作相关操作即可。
界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!
代码下载:http://www.demodashi.com/demo/10707.html
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
转载于:https://www.cnblogs.com/demodashi/p/8486464.html
iOS-高仿微信摇一摇动画效果加震动音效相关推荐
- 微信摇一摇动画效果加音效
http://www.oschina.net/p/shake-effect微信摇一摇动画效果加音效 转载于:https://www.cnblogs.com/rlm0909/p/3412529.html
- android 摇一摇动画效果,android 微信摇一摇动画效果
两张图片相对平移滑动, public void startAnim() { // 定义摇一摇动画动画 AnimationSet animup = new AnimationSet(true); Tra ...
- android 微信摇一摇动画效果
2019独角兽企业重金招聘Python工程师标准>>> 两张图片相对平移滑动, public void startAnim() { // 定义摇一摇动画动画 AnimationSet ...
- iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
2019独角兽企业重金招聘Python工程师标准>>> iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实 ...
- iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码
iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实现与TableViewCell的常用样式介绍 实现阴影圆角并存,渐变色背景 ...
- iOS高仿微信完整源码,网易爱玩APP源码等
iOS精选源码 iOS一种弹出视图效果带动画 一个快速便捷.无侵入.可扩展的动画弹框库 高仿Elk - 旅行货币转换器 iOS内分享的界面.功能一体化解决方案 使用Olami sdk实现一个语音查询股 ...
- iOS 高仿微信相机拍摄和编辑
效果描述: 1.自定义相机 拍摄视频和照片 2.切换前后摄像头.调整焦距/设置聚焦点.横屏拍摄 3.视频编辑:涂鸦.贴图.文字水印.视频裁剪 .添加背景音乐 4 .图片编辑:涂鸦.贴图.文字水印.马赛 ...
- iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定 图片滤镜 ...
- iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码...
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定 图片滤镜 ...
最新文章
- Artistic Style在windows下的使用(C/C++)
- 阿里云MVP北京闭门会圆满落幕 多把“利剑”助力开发者破阵蜕变
- HBase学习指南之HBase原理和Shell使用
- NotePad++学习总结
- f-GAN简介:GAN模型的生产车间
- 9. Approximate Inference
- hdu6356-Glad You Came【RMQ】
- 工作流学习——Activiti流程实例、任务管理四步曲 (zhuan)
- 最新 HTTP/2 漏洞曝光,直指 Kubernetes!
- 【你敢说你懂JS吗】——JS测试
- 排序算法性能和使用场景总结
- 海康visionmaster-软加密
- bt种子爬虫程序和种子解析(大蟒蛇语言编写)
- 中国科学院大学2017年高等代数考研试题
- PHP开票接口,云增值税发票API详情
- 如何修改 gitlab 的项目名称
- uniapp自定义导航栏与手机状态栏重叠问题
- 京瓷2010复印a4内容不全_京瓷1800打印机打印时设置了A4为什么打印不了复印正常...
- Uniapp|image无法显示图片
- Ambari2.7+HDP3.0安装(基于Centos7)
热门文章
- 深度学习数据集扩充代码
- 【NOMA】Non-Orthogonal Multiple Access (NOMA) for Cellular Future Radio Access(NOMA 原理)
- 摄影后期用计算机,摄影后期处理中计算机技术结合分析.doc
- memoQ中如何显示html预览,Trados、MemoQ和Wordfast 5文件实时预览查看及大批量查找和替换...
- 不会抠图?PS白学了,简单入门教你…
- 鸿蒙首批应用 微信,这就是首批支持Apple Watch的应用:微信亮了
- 直接播云点播免费使用方法
- STM32CubeMX系列|ADXL345传感器
- WAR文件信息泄露及利用
- html调用app store,调用App Store Connect Api