CSS3 Animation - إنشاء مشجع مع تأثير الارتداد باستخدام Bezier Curve

هل كنت تعلم هذا التحولات الهندسية إضافة إلى عناصر HTML مع تحوليمكن تحريك خاصية CSS مثل المقياس والانحراف والتدوير? يمكن أن تكون متحركة باستخدام انتقال الممتلكات و keyframes الرسوم المتحركة ، ولكن الأهم من ذلك هو أن التحولات المتحركة يمكن أن تأخذ درجة عالية مع إضافة القليل تأثير ترتد, باستخدام بيزيه المكعب () وظيفة توقيت.

شيء صغير, بيزيه المكعب () (في CSS) وظيفة توقيت للتحولات. وهي تحدد سرعة الانتقال ، ومن بين أشياء أخرى ، يمكن استخدامها أيضًا خلق تأثير كذاب في الرسوم المتحركة.

في هذا المنشور ، سنذهب أولاً إنشاء الرسوم المتحركة التحول بسيط الذي نحن في وقت لاحق أضف بيزيه المكعب () وظيفة توقيت. في نهاية هذا البرنامج التعليمي ، ستفهم كيفية إنشاء رسم متحرك يستخدم كلا من التدريجي وتأثير ترتد. هذه هي النتيجة النهائية (انقر لرؤية التأثير).

العرض مستوحى من هذه اللقطة الجميلة التي أطلقها كريستوفر جونز حول علامة موقع متحركة.

1. خلق الأوراق

يتكون شكل علامة الموقع من خمسة أوراق (دعنا نسميها). لإنشاء شكل بيضاوي من ورقة ، دعونا نستخدم الحدود بين دائرة نصف قطرها خاصية CSS. ال الحدود بين دائرة نصف قطرها من زاوية واحدة هي تتكون من اثنين من أنصاف الأقطار, الأفقي والرأسي ، كما هو موضح أدناه.

ال الحدود بين دائرة نصف قطرها الخاصية لديها العديد من الجمل المختلفة. سوف نستخدم واحدة أكثر تعقيدا لشكل العلامة:

 الحدود دائرة نصف قطرها: htl htr hbr hbl / vtl vtr vbr vbl؛ 

في بناء الجملة هذا ، يتم تجميع نصف القطر الأفقي والرأسي معًا ؛ ح و الخامس تمثل نصف القطر الأفقي والرأسي ، و تي, ل, ب و ص تمثل الزوايا العلوية واليسرى والسفلية واليمنى. على سبيل المثال, VBL لتقف على دائرة نصف قطرها الرأسي من الزاوية اليسرى السفلى.

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

إلى إنشاء شكل بيضاوي عمودي, الحفاظ على دائرة نصف قطرها في أفقي 50٪ لجميع الزوايا ، واضبط الأعمدة الرأسية ، حتى يظهر الشكل المطلوب. ال الجانب الأفقي سوف تستخدم قيمة واحدة فقط: 50٪.

ال نصف القطر العمودي من الزوايا العلوية اليسرى وأعلى اليمين سيكون 30٪, في حين أن الزوايا السفلية اليسرى والسفلية اليمنى ستستخدم 70٪ القيمة.

HTML

CSS

.pinStarLeaf width: 60px؛ الارتفاع: 120 بكسل ؛ نصف قطرها الحدود: 50 ٪ / 30 ٪ 30 ٪ 70 ٪ 70 ٪ ؛ لون الخلفية: # B8F0F5 ؛ 

2. ضرب الأوراق

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

HTML

CSS

#pinStarWrapper width: 300px؛ الارتفاع: 300 بكسل ؛ الموقف: نسبي  .pinStarLeaf width: 60px؛ الارتفاع: 120 بكسل ؛ الموقف: مطلق ؛ نصف قطرها الحدود: 50 ٪ / 30 ٪ 30 ٪ 70 ٪ 70 ٪ ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 0 ؛ أسفل: 0 ؛ الهامش: السيارات ؛ التعتيم: .5 ؛  .pinStarLeaf: nth-of-type (1) background-colour: # B8F0F5؛  .pinStarLeaf: nth-of-type (2) background-colour: # 9CF3DC؛  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0؛  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1؛  .pinStarLeaf: nth-of-type (5) background-colour: # F3EDA2؛  

