ionic 完美仿微信摇一摇

ionic中文网 发布于 2016/03/23 16:11
阅读 2K+
收藏 21

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

ionic中文群:65048636 欢迎大家来这里 共同、分享、进步

加载中
0
zabcd117
zabcd117

lz这个不错,很详细,很多人可能都会用到。

0
z
zemel
效果不错
0
duduo丶
duduo丶
很详细,收藏起来,我也分享一些我收藏的源码http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=28480
返回顶部
顶部