今天我们使用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 欢迎大家来这里 共同、分享、进步