وبلاگ

اخبار ، اطلاعات و دانستنی های اپ ساز

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

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

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

یکی از مواردی که در طراحی متریال استفاده می‌شود قرار دادن انیمیشن است. انیمیشن تجربه کاربری بهتری را در اپلیکیشن ایجاد می‌کند. در این مقاله آموزش قرار دادن آیکن متحرک یا انیمیشنی را با استفاده از سیستم اپ ساز آموزش می دهیم.
در قدم اول وارد پنل کاربری ساخت اپلیکیشن  با آدرس 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>


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

دیدگاهتان را بنویسید

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

برای امنیت، استفاده از سرویس کپتچا گوگل مورد نیاز است که تابع گوگل است سیاست حفظ حریم خصوصی و شرایط استفاده.