Cordova实现模仿微信摇一摇（简单版）
Cordova模仿微信摇一摇（简单版）
- 一、概要
- 二、实现环境
- 三、主要插件
- 四、流程图
- 五、执行代码
- 六、执行效果
- 总结
一、概要
这次的实例主要是通过Cordova这个API来实现，主要是在原来书本上的案例个人拓展而来，纯属个人兴趣，不喜勿喷。
本人一名大三计算机学生，一个前端小菜鸟，可能有些代码写得不太规范，请多多指教！！
二、实现环境
1、API：Cordova
2、框架：jQuery Mobile
3、编辑器：Visual Studio Code
三、主要插件
通过Cordova的加速度计插件来实现，需要添加插件： 加速度计：cordova plugin cordova-plugin-device-motion和震动插件：cordova plugin add cordova-plugin-vibration。
四、流程图
执行摇一摇动画
到达一定的条件
执行摇一摇关闭动画
点击按钮开始摇一摇
监控加速度计的xyz变化
开始随机生成图片
显示图片
五、执行代码
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>摇一摇</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
</head>
<body>
<!-- -------------------第一页-------------------- -->
<div data-role="page" id="page2" data-theme="b">
<!-- 页眉 -->
<div data-role="header" id="header2" data-position="fixed">
<!-- <a data-rel="back" data-icon="back">返回</a> -->
<a data-icon="gear" id="test1">开始摇一摇</a>
<h1 style="font-weight:bold;">摇一摇</h1>
</div>
<!-- 内容 -->
<div data-role="content" id="content2" class="content" style="background-color:#2a2a2a">
<!-- 主视图图片 -->
<div id="shake">
<div id="shaketop">
<img src="img/topShake.png" id="top">
</div>
<div id="shakebottom">
<img src="img/bottomShake.png" id="bottom">
</div>
</div>
<!-- 摇出来的图片 -->
<div id="yaoimg">
<img id="shakeimg">
<h1 id="heci" style="text-align: center;display: none"></h1>
</div>
</div>
<!-- 页脚 -->
<div data-role="footer" id="foot2" data-position="fixed" class="foot" style="border-style: none;">
<div data-role="navbar">
<ul id="ul1">
<li><a data-icon="user" style="background-color: #2a2a2a;border-style: none; color: darkkhaki">人</a></li>
<li><a data-icon="user" style="background-color: #2a2a2a;border-style: none;color: darkkhaki">人</a></li>
<li><a data-icon="user" style="background-color: #2a2a2a;border-style: none;color: darkkhaki">人</a></li>
</ul>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js:
document.addEventListener("deviceready", onDeviceready);
var pic = new Array('car.png', 'house.png', 'money.png');
var name = new Array("车房钱");
var all_roll = 0;
var u_roll = 0;
function onDeviceready() {
console.log('启动。。。');
$('#test1').click(function () {
//重置样式
$("#shake").css("display","none");
$('#test1').text("再摇一次");
$("#yaoimg").animate({
height: '0',
width: '0',
borderWidth:'0px'
});
$('#heci').css("display", "none");
$('#shakeimg').css("display", "none");
console.log('触发按钮');
startWatch();
});
}
// ---用于处理动画---
function start() {
var rang = Math.floor(Math.random() * 3); //随机生成0-2的数字，方便取出图片
console.log(rang);
$('#shakeimg').attr("src", "img/" + pic[rang]);
console.log(pic[rang]);
$('#heci').text("恭喜你，摇出了：" + name[rang] + "!!!");
console.log(name[rang]);
$("#shakebottom").animate({
height: '+=150px',
marginTop: '0px'
});
console.log("下滑1");
$("#shaketop").animate({
height: '+=150px',
marginBottom: '0px'
}, function () { //用动画显示随机生成的图片
$("#yaoimg").animate({
height: '50%',
width: '80%',
opacity: '1',
borderWidth:'5px'
});
$("#shakeimg").css({
"height": "150px",
"width": "150px",
"display": "block"
});
console.log("显示照片");
$("#heci").fadeIn(2000);
console.log("显示文字");
$("#shake").css("display","none");
});
console.log('上滑1');
}
//---监视设备的加速度
function startWatch() {
//每0.3s更新一次加速度信息
var options = {
frequency: 300
};
wachID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
console.log('调用插件');
console.log(wachID);
}
//---停止监视设备的加速度
function stopWatch() {
u_roll = 0;
all_roll = 0;
navigator.accelerometer.clearWatch(wachID);
}
//---获取加速度成功事件
function onSuccess(accelerometer) {
var pow_v = Math.pow(accelerometer.x, 2) + Math.pow(accelerometer.y, 2) + Math.pow(accelerometer.z, 2);
var v = Math.sqrt(pow_v);
console.log(u_roll);
if (v > 15) {
all_roll++; //全部摇动次数
u_roll++; //有效摇动次数
navigator.vibrate(300); //震动反馈
if (u_roll > 1) { //判定这个为摇动，开始显示图片
//摇一摇的动画
$("#shake").css("display","block");
$("#shakebottom").animate({
height: '-=150px',
marginTop: '150px'
});
console.log("下滑");
$("#shaketop").animate({
height: '-=150px',
marginBottom: '150px'
});
console.log('上滑');
stopWatch();
console.log("停止插件");
//调用函数开始显示图片
start();
console.log('显示动画并开始显示图片');
}
} else {
all_roll++;
console.log('摇晃角度不够。');
}
}
//---获取加速度失败事件
function onError() {
alert("错误！");
}
index.css
#yao {
float: left;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.content {
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
margin: 0%;
padding: 0%;
height: auto;
}
#content {
background-color: #2a2a2a;
}
#content2 {
margin: 0%;
padding: 0%;
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
background: url("../img/shakeIcon.png") no-repeat center;
}
#shake {
display: none;
background: url("../img/flower.png") #1d1d1d no-repeat center;
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
}
#shaketop {
background-color: #2a2a2a;
position: absolute;
width: 100%;
top: 0%;
height: 50%;
text-align: center;
border-bottom-style: solid;
border-bottom-color: #555555;
border-bottom-width: 4px;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
#shakebottom {
background-color: #2a2a2a;
position: absolute;
width: 100%;
bottom: 0%;
border-top-style: solid;
border-top-color: #555555;
border-top-width: 4px;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
height: 50%;
overflow: hidden;
}
#yaoimg {
opacity: 0;
background-color: #d81515;
float: left;
position: absolute;
width: 70%;
height: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-style: inset;
border-width: 5px;
border-color: aqua;
}
#heci {
/* opacity: 0; */
color: yellow;
float: left;
position: absolute;
width: 90%;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
}
#shakeimg {
float: left;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.foot {
background-color: #2a2a2a;
}
body {
padding: 0%;
margin: 0%;
}
六、执行效果
主页面：
动画：
摇出来的结果：
总结
总的来说，实现的难点主要是在于动画，书本上的动画是基于定时器来实现的，而我这里是使用了jQuery来实现动画，也比较方便快捷。注意的是加速度计数值的设置，超过某个值后就会触发动画并出现随机的图片和文字，做得比较粗糙，也还没好好优化和改进，也希望大家多多关照！
以上代码和打包好的Cordova项目在我的github里，有需要的小伙伴可以去溜达溜达，送上地址：https://github.com/Minro12138/yao
参考资料：王亚飞.王洪飞.《Apache Cordova移动应用开发实战》.2017.1