ساخت افکت انیمیشن توپ با jQuery

این مقاله آموزشی در مورد ساخت افکت انیمیشن توپ با jQuery است. فقط یک پست سرگرم کننده سریع. این افکت انیمیشنی براساس پارامترهای مختلفی مثل تعداد پرش, سرعت و غیره است.

Bouncing Ball را به احتمال زیاد به عنوان یک بازی سرگرم کننده در گوشی های قدیمی نوکیا دیدید.

در آموزش jQuery قبلی, مثال های بیشتری در مورد انیمیشن های در jQuery دیدیم. برای مثال تغییر پس زمینه با اسکرول صفحه, اسلایدر parallax و .. .

در این مثال از ساخت افکت انیمیشن توپ, یک توپ تنیس در پایین ترین قسمت المنت DIV وجود دارد. با کلیک روی توپ, تابع جی کوئری برای ساخت انیمیشن پرش به همراه توپ فراخوانی می شود.

تعداد پرش و سرعت به این تابع پاس داده می شود. برا اساس این پارامترها ارتفاع پرش و سرعت نیز برای انیمیشن دادن به توپ توسط تابع animate() در jQuery , محاسبه می شود.

کد HTML و استایل های توپ پرشی (Bouncing Ball)

کد زیر شامل HTML و استایل های لازم برای نمایش تصویر توپ است. با اشاره به این المان تصویر, تابع انیمیشن پرشی با کلیک روی توپ اجرا می شود.

<style>
#bouncing-ball {
	height: 100px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -50px;
}

#outterDiv {
	height: 340px;
	background: #36a094;
	position: relative;
}

.banner-info {
	padding: 15px;
	color: #FFF;
}
</style>
<h1>Demo Bouncing Ball Animation using jQuery</h1>
<div id="outterDiv">
    <div class="banner-info">Click the ball to see the
        bouncing animation</div>
    <img id="bouncing-ball" src="bouncing-ball.png"></img>
</div>

<style>

#bouncing-ball {

height: 100px;

position: absolute;

bottom: 0px;

left: 50%;

margin-left: -50px;

}

#outterDiv {

height: 340px;

background: #36a094;

position: relative;

}

.banner-info {

padding: 15px;

color: #FFF;

}

</style>

<h1>Demo Bouncing Ball Animation using jQuery</h1>

<div class="banner-info">Click the ball to see the

bouncing animation</div>

</div>

کد ساخت افکت انیمیشن توپ با jQuery

کد زیر تابع جی کوئری برای ساخت افکت انیمیشنی بر روی المان تصویر توپ را نشان می دهد. این تابع تعداد زمان هایی که پرش باید انجام شود را به همراه سرعت دریافت و با استفاده از این پارامترها, ارتفاع پرش را برای هر پرش محاسبه و به عنوان خصوصیت انیمیشن توسط تابع animate در جی کوئری ست می کند.

<script src="jquery-3.2.1.min.js"></script>
<script>
	function bounce(bouncingCount, speed) {
		var top = 200;
		var speedRatio = speed / top;
		var heightRatio = top / bouncingCount;

		for (var i = 1; i <= bouncingCount; i++) {
			$('#bouncing-ball').animate({
				'bottom' : top
			}, speed);
			$('#bouncing-ball').animate({
				'bottom' : 0
			}, speed / 2);
			top = top - (heightRatio);
			speed = speedRatio * top;
		}
	}

	$("#bouncing-ball").click(function() {
		bounce(10, 500);
	});
</script>