在 jQuery 中,為 Slot Machine 添加動畫可以通過使用 animate()
函數實現。以下是一個簡單的示例,展示了如何為 Slot Machine 的旋轉輪盤添加動畫效果:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="slot-machine">
<div class="wheel">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</div>
$(document).ready(function() {
// 獲取 Slot Machine 的旋轉輪盤
var $wheel = $('.wheel');
// 定義動畫參數
var animationDuration = 1000; // 動畫持續時間,單位為毫秒
var animationDelay = 200; // 動畫延遲時間,單位為毫秒
var animationCount = 3; // 動畫循環次數
var animationDirection = 'clockwise'; // 動畫方向,順時針或逆時針
// 定義旋轉角度
var rotationAngle = 360 / animationCount;
// 定義動畫函數
function rotateWheel() {
if (animationDirection === 'clockwise') {
$wheel.animate({
rotation: '+=' + rotationAngle + 'deg'
}, animationDuration, function() {
// 動畫完成后,執行回調函數
if (animationCount > 1) {
animationCount--;
rotateWheel();
}
});
} else {
$wheel.animate({
rotation: '-=' + rotationAngle + 'deg'
}, animationDuration, function() {
// 動畫完成后,執行回調函數
if (animationCount > 1) {
animationCount--;
rotateWheel();
}
});
}
}
// 啟動動畫
rotateWheel();
});
這個示例中,我們定義了一個名為 rotateWheel
的函數,用于控制旋轉輪盤的動畫效果。通過修改 animationDuration
、animationDelay
、animationCount
和 animationDirection
變量,你可以自定義動畫的持續時間、延遲時間、循環次數和方向。