[英]Make oscillations smoothly increase/decrease when frequency being changed dynamically
[英]jQuery Make image rotating interval decrease smoothly
這是我的網站:
我試圖讓CD緩慢停止旋轉,或者在我單擊按鈕或按空格鍵時再次緩慢啟動,但是setTimeout()對我不起作用。
謝謝。
以下是我體內的js。
var diskCenter = [480, 480];
var disk = new Image;
disk.src = 'disk.jpg';
window.onload = function () {
var ang = 0;
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
setInterval(function () {
ctx.save();
ctx.clearRect(0, 0, c.width, c.height);
ctx.translate(c.width, 0);
ctx.rotate(Math.PI / 180 * (ang += 5));
ctx.drawImage(disk, -diskCenter[0], -diskCenter[1]);
ctx.restore();
}, 25);
};
這是我用來使其工作的代碼(我有兩個按鈕,一個按鈕減慢動畫(並反轉),另一個按鈕加速動畫:
(function ($) {
var ang = 0;
var speed = 5;
var minSpeed = -10;
var maxSpeed = 10;
var c = $('#discCanvas')[0];
var ctx = c.getContext('2d');
var diskCenter = [480, 480];
var disk = new Image;
disk.src = 'http://swellgarfo.com/9/disk.jpg';
$(function () {
setInterval(function () {
ctx.save();
ctx.clearRect(0, 0, c.width, c.height);
ctx.translate(c.width, 0);
ctx.rotate(Math.PI / 180 * (ang += speed));
ctx.drawImage(disk, -diskCenter[0], -diskCenter[1]);
ctx.restore();
}, 25);
});
$('#slowButton').on('click', function () {
speed = Math.max(minSpeed, speed - 1);
});
$('#fastButton').on('click', function () {
speed = Math.min(maxSpeed, speed + 1);
});
})(jQuery);
您將必須使用clearInterval()函數來停止CD。 由於已經使用setInterval()旋轉了CD。
干得好。
HTML:
包括一個鏈接:
停止
Javascript:我在這里使用Jquery。 因此包括:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
var my = setInterval(function(){
ctx.save();
ctx.clearRect( 0 , 0, c.width, c.height );
ctx.translate( c.width , 0 );
ctx.rotate(Math.PI / 180 * (ang += 5));
ctx.drawImage( disk, -diskCenter[0], -diskCenter[1] );
ctx.restore();
},25);
$(document).ready(function(){
$("#stop").click(function(e){
e.preventDefault();
window.clearInterval(my);
});
});
我相信這是有道理的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.