3. التقاط الحدث انقر وتحسين جماليات

دعونا إضافة مربع الاختيار مع ال #pinStarCenterChkBox معرف لالتقاط الحدث انقر. عند تحديد مربع الاختيار ، ستخرج الأوراق (تدور). نحن بحاجة أيضا إلى إضافة دائرة بيضاء مع ال #pinStarCenter معرف لعلم الجمال. سيتم وضعه أعلى العلامة ، وسيكون الجزء الأوسط من علامة الموقع.

HTML

نضع مربع الاختيار من قبل ، والدائرة البيضاء بعد ، الأوراق:

CSS

أولاً ، قمنا بتعيين الأنماط الأساسية لمربع الاختيار ودائرة التغطية:

 #pinStarCenter، #pinStarCenterChkBox width: 45px؛ الارتفاع: 50 بكسل ؛ الموقف: مطلق ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: -60 بكسل ؛ أسفل: 0 ؛ الهامش: السيارات ؛ لون الخلفية: #fff؛ نصف قطر الحدود: 50 ٪ ؛ المؤشر: المؤشر ؛  #pinStarCenter، .pinStarLeaf pointer-events: none؛  #pinStarCenter> إدخال [type = "checkbox"] width: 100٪؛ الارتفاع: 100 ٪ ؛ المؤشر: المؤشر ؛  

حيث أن كل ورقة سوف تدور على طول المحور z في زوايا مختلفة, نحن بحاجة لضبط تحويل: rotatez () ؛ الملكية وفقا لذلك ، ل إنشاء شكل نجمة. نحن أيضا تطبيق انتقال خاصية لتأثير الدوران (بتعبير أدق نستخدم انتقال: تحويل 1 ثانية الخطية حكم الأوراق).

 #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf الانتقالية: convert 1s linear؛  #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf: nth-of-type (5) convert: rotatez (35deg)؛  #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf: nth-of-type (4) convert: rotatez (105deg)؛  #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf: nth-of-type (3) convert: rotatez (180deg)؛  #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf: nth-of-type (2) convert: rotatez (255deg)؛  #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf: nth-of-type (1) convert: rotatez (325deg)؛  

إذا كان لديك نظرة على CSS أعلاه ، يمكنك أن ترى من وجود #pinStarCenterChkBox: تم تحديده ~ محدد الأشقاء العامة التي نضيفها فقط انتقال و تحول الخصائص عند تحديد خانة الاختيار (عندما ينقر المستخدم على العلامة).

4. تعديل مركز الدوران

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

لجعل تأثير الدوران يعمل بشكل صحيح ، دعنا نضيف القواعد التالية إلى .pinStarLeaf محدد في ملف CSS لدينا:

 .pinStarLeaf transform-origin: 30px 30px؛ انتقال: تحويل 1 ثانية الخطية.  

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

فهم كيف يوبيك بيزير () يعمل

الآن ، لإضافة تأثير ترتد ، نحن بحاجة إلى استبدال خطي وظيفة توقيت مع بيزيه المكعب () في ال انتقال الإعلانات في ملف CSS لدينا.

ولكن أولا ، دعونا نفهم المنطق وراء بيزيه المكعب () وظيفة توقيت بحيث يمكنك بسهولة فهم تأثير ترتد.

بناء الجملة ل بيزيه المكعب () وظيفة هي التالية, د و تي هي مسافه: بعد و زمن, وتتراوح قيمها عادة بين 0 و 1:

بيزير مكعب (t1 ، d1 ، t2 ، d2)

