تعلم كيفية تدوير العناصر وعمل أنميشن بالـCSS

10:08:00 م
تعلم كيفة عمل أنميشن لتدوير عنصر ما بإستخدام CSS ودون استخدام أو كتابة أي كود جافاسكريبت 


السلام عليكم ورحمة الله وبركاته 

سنتعلم معاً في هذا الدرس كيفية صناعة أنميشن تدوير العناصر بإستخدام CSS

 المهارات التي يفترض عليك معرفتها لكي تستطيع استيعاب الدرس : 
- أساسيات لغتي HTML & CSS

 أهم خصائص CSS التي يتوجب عليك معرفتها:
- Transform Property
- Keyframes Rule
في حال لم تكن على معرفة جيدة بأحد هذه الخصائص قم بالضغط عليها وسيقوم بتحويلك إلى رابط فيه كافة التفاصيل على موقع W3Shool

 النتيجة النهائية للدرس :
See the Pen qaOvgA by Mohammed Jaffar (@MJK) on CodePen.

في البداية سنقوم ببناء هيكلة صفحة HTML الخاصة بنا كما في التالي : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="squar"></div>
</body>
</html>


كما تلاحظ لم نضف إلى عنصر واحد فقط div وقمنا بإعطائه كلاس بإسم squar لأننا سنقوم بصنع مربع
 الآن سنتوجه لكتابة كود CSS
 في البداية سنقوم بصناعة مربع بسيط كما ذكرنا بكتابة الكود التالي : 
.squar{
 width:100px;
 height: 100px;
 background-color: red;
}

كل ما قمنا به هو تحديد الطول والعرض وعمل خلفية حمراء إذا لا شيء غريب حتى الآن 
 الآن دعنا نقوم يصناعة الأنميشن الخاص بنا ، ولنقوم بصنع ذلك سنحتاج العمل على خاصية (@keyframes) 
 تسمح لنا هذه الخاصية بعمل أنميشن وإعطائه اسم ومن ثم نستطيع استخدامه هذا الأنميشن في مع أي عنصر من عناصر HTML 
 إذاً دعنا نبدأ في عمل الأنميشن باستخدام الكود التالي : 
@keyframes rotate{
 0% {transform: rotate(0deg) }
 100% {transform: rotate(360deg) }
}

هنا قمنا بصناعة أنميشن وقمنا بتسميته (rotate) تستطيع تسميته أي إسم كما تشاء ومن ثم باستخدام transform قمنا بجعل زاوية الدوران 0 عند بداية الأنميشن وفي نهاية الأنميشن قمنا بجعل زاوية الدوران إلى 360 درجة.

كيف يعمل (@keyframes)؟
 الـ (@keyframes) يسمح لك بعمل تأثيرات خلال مدة زمنية معينة 0% تمثل بداية هذه المدة الزمنية و 100% تمثل نهاية هذه المدة فنحن هنا قمنا بعمل دوران وستكون درجة الدوران 0 عند بداية عمل الأنميشن وسيستمر بالدوران درجة درجة خلال مدة زمنية سنحددها لاحقاً حتى يصل إلى النهاية وتصبح درجة الدوران 360 درجة فلو قمنا بوضع درجة الدوران إلى 120 في النهاية على سبيل المثال لن يدور إلأ إلى 120 درجة فقط.

 الآن دعنا نقوم بتشغيل هذا الإنميشن الذي قمنا بصنعه مع المربع الذي صنعناه سابقاً 
 نحتاج في البداية لإضافة عدة خصائص للكلاس (squar) تخبره بأن تقوم بتشغيل هذا الأنميشن ، ولكي نقوم بذلك سنقوم بالتعديل على خصائص الكلاس (squar) ليكون الناتج النهائي كالتالي : 
.squar{
 width:100px;
 height: 100px;
 background-color: red;
/*اختيار اسم الأنميشن الذي قمنا بعمله */
    animation-name: rotate;
/*تحديد مدة عمل الأنميشن بالثانية*/
    animation-duration: 5s;
/*عدد مرات عمل الإنميشن قمنا بتحديدها بلانهاية */
    animation-iteration-count: infinite

/*تستطيع الإستغناء عن الثالثة اسطر السابقة واختصارها في سطر واحد بالسطر التالي */       
/* animation: rotate 5s infinite;*/
}

الآن لنذهب ونلقي نظرة إلى النتيجة...
  مارأيك ؟ جميل جداً ، أليس كذلك ؟ 
 المربع يستمر في الدوران ولا يتوقف، وسبب ذلك أننا قمنا بجعل مدة عمل الآنميشن لا نهائية 
 الآن دعنا نذهب ونقوم بالتغيير قليلاً على حركة الأنميشن
 سنقو بإجراء التغييرات التالية : 

@keyframes rotate{
 0% {transform: rotate(0deg) }
 30% {transform: rotate(111deg) }
 60% {transform: rotate(55deg) }
 100% {transform: rotate(360deg) }
}

لنذهب معاً وننظر إلى النتيجة.... 
 لا بد أنك لاحظت كيفية اختلاف الدوران عن السابق فقد جعلنا الدوران يبدأ من الصفر إلى 111 درجة ومن ثم اعدناه للخلف 55 درجة ومن ثم اكملنا الدوران إلى 360 درجة

  وهنا تأتي قوة الـ (@keyframes) وروعتها تستطيع فعل ماهو اكثر من ذلك.
 التغيير ليس مقتصر فقط على الدوران تستطيع تغيير أي شيء سواء الطول أو العرض، تستطيع كذلك تغيير قيمة الشفافية أو اللون كل ما يخطر ببالك تستطيع تغيره.

  دعنا على سبيل المثال نقوم بالتعديل على (@keyframes) للمرة الأخيرة
@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    30% {
        transform: rotate(111deg);
        background: yellow;
        height: 140px;
        width: 140px;
    }
    60% {
        transform: rotate(55deg);
        background: blue;
        height: 180px;
        width: 180px;
    }
    100% {
        transform: rotate(360deg);
    background: orange;
        height: 200px;
        width: 200px;
    }
}
الآن لنذهب ونرى النتيجة :
See the Pen qaOvgA by Mohammed Jaffar (@MJK) on CodePen.

مذهل جداً أليس كذلك ؟ 
لا بد من أنك الآن تعرفت على كيفية عمل الـ (@keyframes) وكيفة استخدامها

  إلى هنا ينتهي درسنا

  إن كنت ترى بأن هذا الدرس ذو فائدة لك قم بدعمنا ونشره مع أهلك وأصدقائك لتعم الفائدة للجميع 

  دمتم بحفظ الله ورعايته ...

ليست هناك تعليقات

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك