ionic 完美仿微信摇一摇
2016-03-23 15:28
831 查看
今天我们使用ionic框架完美仿制微信摇一摇功能,先来看看最终效果图
制作微信摇一摇功能需要调用 陀螺仪传感器(Device Motion)
参考文档地址http://api.ionic-china.com/help/action/Device%20Motion/Device%20Motion.html
播放音效需要 播放音乐(Native Audio)
参考文档地址http://api.ionic-china.com/help/action/Native%20Audio/Native%20Audio.html
附:中文ngCordova参考文档
基本思路:
绘制两层底层为静态层上层动画层 - 执行方法时隐藏静态层显示动画层 - 动画结束后隐藏动画层显示静态层
1.先用photoshop处理分离元素
2.用于平铺的背景层、静态层图片、动态层背景花、上半部图片、上半部阴影、下半部图片、下半部阴影、
3.先平铺绘制背景层
3.在背景层中心绘制图片
4.再来绘制动画层,先把背景层隐藏。不多赘述先画背景再画小花。
5.绘制上半部背景、上半部图片以及阴影部分。
6.按照相同方法绘制好下半部分,效果图。注意我们是一块一块绘制的,所以可以完美适配任何分辨率设备哦。
7.现在使用CSS3给元素指定动画,注意:使用transform是开启GPU硬件加速提升流畅度
8.写代码检测获取陀螺仪数据执行动画,先使用ionic小助手添加Device Motion和Native Audio插件(前面已经介绍过)记得先引用ngCordova模块。
Device Motion插件检测手机xyz三个方向数值是±10 其中:XY是手机旋转。Z是翻转正面是+10,反面是-10
如果用力摇晃手机会超出这个数值,就是根据这个做摇一摇
html中给
animetebg添加ng-show=”animetebg.show”
shakebg添加ng-hide=”shakebg.hide”
body标签添加ng-controller=”startCtrl”
app.js添加以下代码,相关说明已经在代码注释。
ionic版本:1.7.14
SDK:API23
源码下载地址:http://download.csdn.net/detail/ionic_china/9470449
APK下载地址:http://pan.baidu.com/s/1c0K8wTy
PSD下载地址:http://pan.baidu.com/s/1o7kCx2y
ionic中文群:65048636 欢迎大家来这里 共同、分享、进步
制作微信摇一摇功能需要调用 陀螺仪传感器(Device Motion)
参考文档地址http://api.ionic-china.com/help/action/Device%20Motion/Device%20Motion.html
播放音效需要 播放音乐(Native Audio)
参考文档地址http://api.ionic-china.com/help/action/Native%20Audio/Native%20Audio.html
附:中文ngCordova参考文档
基本思路:
绘制两层底层为静态层上层动画层 - 执行方法时隐藏静态层显示动画层 - 动画结束后隐藏动画层显示静态层
1.先用photoshop处理分离元素
2.用于平铺的背景层、静态层图片、动态层背景花、上半部图片、上半部阴影、下半部图片、下半部阴影、
3.先平铺绘制背景层
<div class="shakebg"></div>
3.在背景层中心绘制图片
<div class="shakebg"> <img src="img/shakeIcon.png"/> </div>
4.再来绘制动画层,先把背景层隐藏。不多赘述先画背景再画小花。
<div class="animetebg"> <img class="flower" src="img/flower.png" /> </div>
5.绘制上半部背景、上半部图片以及阴影部分。
<div class="animetebg"> <img class="flower" src="img/flower.png" /> <div class="topShakeBox"> <img class="topShake" src="img/topShake.png" /> <div class="topBar"></div> </div> </div>
6.按照相同方法绘制好下半部分,效果图。注意我们是一块一块绘制的,所以可以完美适配任何分辨率设备哦。
<div class="animetebg"> <img class="flower" src="img/flower.png" /> <div class="topShakeBox"> <img class="topShake" src="img/topShake.png" /> <div class="topBar"></div> </div> <div class="bottomShakeBox"> <div class="bottomBar"></div> <img class="bottomShake" src="img/bottomShake.png" /> </div> </div>
7.现在使用CSS3给元素指定动画,注意:使用transform是开启GPU硬件加速提升流畅度
.animetebg .topShakeBox{ -webkit-animation: topShakeBoxAnimete 1s ease-in-out; animation:topShakeBoxAnimete 1s ease-in-out; } .animetebg .bottomShakeBox{ -webkit-animation: bottomShakeBoxAnimete 1s ease-in-out; animation:bottomShakeBoxAnimete 1s ease-in-out; } @keyframes topShakeBoxAnimete { 0% { -webkit-transform:translateY(-5px); transform:translateY(-5px); } 50% { -webkit-transform:translateY(-100px); transform:translateY(-100px); } 100% { -webkit-transform:translateY(-0px); transform:translateY(-0px); } } @keyframes bottomShakeBoxAnimete { 0% { -webkit-transform:translateY(5px); transform:translateY(5px); } 50% { -webkit-transform:translateY(100px); transform:translateY(100px); } 100% { -webkit-transform:translateY(0px); transform:translateY(0px); } }
8.写代码检测获取陀螺仪数据执行动画,先使用ionic小助手添加Device Motion和Native Audio插件(前面已经介绍过)记得先引用ngCordova模块。
Device Motion插件检测手机xyz三个方向数值是±10 其中:XY是手机旋转。Z是翻转正面是+10,反面是-10
如果用力摇晃手机会超出这个数值,就是根据这个做摇一摇
html中给
animetebg添加ng-show=”animetebg.show”
shakebg添加ng-hide=”shakebg.hide”
body标签添加ng-controller=”startCtrl”
app.js添加以下代码,相关说明已经在代码注释。
.controller("startCtrl",function($scope,$interval,$timeout,$ionicPlatform,$cordovaNativeAudio,$cordovaDeviceMotion){ $scope.shakebg = [{hide:false}]; $scope.animetebg = [{show:false}]; $ionicPlatform.ready(function() {//载入音乐资源 $cordovaNativeAudio .preloadSimple('click', 'src/shake_sound.mp3',1,1) }); var motiontime; //获取陀螺仪数据方法 $scope.getMotionTime = function(){ motiontime = $interval( function() { $cordovaDeviceMotion .getCurrentAcceleration() .then(function(motion) { if(motion.x > 11 || motion.x < -11 || motion.y > 11 || motion.y < -11){ //手机向任意方向用力摇晃 $scope.showAnimete();//执行动画部分 $cordovaNativeAudio.play('click');//播放音乐 } }, function(err) { alert("陀螺仪错误 "+err); }); }, 100 ); }; $scope.getMotionTime();//开启时钟获取数据 //动画方法 $scope.showAnimete = function(){ $interval.cancel(motiontime);//停止掉获取数据时钟 $scope.shakebg.hide = true;//隐藏背景层 $scope.animetebg.show = true;//显示动画层 var timer_b = $timeout( function() {//动画结束 $scope.animetebg.show = false;//隐藏动画层 $scope.shakebg.hide = false;//显示背景层 $scope.getMotionTime();//重新开启获取数据时钟 }, 1000 ).then( function() { $timeout.cancel(timer_b); } ); }; })
ionic版本:1.7.14
SDK:API23
源码下载地址:http://download.csdn.net/detail/ionic_china/9470449
APK下载地址:http://pan.baidu.com/s/1c0K8wTy
PSD下载地址:http://pan.baidu.com/s/1o7kCx2y
ionic中文群:65048636 欢迎大家来这里 共同、分享、进步
相关文章推荐
- 微信博客
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- 自定义ViewGroup打造微信朋友圈之九宫图效果
- 微信支付接口遇到的问题解决
- 微信,是怎么过来的
- 微信,是怎么过来的
- 微信入门 ——《微…
- 【小程序】使用io流实现对字符串的编码和解码
- 使用Ping++为你的Wordpress博客一键集成支付功能的插件使用图文教程
- iOS 自定义微信分享底部弹出选择界面
- 微信JS-SDK实现自定义分享功能,分享给朋友,分享到QQ,分享到微博
- 微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈,后台实现
- 关于微信公众号jsapi支付传值的问题
- 开发者了解---微信公众号(服务号、订阅号、企业号)的区别
- C#文件搜索小程序
- 微信web开发者工具的使用
- 微信企业号开发(八) -jssdk的使用(调用微信拍照)
- 微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈
- 【iOS】原生微信登录和分享
- 微信APP支付-Java后台实现