گروه مقاله : طراحی سایت
تاريخ انتشار : 1395/07/18 - 16:21
كد :7179
تبدیل عکس به عکس دیگر با امکانات انیمیشن در وب امکان زیبا و جالبی است که به عنوان یک طراح وب شاید بخواهید از این جلوه در وبسایت های خود استفاده کنید.
تبدیل مربع به دایره در وب
مقدمه ای برطراحی انیمیشن با css
این روزها وبگاه های زیاد و زیادتری از انیمیشن استفاده می کنند. یکی از فرم های Gif دیگری از WebGL و یا ویدئو در بگراند و الا آخر استفاده می کنند. وقتی از انیمیشن به درستی استفاده می کنید.انیمیشن در وبگاه زیبا ، زنده و جذاب خواهد بود. و تجارب و بازخورد های بیشتری را برای کاربران یک وبگاه ایجاد خواهد کرد.
در این آموزش ما animation را در Css توضیح خواهیم داد. تکنیکی که هم بسیار عمومی است و هم مرورگرها آن را پشتیبانی می کنند ما در این آموزش یک مثال سریع از تبدیل یک مربع به دایره خواهیم زد.
محل درج تصویر گردان
مقدمه ای بر @keyframes و انیمیشن
کامپوننت اصلی انیمیشن در CSS @keyframes است . کلید فریم ها مرحله ساخت انیمیشن در بازه زمانی هستند که هر کدام در مراحل مختلف ساختار جداگانه ای به خود می گیرند تا انیمیشن خلق شود.
برای ساخت یک انیمیشن به کمک CSS شما باید @keyframes را به یک سکتور مرتبط کنید. و بدین ترتیب تغییرات لازمی که توسط @keyframes ایجاد شده است مرحله به مرحله اجرا میشود.
@keyframes
مراحل انیمیشن را پایه ریزی کرده و ویژگی های زیر برای آنها قابل تعریف است.
یک نام که ما tutsFade را در این مثال برگزیده ایم.
مراحل: 0% تا 100% ؛ از (equal to 0%) و تا (equal to 100%)
CSS styles : استایلی که برای تک تک مراحل اجرا خواهد شد.
بگذارید یک مثال بیاورم:
@keyframes tutsFade {
to {
opacity: 0;
}
}
این درواقع همان کد
@keyframes tutsFade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
است که کوتاه شده و لی نگران نباشید درست کار می کند و در واقع کلید فریم tutsFade را از شفافیت یک به صفر می رساند.
انیمیشن
ویژگی های انیمیشن (animation )در CSS برای استفاده از کلید فریم @keyframes بکار می روید و قاعدتا ویژگی های چند گانه ای مانند زیر برای انیمیشن خواهیم داشت.
animation-name: در واقع همان نام @keyframes است که ما اینجا tutsFade را انتخاب کرده ایم
animation-duration: طول خط زمان ، کل زمان انیمیشن از لحظه شروع تا لحظه پایان .
animation-timing-function: سرعت انیمیشن که مقادیر
(linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ) را می پذیرد
animation-delay: که زمان توقف انیمیشن در هنگام پیش از شروع را مشخص می کند.
animation-iteration-count: مشخص می کند چند بار انیمیشن تکرار خواهد شد .
animation-direction:به ما توان تغییر مسیر حلقه ی انیمیشن را از اول به آخر یا از آخر به اول یا هر دو را می دهد.
animation-fill-mode:تعیین میکند وقتی انیمیشن به آخر رسید چه رخدادی خواهیم داشت. که شامل
(none | forwards | backwards | both )
برای مثال
.element {
-webkit-animation: tutsFade 4s 1s infinite linear alternate;
-moz-animation: tutsFade 4s 1s infinite linear alternate;
-ms-animation: tutsFade 4s 1s infinite linear alternate;
-o-animation: tutsFade 4s 1s infinite linear alternate;
animation: tutsFade 4s 1s infinite linear alternate;
}
و برای افزودن کلید فریم از کد
.element {
animation: tutsFade 4s 1s infinite linear alternate,
tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity: 0;
}
}
@keyframes tutsRotate {
to {
transform: rotate(180deg);
}
}
استفاده کنید.
در این مرحله شما باید یک کد اچ تی ام ال برای متحرک سازی داشته باشید مثلا می توانید از یک <div></div> استفاده کنید. برای اعمال ویژگی به این کد باید از کلاس استفاده کرد ولی بگذارید اینجا مسئله را ساده تر کنیم
div{
width: 200px;
height: 200px;
background-color: coral;
}
معرفی کلید فریم ها
یک کلید فریم به نام square-to-circle ساخته و ویژگی آن به شرح زیر و در پنج گام خواهد بود.
@-webkit-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
}
25% {
border-radius:50% 0 0 0;
}
50% {
border-radius:50% 50% 0 0;
}
75% {
border-radius:50% 50% 50% 0;
}
100% {
border-radius:50%;
}
}
برای اعمال پس زمینه مختلف به هر مرحله از کد زیر استفاده کنید.
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
}
100% {
border-radius:50%;
background:darksalmon;
}
}
حالا هم کمی جلوه بصری برای اعمال جلوه گردش اضافه خواهیم کرد.
keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
transform:rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
transform:rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
transform:rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
transform:rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
transform:rotate(180deg);
}
}
حالا باید این انیمیشن را به کد <div></div> اختصاص دهیم.
در سی اس اس کد زیر را جایگزین کد قبلی کنید.
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite alternate;
outline: 1px solid transparent;
}
در این کد ما
یک animation-name به نام square-to-circle داریم که زمان آن 2 ثانیه و تاخیر آن تا شروع 1 ثانیه و بصورت نامحدود تکرار میشود و مسیر حرکت در هنگام شروع از ابتدا به انتها و در هنگام پایان از انتها به ابتدا خواهد بود.
درج فانکشن بی نظیر زمان بندی
آخرین گزینه ای که به ویژگی های انیمیشن خواهیم افزود ویژگی animation-timing-function . این ویژگی سرعت را تعریف می کند. این ویژگی جزئیات زیادی دارد که ممکن است محاسبه بصروت دستی را سخت و پیچیده کند ولی ما از CSS Easing Animation Tool برای انجام این محاسبه استفاده کرده ایم و از cubic-bezier function. برای تبدیل مربع به دایره سود جسته ایم.
نگاهی به کد زیر بیاندازید.
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
transform:rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
transform:rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
transform:rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
transform:rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
transform:rotate(180deg);
}
}