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.先平鋪繪製背景層

<div class="shakebg"></div>

4.在背景層中心繪製圖片

<div class="shakebg">
        <img src="img/shakeIcon.png"/>
    </div>

5.再來繪製動畫層，先把背景層隱藏。很少贅述先畫背景再畫小花。

<div class="animetebg">
        <img class="flower" src="img/flower.png" />
    </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>

7.按照相同方法繪製好下半部分，效果圖。注意咱們是一塊一塊繪製的，因此能夠完美適配任何分辨率設備哦。

<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>

8.如今使用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);
        }
    }

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添加如下代碼，相關說明已經在代碼註釋。

.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://pan.baidu.com/s/1mh2XvOO
APK下載地址：http://pan.baidu.com/s/1c0K8wTy
PSD下載地址：http://pan.baidu.com/s/1o7kCx2y