이번에는 JS+H5를 사용하여 WeChat Shake를 구현하는 방법과 JS+H5를 사용하여 WeChat Shake를 구현할 때 어떤 Notes가 있는지 보여드리겠습니다. 다음은 실제 사례입니다.
드디어 프로젝트가 예정대로 시작되었지만, 위챗의 셰이크 활동과 비슷하게 봄 축제 전에 완료해야 할 새로운 활동이 있습니다. 우리는 WeChat 공개 계정에 대해서도 작업해 왔지만 WeChat Shake 인터페이스를 호출하는 것은 여전히 약간 어렵습니다. 왜냐하면 우리의 필요에 비해 Shake 주변 장치, 주변 사람 및 일련의 빨간 봉투 페이지만 제공하기 때문입니다. 흔들면 동작이 완전히 다릅니다.
실제로 H5+JavaScript로 작성한 페이지는 휴대폰의 화면 길이와 너비를 가져와 사운드를 추가하면 흔들림 효과를 얻을 수 있습니다.
첫 번째 단계는 휴대폰을 흔들어 색상 변화를 구현하는 것
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <title>HTML5 手机摇一摇</title> <script type="text/javascript"> var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); if(window.DeviceMotionEvent) { var speed = 25; var x = y = z = lastX = lastY = lastZ = 0; window.addEventListener('devicemotion', function(){ var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) { document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6]; } lastX = x; lastY = y; }, false); } </script> </head> <body> 手机摇一摇,改变屏幕颜色。 </body> </html>
주로 휴대폰의 DeviceMotionEvent 이벤트
두 번째 단계, WeChat 흔들기 제스처
가 추가됩니다. 첫 번째 단계와 비교하여 흔들기 동작이 흔들림 이벤트를 변경합니다. 생성한 다음 페이지로 들어가거나 컨트롤러 이벤트를 트리거할지 여부에 관계없이 흔들기 작업 후에 원하는 메서드를 추가하기만 하면 됩니다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> <title>摇一摇</title> <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" > <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" > <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script> <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script> <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script> <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script> <script type="text/javascript"> var SHAKE_THRESHOLD = 1000; var last_update = 0; var last_time = 0; var x; var y; var z; var last_x; var last_y; var last_z; var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load(); var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load(); var curTime; var isShakeble = true; function init() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { $("#cantshake").show(); } } function deviceMotionHandler(eventData) { curTime = new Date().getTime(); var diffTime = curTime - last_update; if (diffTime > 100) { var acceleration = eventData.accelerationIncludingGravity; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) { shake(); } last_x = x; last_y = y; last_z = z; } } function shake() { last_time = curTime; $("#loading").attr('class','loading loading-show'); $("#shakeup").animate({ top: "10%" }, 700, function () { $("#shakeup").animate({ top: "25%" }, 700, function () { $("#loading").attr('class','loading'); findsound.play(); //在此为摇动之后的事件,这里为调用ControllergoShakeResult方法 window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}"; }); }); $("#shakedown").animate({ top: "40%" }, 700, function () { $("#shakedown").animate({ top: "25%" }, 700, function () { }); }); sound.play(); } //各种初始化 $(document).ready(function () { Howler.iOSAutoEnable = false; FastClick.attach(document.body); init(); }); </script> </head> <body> <table id="container"> <tbody> <tr> <td class="container" colspan="2"> <p id="shake"> <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner"> <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup"> <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown"> </p><p id="loading" class="loading"></p> </td> </tr> <tr> <td> 您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次 </td> </tr> <tr> <td>正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。</td> </tr> </tbody> </table> </body> </html>
때로는 원하는 기능을 얻기 위해 실제로 다른 방법을 사용할 수도 있습니다. 첨부된 사진: 데모의 원래 효과는 다음과 같습니다.
수정 후
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!
추천 도서:
Vue 키 수정자의 이벤트 처리 단계에 대한 자세한 설명
JS+CSS3을 사용하여 이미지 바인딩 마우스 이동 이벤트 증폭
만들기위 내용은 JS+H5를 사용하여 WeChat Shake를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!