今天我們使用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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的ionic 完美仿微信摇一摇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。