当前位置:   article > 正文

微信摇一摇插件ios_解决ios无法触发摇一摇兼容,Cordova实现模仿微信摇一摇

uni.onaccelerometerchange 在ios手机重无法触发

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("错误!");

}

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/97146
推荐阅读
相关标签
  

闽ICP备14008679号