30 Awesome SVG Animation لإلهامك

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

من خلال العمل مع SVG ، نتمتع بمتصفحات جيدة لمتصفح SVG ، ولدينا طرق أكثر لإنشاء رسوم متحركة جديدة. يمكنك استخدام كل من وظيفة الرسوم المتحركة المدمجة في SVG أو الرسوم المتحركة CSS3 (لاحظ أنه لا يمكن القيام بكل شيء بواسطة CSS لذلك لا تزال هناك حاجة لجافا سكريبت). هناك طريقة أخرى تتمثل في استخدام محركات JavaScript مثل GSAP أو Snap. JS هي ممارسة جيدة لإنشاء الرسوم المتحركة.

هنا قمت بتجميع بعض الرسوم المتحركة SVG المدهشة. يستخدم البعض الرسوم المتحركة SVG ، والبعض الآخر يستخدم تحويل CSS للرسوم المتحركة الأساسية ، والباقي يستخدمون مساعدة JavaScript.

الرسوم المتحركة الحدودية من جانب شون مكافري

تم صنعه فقط باستخدام CSS ، حيث يتشكل الحد بسلاسة حول النص ، عند التمرير فوق “يحوم” تعليمات.

الشريط الجانبي المرن SVG من نيكولاي تالانوف

يصبح الشريط الجانبي مرنًا عند محاولة سحبه بعيدًا عن الجانب. مفهوم جميل مطبق على الشريط الجانبي للتطبيق المستوحى من تصميم المواد.

هدم إلى تحديث من قبل نيكولاي تالانوف

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

الرسوم المتحركة التدرج على النص باتريك يونغ

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

الرسوم المتحركة للقلب نيكولاي تالانوف

يوضح لك هذا الرسم المتحرك كيف يتكون رمز القلب من دائرتين ومربع. يتم التحويل باستخدام CSS للرسوم المتحركة.

دعنا السفر عن طريق jjperezaguinaga

الرسوم المتحركة التي توضح المدن والوجهات السياحية الشعبية في العالم. يتم إنشاء التحركات والتحولات باستخدام الرسوم المتحركة CSS.

القائمة تبديل الرسوم المتحركة من قبل Tamino Martinius

رسم متحرك لأيقونة الهامبرغر يتحول إلى رمز متقاطع. تعرف على مدى سلاسة الانتقال بين الكائنين.

Infographic المتحركة بواسطة Sdras

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

Rain-Bros لا يحب JS بواسطة cihadturhan

الرسوم المتحركة حلقة فريدة ومضحكة تصور المشي الشخصيات. حركة الكائنات في هذا العرض التوضيحي عبارة عن مزيج من الرسوم المتحركة SVG و CSS3. تستخدم الأرجل الرسوم المتحركة SVG بينما تستخدم الأجزاء الأخرى الرسوم المتحركة CSS3.

الساعة بواسطة محمد محبفر

شاهد الحركة السلسة للأغراض المستعملة في هذه الساعة والتي تعرض الوقت الحالي. تم إنشاء الرسوم المتحركة بالكامل باستخدام وظيفة الرسوم المتحركة SVG.

قوس قزح صاروخ رجل من كريس غانون

رائد فضاء يطلق النار على الفضاء باستخدام عبوة نفاثة تعمل بقوس قزح (؟). الرسوم المتحركة لطيفة مصنوعة باستخدام البرنامج المساعد GSAP Tweenmax.

أيقونة متحركة لويجي دي روزا

ولكن على هذه الرموز SVG المتحركة للتحقق من ما يمكنهم القيام به. صنع المنشئ هذا باستخدام GSAP.

مساحة عمل مسطحة من تصميم Hohng Nhật

الرسوم المتحركة توضح مساحة العمل في تصميم نمط مسطح. استخدم المنشئ GSAP لإنشاء هذه الرسوم المتحركة الرائعة لتشكيل محطة عمل.

أيقونة الرسوم المتحركة القابلة للنقر بواسطة Hamish Williams

هذه رسوم متحركة رائعة تستخدم مكتبة snap.svg. انقر لرؤية البريد يجري “أرسلت”.

الغوص بواسطة كريس غانون

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

اقتراح لشبكة الإنترنت بواسطة LegoMushroom

لديها الرسوم المتحركة ، لحن لطيف ، مدخل رائع جدا للنص ، ما الذي لا يعجبك؟ تم تصميم هذا باستخدام mo.js ، مكتبة JavaScript الرسومية المتحركة.

خط الكتابة المتحركة بواسطة لي بورتر

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

قائمة Gooey التي كتبها Lucas Bebber

استمتع بتأثير gooey في هذا التصميم ، والذي تم إنشاؤه باستخدام مرشح SVG وإضافة الرسوم المتحركة CSS. والنتيجة واقعية ورائعة ، ويمكنك اللعب مع أربعة إصدارات مختلفة.

كعكة جديدة من ماركو بريا

كيفية صنع كعكة عيد ميلاد الطبقات المصنوعة من الرسوم المتحركة SVG و CSS.

شكرا لك من قبل راشيل سميث

انظر فقط هذه الرسوم المتحركة الرائعة لملاحظة شكر بسيطة. تم إنشاؤه باستخدام مكتبة SVG و GSAP TweenMax.

المغلق ضد SVG ماريو سانشيز ماسيلي

الآن دعونا ننظر إلى المقارنة حول الرسوم المتحركة CSS و SVG ، هل ترى الفرق?

المشي الكلب مارك نيلسون

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

ساعة رملية بواسطة ليلا

عمل إبداعي تم صنعه باستخدام الرسوم المتحركة SVG الخالصة (SMIL) ؛ لا CSS أو JS لتحريك الأشياء هنا.

شعار الرسوم المتحركة بواسطة Adem ilter

إليكم مقدمة شعار لطيفة متحركة باستخدام الرسوم المتحركة SVG المضمنة. لم يتم استخدام CSS أو JS لجعل كل شيء يعمل.

احصائيات الرسوم المتحركة من قبل جوناس Badalic

رسم احصائيات جميل مع الرسوم المتحركة SVG مدعوم من مكتبة Snap.SVG.

Ouroboros بواسطة نويل Delgado

مسار رسوم SVG مدهش. أولاً ، قام المنشئ برسم مسار على SVG ، قبل استخدام tween.js لإضافة الرسوم المتحركة.

آثار جوي الإبداعية التي كتبها لوكاس بيبير

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

رمي البقرة بواسطة سارة دراسنر

هذا واحد هو الرسوم المتحركة SVG مدعوم من TweenMax ولكنها مصنوعة فقط للمتعة. امسك البقرة واسحبها حول الكوكب. سوف تدور في "المدار".

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

يمكن أن تكون الرسوم المتحركة إضافة لطيفة صغيرة لشعار البيرة محتدما. تم تصميم الفقاعات العائمة الصغيرة الجميلة بحتة باستخدام صيغة الرسوم المتحركة الأصلية لـ SVG.