على الرغم من شرح CSS بيزيه المكعب () من حيث المسافة والوقت ليست دقيقة ، فمن الأسهل بكثير فهم ذلك بهذه الطريقة.

افترض أن هناك مربع ينتقل من النقطة أ إلى ب في 6 ثوان. دعنا نستخدم ما يلي بيزيه المكعب () وظيفة توقيت للانتقال مع t1 = 0 و D1 = 1 القيم.

 / * t1 = 0 ، d1 = 1 ، t2 = 0 ، d2 = 0 * / مكعب بيزيري (0،1،0،0) 

في أي وقت من الأوقات تقريبًا ، ينتقل المربع من النقطة أ إلى منتصف النقطة ويستغرق باقي الوقت للوصول إلى ب.

لنجرب نفس الانتقال مع القيم t1 = 1 و D1 = 0.

 / * t1 = 1 ، d1 = 0 ، t2 = 0 ، d2 = 0 * / مكعب بيزيري (1،0،0،0) 

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

كما ترى, D1 تسيطر على المسافة بين أ و منتصف نقطة, و T1 ال الوقت الذي يستغرقه للوصول إلى منتصف نقطة من A.

لنستخدم D2 و T2 الآن. على حد سواء T1 و D1 سيكون 1 و t2 = 1 و D2 = 0.

 / * t1 = 1 ، d1 = 1 ، t2 = 0 ، d2 = 1 * / مكعب بيزيير (1،1،0،1) 

يتحرك الصندوق في منتصف الطريق تقريبًا خلال 3 ثوانٍ (بسبب t1 = 1, D1 = 1) ، وفي أي وقت من الأوقات يقفز إلى النقطة ب.

المثال الأخير يتبادل القيم السابقة لـ T2 و D2:

 / * t1 = 1 ، d1 = 1 ، t2 = 1 ، d2 = 0 * / مكعب بيزيير (1،1،1،0) 

يتحرك الصندوق في منتصف الطريق تقريبًا خلال 3 ثوانٍ (بسبب t1 = 1, D1 = 1) ، ثم لمدة 3 ثوانٍ أخرى لا تتحرك كثيرًا قبل القفز إلى النقطة B.

هذه الأمثلة تبين ذلك D2 و T2 السيطرة على المسافة والوقت الذي يستغرقه مربع ل انتقل من منتصف النقطة إلى النقطة B.

على الرغم من أنك ربما لم تكن بحاجة إلى هذا التفسير الطويل (ولكن المتفرق) بيزيه المكعب () في هذه المرحلة ، أعتقد أنه سيساعدك على فهم هذه الوظيفة بشكل أفضل. الآن ، أين يأتي الارتداد في كل هذا?

5. إضافة تأثير ترتد مع مكعب بيزييه ()

ال المعلمات الرئيسية لتأثير ترتد هي المسافات, D1 و D2. ا D1 قيمة ال أقل من 1 يأخذ مربع وراء النقطة أ قبل المتابعة نحو B في بداية الرسوم المتحركة.

ا D2 قيمة ال اكثر من 1 يأخذ مربع وراء النقطة ب قبل العودة للراحة في B في نهاية الرسوم المتحركة. ومن هنا يأتي تأثير الارتداد ذهابًا وإيابًا.

سأضيف الآن بيزيه المكعب () القيم مباشرة إلى العرض التوضيحي لدينا بدلا من السابق خطي قيمة انتقال الملكية ، وتتيح لك رؤية النتائج.

 #pinStarCenterChkBox: تم تحديده ~ .pinStarLeaf انتقال: تحويل 1s مكعب - bezier (.8 ، -. 5 ، .2،1.4) ؛  

هذه هي النتيجة النهائية ، وهي رسوم متحركة لمروحة CSS فقط مع تأثير الارتداد:

للمقارنة وفهم تأثير ترتد بشكل أفضل ، وهنا هو كيف بيزيه المكعب () تتصرف قيمة الرسوم المتحركة عند تطبيقها على مربع المثال الخاص بنا: