كيفية استخدام التحولات CSS3 والرسوم المتحركة لتسليط الضوء على تغييرات واجهة المستخدم

يتمتع المصممون والفنانون بتاريخ طويل من تجربة الحركة والتأثيرات وأنواع مختلفة من الأوهام بهدف إضافة طبقة إضافية إلى عملهم. بدأت حركة الفن المرجع في استخدام أوهام بصرية في الستينيات لإعطاء انطباع بالحركة.

ومنذ ذلك الحين ، ظهرت نهوج أحدث وأحدث ، مثل الفن الحركي الشهير مؤخرًا الذي يوسع منظور المشاهد باستخدام حركة متعددة الأبعاد. كما ظهر Motion في علوم الكمبيوتر مع اختراع أول مؤشر وامض في عام 1967.

في تطوير الواجهة الأمامية ، كانت عناصر DOM عادةً متحركة بواسطة JavaScript قبل إصدار CSS3 ، وهي طريقة لا تزال تعمل ، لكن خصائص جديدة مقدمة من CSS3 تسمح لنا بتعزيز تصاميمنا مع تأثيرات مختلفة والحركة بطريقة أكثر سهولة.

أهم طريقتين توفرهما CSS3 هما التحولات والرسوم المتحركة. في هذا المنشور سوف نلقي نظرة على ما هو عليه ، وما هو الفرق بينهما ، وكيف يمكنك الاستفادة منها.

الانتقالات

التحولات والرسوم المتحركة على حد سواء تستخدم ل تصور التغييرات في الدولة عنصر HTML بواسطة تعديل واحد أو أكثر من خصائص CSS الخاصة به.

إن أبسط شكل من أشكال تغيير الحالة هو تغيير لون زر أو رابط عند تحريكه. عندما يحدث ذلك ، يحصل العنصر على نمط مختلف قليلاً ، وهو ما يلاحظه المشاهد عادةً كما لو أن شيئًا ما قد تحرك على الشاشة.

يعد تغيير خصائص CSS للارتباط على التحويم (أو التركيز ، أو النقر) هو أقدم وأبسط أشكال التحولات ، وكان موجودًا قبل عصر CSS3 بفترة طويلة.

 اللون: برتقالي ؛  a: hover color: red؛  a: focus color: blue؛  أ: تمت زيارتها color: green؛ 

يتم استخدام الانتقالات عندما يتغير عنصر HTML من حالة محددة مسبقًا إلى أخرى. قدم CSS3 خصائص جديدة تتيح تصورات أكثر تطوراً من ذي قبل ، مثل وظائف التوقيت أو التحكم في المدة.

سنلقي نظرة على خصائص CSS الجديدة في القسم التالي ، بعد فهم كيفية اختلاف الرسوم المتحركة. الآن ، دعونا نرى أهم الأشياء التي تحتاج إلى معرفتها حول التحولات.

1. لديهم دائما بداية ونهاية الحالة.
2. يتم تعريف الحالات بين نقطتي البداية والنهاية ضمنًا بواسطة المستعرض ، ولا يمكننا تغيير ذلك باستخدام CSS.
3. يتطلبوا اثار صريح, مثل إضافة فئة pseudoclass جديدة بواسطة CSS أو فئة جديدة بواسطة jQuery.

يمكنك مشاهدة مثال جميل على انتقالات CSS3 المُستخدمة بذكاء أدناه ، والتي يكشف المؤلف عن معلومات مخفية بطريقة غير تدخلية ولكنها لا تزال توجه تركيز المستخدمين على المحتوى الجديد.

الرسوم المتحركة

إذا كنا نريد تصور تغييرات الحالة باستخدام حركات أكثر تعقيدًا ، أو إذا لم يكن لدينا محفز صريح ، على سبيل المثال إذا كنا نريد أن نبدأ التأثير عند تحميل الصفحة ، فإن الرسوم المتحركة هي الطريق للذهاب.

الرسوم المتحركة تجعل من الممكن تحديد مسار أكثر تعقيدًا من خلال تحديد مسارنا وتكوينه إطارات مفتاحية. إطارات مفتاحية هي نقاط وسيطة في مسار الرسوم المتحركة ، والتي تسمح لنا بتغيير نمط العنصر المتحرك عدة مرات كما نريد.

على الرغم من أن CSS3 تقدم طرقًا رائعة لبناء رسوم متحركة متطورة ، إلا أنه يصعب عادةً إنشاءها بدلاً من التحولات ، ولهذا السبب توجد العديد من مكتبات الرسوم المتحركة الرائعة ، مما يسهل عملنا.

تشمل أهم الأشياء التي تحتاج إلى معرفتها عن الرسوم المتحركة لـ CSS3:

1. لا تتطلب تشغيلًا صريحًا ، ويمكن أن تبدأ عند تحميل الصفحة أو عندما يحدث حدث DOM آخر في المستعرض
2. يمكن استخدامها في الحالات التي يتم فيها استخدام الانتقالات ، على سبيل المثال عندما تتم إضافة فئة جديدة أو فئة مزيفة أو إزالتها (على الرغم من أنها حالة استخدام أقل تكرارًا)
3. أنها تتطلب منا تحديد بعض الإطارات المفتاحية (الحالات الوسيطة)
4. يمكننا تحديد عدد وتكرار وأسلوب هذه الإطارات المفتاحية

في المثال أدناه ، يمكنك رؤية قائمة منسدلة رائعة متحركة. تبدأ الرسوم المتحركة عندما نضغط على الزر. يتم تحقيق ذلك عن طريق إضافة فئات إضافية إلى عناصر القائمة مع jQuery عند حدوث حدث النقر.

هذه الفئات الجديدة هي الرسوم المتحركة مع المحدد keyframes القواعد في ملف CSS. تتم إزالة الفئات الإضافية بواسطة jQuery عندما يقوم المستخدم بالنقر فوق الزر في المرة التالية ، ثم يتم إخفاء القائمة مرة أخرى.

خصائص المغلق و keyframes في القاعدة

للتحولات يمكننا استخدام إما انتقال خاصية الاختزال ، أو 4 خصائص ذات انتقال واحد: انتقال الملكية, الانتقال المدة, الانتقال توقيت وظيفة, و الانتقال تأخير. تحتوي خاصية الاختزال على كل الخصائص المفردة في نموذج مختصر.

للرسوم المتحركة هناك حيوية خاصية الاختزال في أيدينا والتي لا تقل عن 8 خصائص الرسوم المتحركة واحدة ، وهي الرسوم المتحركة اسم, مدة الرسوم المتحركة, الرسوم المتحركة توقيت وظيفة, الرسوم المتحركة تأخير, الرسوم المتحركة تكرار العد, الرسوم المتحركة الاتجاه, الرسوم المتحركة ملء وضع, و الرسوم المتحركة للعب للدولة.

الشيء الأكثر أهمية مع كل من التحولات والرسوم المتحركة هو أننا دائما بحاجة إلى تحديد خصائص CSS التي سيتم تعديلها أثناء تغيير الحالة. مع التحولات ، يبدو هذا كالتالي:

 .عنصر الخلفية: البرتقالي. انتقال الملكية: الخلفية ؛ مدة الانتقال: 3 ثانية ؛ انتقال توقيت وظيفة: سهولة في ؛  .element: hover background: red؛ 

حددنا خلفية الملكية ، لأن هذا هو ما سوف يتغير أثناء الانتقال.

يمكننا تغيير أكثر من خاصية CSS في عملية انتقال واحدة ، وفي هذه الحالة ، سيتم تعديل الرمز أعلاه كما يلي: انتقال الملكية: الخلفية ، الحدود ؛. يمكننا أيضا استخدام انتقال الملكية: الكل ؛, إذا كنا لا نريد تحديد كل خاصية على حدة.

يمكننا اختيار الاختزال انتقال الملكية كذلك. إذا فعلنا ذلك ، فنحن نحتاج دائمًا إلى الاهتمام بالترتيب الصحيح للخصائص الداخلية (انظر بناء الجملة في المستندات).

 .عنصر الخلفية: البرتقالي. الانتقال: الخلفية 3s سهولة في ؛  .element: hover background: red؛ 

إذا كنا نريد إنشاء رسم متحرك ، فنحن مطالبون بتحديد الصلة إطارات مفتاحية. يجب تعديل خصائص CSS في تعريف منفصل keyframes في القاعدتين. فيما يلي مثال على كيفية القيام بذلك:

 .عنصر موقف: نسبي؛ اسم الرسوم المتحركة: slide؛ مدة الرسوم المتحركة: 3s ؛ الرسوم المتحركة ، توقيت وظيفة: سهولة في.  @ keyframes slide 0٪ left: 0؛  50٪ left: 200px؛  100٪ left: 400px؛ 

في المثال أعلاه أنشأنا تأثير انزلاق بسيط للغاية. حددنا الرسوم المتحركة اسم, ثم ملزمة 3 إطارات مفتاحية لها التي حددناها في @ keyframes slide … في القاعدتين. تشير النسب المئوية إلى مدة الرسوم المتحركة ، لذلك يحدث 50 ٪ عند 1.5s في المثال.

يمكننا استخدام الاختزال حيوية خاصية كذلك ، أو يمكن أن تحدد الإطارات المفتاحية مع أكثر بساطة من الى حكم بالطريقة التالية:

 .عنصر موقف: نسبي؛ الرسوم المتحركة: الشريحة 3s سهولة في ؛ keyframes slide from left: 0؛  إلى left: 400px؛ 

إن إنشاء رسوم متحركة أكثر تعقيدًا هو شكل فني خاص بها ، إذا كنت مهتمًا ، يمكنك قراءة اثنين من دروس الرسوم المتحركة الخاصة بنا حول كيفية إنشاء سرادق متقدم وكيفية إنشاء تأثير ارتدادي.

عند بناء التحولات والرسوم المتحركة ، تحتاج إلى معرفة ذلك ليس كل خصائص CSS يمكن تحريكها, لذلك من الأفضل دائمًا التحقق من الخاصية التي تريد تغييرها في CSS Animatable.

عملت الرسوم المتحركة والانتقالات في CSS3 مع بادئات البائعين لفترة طويلة ، وهو ما لم نعد نحتاج إلى استخدامه بعد الآن ، لكن شبكة مطوري Mozilla لا تزال توصي بإضافة -بكت بادئة لفترة من الوقت ، حيث أن دعم المتصفحات المستندة إلى Webkit لم يحقق سوى الاستقرار مؤخرًا.