HTML5摇一摇(下)—如何实现签筒摇动动画
时间: 2023-11-18 14:04:24 浏览: 42
要实现签筒摇动动画,可以使用CSS3中的动画和transform属性。
首先,需要为签筒元素设置一个起始位置和旋转角度,例如:
```css
.sign {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
}
```
接下来,定义一个动画,让签筒在一定的时间内从起始位置旋转到目标角度,例如:
```css
@keyframes shake {
0% { transform: translate(-50%, -50%) rotate(0deg); }
50% { transform: translate(-50%, -50%) rotate(30deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
```
这个动画将签筒从0度旋转到30度,再回到0度,每次旋转的时间占总时间的50%。
最后,在JavaScript中监听设备摇动事件,触发动画播放,例如:
```javascript
window.addEventListener('devicemotion', function(event) {
// 计算设备加速度
var acceleration = event.accelerationIncludingGravity;
var shake = Math.abs(acceleration.x) + Math.abs(acceleration.y) + Math.abs(acceleration.z);
// 如果摇动幅度超过阈值,则播放动画
if (shake > threshold) {
var sign = document.querySelector('.sign');
sign.classList.add('shake');
// 动画结束后移除动画类
sign.addEventListener('animationend', function() {
sign.classList.remove('shake');
});
}
});
```
其中,threshold为摇动阈值,可以根据实际情况调整。
这样,当设备摇动时,签筒就会播放摇动动画,实现签筒摇动的效果。