ionic 完美仿微信摇一摇
今天我们使用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.先平铺绘制背景层
1 <div class="shakebg"></div>
4.在背景层中心绘制图片
1 <div class="shakebg"> <img src="img/shakeIcon.png"/> </div>
5.再来绘制动画层,先把背景层隐藏。不多赘述先画背景再画小花。
1 <div class="animetebg"> 2 <img class="flower" src="img/flower.png" /> 3 </div>
6.绘制上半部背景、上半部图片以及阴影部分。
1 <div class="animetebg"> 2 <img class="flower" src="img/flower.png" /> 3 <div class="topShakeBox"> 4 <img class="topShake" src="img/topShake.png" /> 5 <div class="topBar"></div> 6 </div> 7 </div>
7.按照相同方法绘制好下半部分,效果图。注意我们是一块一块绘制的,所以可以完美适配任何分辨率设备哦。
1 <div class="animetebg"> 2 <img class="flower" src="img/flower.png" /> 3 <div class="topShakeBox"> 4 <img class="topShake" src="img/topShake.png" /> 5 <div class="topBar"></div> 6 </div> 7 <div class="bottomShakeBox"> 8 <div class="bottomBar"></div> 9 <img class="bottomShake" src="img/bottomShake.png" /> 10 </div> 11 </div>
8.现在使用CSS3给元素指定动画,注意:使用transform是开启GPU硬件加速提升流畅度
1 .animetebg .topShakeBox{ 2 -webkit-animation: topShakeBoxAnimete 1s ease-in-out; 3 animation:topShakeBoxAnimete 1s ease-in-out; 4 } 5 6 .animetebg .bottomShakeBox{ 7 -webkit-animation: bottomShakeBoxAnimete 1s ease-in-out; 8 animation:bottomShakeBoxAnimete 1s ease-in-out; 9 } 10 11 @keyframes topShakeBoxAnimete { 12 0% { 13 -webkit-transform:translateY(-5px); 14 transform:translateY(-5px); 15 } 16 50% { 17 -webkit-transform:translateY(-100px); 18 transform:translateY(-100px); 19 } 20 100% { 21 -webkit-transform:translateY(-0px); 22 transform:translateY(-0px); 23 } 24 } 25 26 @keyframes bottomShakeBoxAnimete { 27 0% { 28 -webkit-transform:translateY(5px); 29 transform:translateY(5px); 30 } 31 50% { 32 -webkit-transform:translateY(100px); 33 transform:translateY(100px); 34 } 35 100% { 36 -webkit-transform:translateY(0px); 37 transform:translateY(0px); 38 } 39 }
9.写代码检测获取陀螺仪数据执行动画,先使用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添加以下代码,相关说明已经在代码注释。
1 .controller("startCtrl",function($scope,$interval,$timeout,$ionicPlatform,$cordovaNativeAudio,$cordovaDeviceMotion){ 2 $scope.shakebg = [{hide:false}]; 3 $scope.animetebg = [{show:false}]; 4 5 $ionicPlatform.ready(function() {//载入音乐资源 6 $cordovaNativeAudio 7 .preloadSimple('click', 'src/shake_sound.mp3',1,1) 8 }); 9 10 var motiontime; 11 12 //获取陀螺仪数据方法 13 $scope.getMotionTime = function(){ 14 motiontime = $interval( 15 function() { 16 17 $cordovaDeviceMotion 18 .getCurrentAcceleration() 19 .then(function(motion) { 20 21 if(motion.x > 11 || motion.x < -11 || motion.y > 11 || motion.y < -11){ 22 //手机向任意方向用力摇晃 23 $scope.showAnimete();//执行动画部分 24 $cordovaNativeAudio.play('click');//播放音乐 25 } 26 27 }, function(err) { 28 alert("陀螺仪错误 "+err); 29 }); 30 31 }, 32 100 33 ); 34 }; 35 36 $scope.getMotionTime();//开启时钟获取数据 37 38 //动画方法 39 $scope.showAnimete = function(){ 40 $interval.cancel(motiontime);//停止掉获取数据时钟 41 $scope.shakebg.hide = true;//隐藏背景层 42 $scope.animetebg.show = true;//显示动画层 43 44 var timer_b = $timeout( 45 function() {//动画结束 46 $scope.animetebg.show = false;//隐藏动画层 47 $scope.shakebg.hide = false;//显示背景层 48 $scope.getMotionTime();//重新开启获取数据时钟 49 }, 50 1000 51 ).then( 52 function() { 53 $timeout.cancel(timer_b); 54 } 55 ); 56 }; 57 })
ionic版本:1.7.14
SDK:API23
源码下载地址:http://pan.baidu.com/s/1mh2XvOO
APK下载地址:http://pan.baidu.com/s/1c0K8wTy
PSD下载地址:http://pan.baidu.com/s/1o7kCx2y
ionic中文群:65048636 欢迎大家来这里 共同、分享、进步
转载于:https://www.cnblogs.com/ionic-china/p/5311562.html
ionic 完美仿微信摇一摇相关推荐
- html语音对话,HTML5 语音聊天 IM|仿微信语音界面|摇一摇效果
介绍 之前由于项目需求有开发过一款简单的聊天项目,不过功能及UI比较简单,最近又重新在原先的基础上进行了一次大的重构,开发了这款仿微信界面聊天IM系统--趣聊weChatIM. 技术点 运用h5+cs ...
- H5页面仿微信摇一摇及音频(安卓和苹果)
H5页面仿微信摇一摇,动作以及音频的知识点和代码,在Android和IOS的兼容问题 测试环境:微信浏览器 一.摇一摇: 1.知识点 涉及事件DeviceMotionEvent,该事件返回设备有关于加 ...
- 微信摇一摇插件ios_iOS仿微信摇一摇功能
iOS仿照微信摇一摇功能实现KXV免费资源网 一.描述KXV免费资源网 需要做一个界面,仿照微信摇一摇,获取接口进行签到功能.KXV免费资源网 首先明确以下几点:KXV免费资源网 1.需要震动.KXV ...
- 传感器的使用,高仿微信摇一摇,动画加声音
很多时候我们的应用需要使用传感器,使手机应用更加方便和可玩性更高, Google为我们提供了十一种传感器 #define SENSOR_TYPE_ACCELEROMETER 1 //加速度#defin ...
- iOS-高仿微信摇一摇动画效果加震动音效
概述 摇一摇动画效果 (加震动音效) 详细 代码下载:http://www.demodashi.com/demo/10707.html 众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些 ...
- Android移动开发-利用加速度传感器开发仿微信摇一摇功能的实现
加速度传感器是最常见的传感器,大部分Android手机都内置了加速度传感器,加速度传感器运用最广泛的功能就是微信的摇一摇功能,用户通过摇晃手机寻找周围的人,其它类似的应用还摇骰子.玩游戏等. 下面以摇 ...
- 仿微信摇一摇实现摇动开始与结束监听
安卓端做摇一摇,主要运用到SensorManager 这个类,通过重力传感器,获取xyz三轴的位置变化,来判断是否是摇动. 注意:手机震动需要加入震动权限 android.permission.VIB ...
- 高仿微信摇一摇,动画效果为左右晃动
学习到东西,发出来帮助更多的人,做一个有奉献精神的人! 原文地址;http://blog.csdn.net/catoop/article/details/8051835,原博主实现了摇一摇 在这几天的 ...
- 微信摇一摇插件ios_微信密友插件ios下载-微信密友ios插件下载6.6.6最新版-西西软件下载...
微信密友ios插件是一款功能强大的苹果版微信密友隐藏软件,该插件支持微信密友隐藏.后台消息推送.群红包自动抢.运动步数修改等功能,功能强大,界面清爽,欢迎下载体验! 微信密友ios插件介绍: 1.Cy ...
最新文章
- 深度学习的分布式训练--数据并行和模型并行
- ROS中base_link, odom, fixed_frame, target_frame和虚拟大地图map的关系
- 二叉树的前序中序后序递归查找,深度,广度搜索C++实现(VS2017)
- java xml 节点换行_Winform中对xml文件进行保存时空白节点自动换行问题的解决
- 【收藏】13个CSS3快速必备开发工具
- 学完计算机的感想300,计算机实训总结计算机实训心得300
- 墨奇科技:生物识别进入可信发展驱动的新阶段
- 罗宾斯管理学13版pdf_上海外国语工商管理经验贴(上外工商管理学硕)
- eclipse最新版本photon下载和安装
- linux美元符号切换为井号,struts2 (# % $)井号,百分号,美元符号的含义和使用方法举例...
- oel安装中文环境,Linux UTC,CST时间及修改时间
- 关于 “总机服务” 新增功能来电弹屏的功能说明
- 手机中的RAM和ROM分别对应电脑的内存和硬盘
- [北航软工教学] 教学计划大纲
- discus 怎么添加门户功能
- layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子
- k590s刷bios
- 20141208-SIAT-USTC跨级交流纪要备忘
- 问题解答:云电脑要用加速器吗
- Android车载嵌入式操作系统(Android Automotive)