قرار دادن آیکن متحرک در اپلیکیشن

یکی از مواردی که در طراحی متریال استفاده می‌شود قرار دادن انیمیشن است. انیمیشن تجربه کاربری بهتری را در اپلیکیشن ایجاد می‌کند. در این مقاله آموزش قرار دادن آیکن متحرک یا انیمیشنی را با استفاده از سیستم اپ ساز آموزش می دهیم.
در قدم اول وارد پنل کاربری ساخت اپلیکیشن  با آدرس http://make.appsaz.ir شوید.
حال وارد قسمت امکانات شوید و امکان سورس کد” را انتخاب نمایید.
در صفحه باز شده کد زیر را وارد کنید.

<!DOCTYPE html>
<html>
<style>
#div1 {
font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div id="div1" class="fa"></div>

<script>
function smile() {
var a;
a = document.getElementById("div1");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, ۱۰۰۰);
setTimeout(function () {
a.innerHTML = "";
}, ۲۰۰۰);
setTimeout(function () {
a.innerHTML = "";
}, ۳۰۰۰);
}
smile();
setInterval(smile, 4000);
</script>

<p>This example demonstrates how to use an icon library to make an animated effect.</p>
</body>
</html>


خروجی اپلیکیشن بر روی گوشی موبایل به صورت تصویر زیر به نمایش در می‌آید.
تصویر به سه حالت زیر به طور متحرک تغییر شکل انجام می‌دهد.
همچنین می توانید از تصاویر متحرک دیگر نیز استفاده کنید. کافی است کد مربوط به هر یک را جای گذاری کنید.
در این لینک می توانید نمونه کدهای تصاویر متحرک را مشاهده کنید.
اگر این مطلب رو دوست داشتید، می تونید با دوستاتون به اشتراک بگذارید:
 
 
مهرناز بهرام‌زاده
مهرناز بهرام‌زاده
عضو تیم اپ ساز و فعال در زمینه ی تولید محتوای وبلاگ و شبکه های اجتماعی، ترجمه، برنامه نویسی و ساخت اپلیکیشن‌های موبایل می باشد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *