آموزش قرار دادن انیمیشن بر روی دکمه در اپلیکیشن
یکی از قوانین طراحی متریال دیزاین در رابطه با دکمه ها گذاشتن افکت یا انیمیشن بر روی دکمه است. وقتی کاربر بر روی دکمه کلیک می‌کند نمایش افکت باعث می‌شود یک حالت تعاملی بین اپلیکیشن و کاربر برقرار شود.
در واقع انیمیشن پاسخ سریعی به عملکرد کاربر است و همین موضوع موجب بهبود تجربه کاربری می‌شود.
اگر کاربر بر روی دکمه کلیک کند و هیچ اتفاقی نیفتد ممکن است احساس کند شاید عمل کلیک را به درستی انجام نداده است و تجربه کاربری بدی ایجاد می‌کند.
چندین حالت انیمیشنی برای دکمه‌ها وجود دارد که شامل موارد زیر هستند.
-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>
تمام شد!
متن قرمز رنگ متنی هست که بر روی دکمه قرار می‌گیرد و می توانید آن را به متن دلخواه تغییر دهید.
قسمت نارنجی رنگ عنوان صفحه هست که می‌توانید تغییرش دهید و یا کلاً پاکش کنید.روش همچنین روش دیگر این است که کد بالا را به جای امکان سورس کد در قسمت سورس امکان صفحه سفارشی قرار دهید و متن دلخواه را قبل از دکمه بنویسید.
در همین رابطه توصیه می کنیم نوشته زیر را هم مطالعه کنید.