آموزش قرار دادن انیمیشن بر روی دکمه در اپلیکیشن
Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39
فهرست مطالب مقاله آموزش قرار دادن انیمیشن بر روی دکمه در اپلیکیشن
آموزش قرار دادن انیمیشن بر روی دکمه در اپلیکیشن
یکی از قوانین طراحی متریال دیزاین در رابطه با دکمه ها گذاشتن افکت یا انیمیشن بر روی دکمه است. وقتی کاربر بر روی دکمه کلیک می‌کند نمایش افکت باعث می‌شود یک حالت تعاملی بین اپلیکیشن و کاربر برقرار شود. در واقع انیمیشن پاسخ سریعی به عملکرد کاربر است و همین موضوع موجب بهبود تجربه کاربری می‌شود.اگر کاربر بر روی دکمه کلیک کند و هیچ اتفاقی نیفتد ممکن است احساس کند شاید عمل کلیک را به درستی انجام نداده است و تجربه کاربری بدی ایجاد می‌کند.
چندین حالت انیمیشنی برای دکمه‌ها وجود دارد که شامل موارد زیر هستند. -Ripple Effect -Hover Effect -Pressed Effectدر حال حاضر انیمیشنی که بر روی دکمه‌ها استفاده می‌شود و توسط گوگل متریال دیزاین معرفی شده است Ripple Effect می‌باشد.
اگر می خواهید بدانید این افکت چطوری هست کافی است به گوگل پلی یا کافه بازار بروید و دکمه‌ای را کلیک کنید.
در این نوشته نحوه قرار دادن این افکت در اپلیکیشن با سیستم اَپ ساز را به شما اموزش می‌دهیم.
در قدم اول وارد پنل کاربری ساخت اپلیکیشن با آدرس http://make.appsaz.ir شوید.
حال وارد قسمت امکانات شوید و امکان “سورس کد” را انتخاب نمایید و نام صفحه را به خانه تغییر دهید.
در صفحه باز شده کد زیر را وارد کنید.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>قرار دادن افکت بر دکمه</h2>
<button class="button">کلیک کنید.</button>
</body>
</html>
تمام شد!
متن قرمز رنگ متنی هست که بر روی دکمه قرار می‌گیرد و می توانید آن را به متن دلخواه تغییر دهید.
قسمت نارنجی رنگ عنوان صفحه هست که می‌توانید تغییرش دهید و یا کلاً پاکش کنید.روش همچنین روش دیگر این است که کد بالا را به جای امکان سورس کد در قسمت سورس امکان صفحه سفارشی قرار دهید و متن دلخواه را قبل از دکمه بنویسید.در همین رابطه توصیه می کنیم نوشته زیر را هم مطالعه کنید.
مقالات مرتبط
آموزش کامل ساخت ربات تلگرام از صفر تا صد (۲۰۲۶)
صفر تا صد ساخت ربات تلگرام؛ از گرفتن توکن در BotFather تا کدنویسی با پایتون، اتصال به دیتابیس و خرید هاست مناسب. راهنمای عملی و قدم‌به‌قدم.
راهنمای کامل ساخت اپلیکیشن مشابه اسنپ فود | مراحل، امکانات و هزینه
بررسی سیر تا پیاز ساخت اپلیکیشن سفارش آنلاین غذا؛ معرفی ۳ پنل اصلی (کاربر، رستوران، پیک)، فناوری‌های مورد نیاز، تخمین هزینه و راهکارهای ورود به بازار.
تفاوت اپ استورهای داخلی و خارجی؛ بررسی امکانات، چالشها و زیرساختها
گوشیهای هوشمند بدون اپ استور، برنامه و بازی، عملاً بخش مهمی از کارایی خود را از دست میدهند. در این مقاله با اپ استورها بیشتر آشنا خواهیم شد
آموزش TestFlight | راهنمای گامبهگام تست اپ iOS (۲۰۲۶) | اپ ساز
با این آموزش TestFlight، نحوه تست اپلیکیشن iOS خود با TestFlight را قبل از انتشار در اپ استور بیاموزید. + نکات کلیدی برای توسعهدهندگان.
چرا استفاده از اپلیکیشنهای موبایل ضروریست؟
گوشی تلفن همراه، تقریبا یک دهه است که با تغییر ماهیتی جدی و آرام پا به زندگی ما گذاشته است. به گونهای پیش رفته که برای افراد تصور زندگی حتی
