في أحد الأيام، جاء إلي مصمم واجهة المستخدم الخاص بنا وقال إنه يجب علي استبدال الرسوم المتحركة التي كتبتها في البرنامج برسوم json المتحركة التي قدموها لي والسبب هو أن بعض الرسوم المتحركة معقدة للغاية ولا يمكنها تحقيق تأثيراتها المتوقعة إذا كتبتها بنفسي (. عندما كتبت هذا، فكرت فجأة في سؤال، لماذا لا تستخدم GIF لمثل هذه الرسوم المتحركة المعقدة أجاب مطور Android الذي كان يجلس أمامي أن جودة GIF قد لا تكون عالية عند تشغيلها، حسنًا، أعتقد ذلك)
أنا:؟ ؟ ؟ ؟ يمكن للعميل إضافة رسوم متحركة json ولم أسمع مطلقًا عن قدرة صفحات H5 على قراءة الرسوم المتحركة json.
بدا المصمم متأكدًا وقال نعم، هناك نسخة ويب.
بينما أكتب هذا، أريد حقًا أن أشيد بالمصممات لدينا، حيث تم العثور على العديد من الحلول الجيدة تقريبًا تحت ضغطهن (أوه، يمكنهم أيضًا كتابة صفحات H5... يريدون مني أن أفعل ذلك). ما الفائدة من السلسلة.
وهنا يأتي السؤال، كيفية استخدام الرسوم المتحركة json في صفحة H5؟
كيفية استخدام الرسوم المتحركة json داخل صفحة H5في هذا الوقت، أرسل لي المصمم رابطًا، انظر هنا موقع Lottie-web؛ لقد نقرت عليه لمعرفة المزيد عنه، وهو عبارة عن مكتبة رسوم متحركة مفتوحة المصدر من Airbnb، ويمكن لهذه المكتبة إكمال العديد من الرسوم المتحركة الرائعة وهي سهلة الاستخدام للغاية يحتاج المصمم فقط إلى تصدير ملف JSON من خلال الرسوم المتحركة التي تم إنشاؤها بواسطة AE البرنامج، ثم تستخدم الواجهة الأمامية Lottie لتحميل ملف JSON مباشرة لإنشاء رسوم متحركة، ولا يتطلب من المصمم قطع العديد من صور GIF، ولا تحتاج الواجهة الأمامية إلى إجراء رسم معقد، فهي تقتل عصفورين بحجر واحد وLottie متاح على جميع الأنظمة الأساسية، بما في ذلك iOS وAndroid والويب وReact. يمكن استخدام Native، وهو يستهلك ذاكرة أقل ويتم تحميله بسلاسة. (لماذا أكتشف مثل هذا الشيء السحري الآن فقط؟
بعد أن قلت الكثير، كيف يمكن استخدامه في صفحات H5؟
الأمر بسيط جدًا. يتم إرسال المجلد الذي أنشأه المصمم إليك (يحتاج المصمم فقط إلى إضافة مكون إضافي في AE وتصديره). بعد فتحه، يجب أن يبدو هكذا تعرف على كيفية استخدامه (لذلك ما زلت أكتب مقالات فنية هنا).
وبغض النظر عن المزاح، فقد واجهت بالفعل الكثير من المخاطر أثناء الاستخدام، وإليك بعض الأشياء التي يجب الانتباه إليها عند استخدامها.
1. هناك الكثير من الأشياء المضمنة في ملف Demo.html، والتي تكون قبيحة المظهر عند استخدامها.في الواقع، Demo.html يضع كلا من js وjson في هذا الوقت، يمكننا فصل js وjson بشكل منفصل.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
يتم وضع بيانات json المطلوبة للرسوم المتحركة في ملف data.json، ولكن تنسيق البيانات في ملف json المحدد هو كما يلي (وهو طويل جدًا ولا يمكن قطعه)
إذا كنت تريد استخدام البرنامج النصي لتقديم ملف json بتنسيق HTML منفصل، فسيتم الإبلاغ عن خطأ، لذلك تحتاج إلى تعديل ملف json وإضافة متغيرات في المقدمة وتعيين القيم. كما هو موضح أدناه:
بهذه الطريقة، يمكنك استيراد ملف json بنفس طريقة استيراد ملف js.
<script type=text/javascript src=./data.json></script>
بهذه الطريقة، يتم تقليل ملف demo.html المتوفر إلى ما يلي
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ لون الخلفية: أسود; الهامش: 0px الارتفاع: 100%; : مخفي } #lottie{ لون الخلفية: #fff العرض: 100%؛ Translation3d(0,0,0); text-align: center; https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { Container: document.getElementById('lottie')، العارض: 'svg'، حلقة: صحيح، التشغيل التلقائي: صحيح، AnimationData: AnimationData }; anim;بالطبع، إذا كنت تستخدم برمجة js المعيارية، فيمكنك استيرادها مباشرةً دون تغيير data.json، كما يلي:
استيراد بيانات الرسوم المتحركة من "./data.json"2. تكييف الرسوم المتحركة مع الأجهزة المحمولة
السبب الذي يجعلني أعتقد أن هذا مأزق هو أن الرسوم المتحركة التي قدمها لي المصمم كانت في وضع ملء الشاشة وغير شفافة، ثم طلبت مني وضع الرسوم المتحركة بعرض 100% واعتراض متمركز رأسيًا، وقد قمت بتجربتها المتصفح، تحت شاشة 360*640، يكون العرض 100%، والتعبير كما يلي (يبدو أن الارتفاع 100%، والعرض متكيف مع المركز، ويتسرب لون الخلفية السوداء على كلا الجانبين. ، انظر الجزء ذو الإطار الأزرق في الصورة أدناه)
التبديل إلى شاشة iPhone
هذا التخطيط مألوف جدًا، ويتصرف بنفس الطريقة التي يتصرف بها عندما يتم تعيين سمة ملاءمة الكائن الخاصة بـ img (تناسب الكائن هو أيضًا كنز. يمكن للطلاب المهتمين دراسته، فهو سهل الاستخدام للغاية).
ولحل احتياجات المصمم هنا، أقوم بشكل أساسي بإضافة الكود التالي:
جزء js: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); جزء css: (أضف تخطيطًا مرنًا إلى اللوتي) #lottie { width:100 %؛ الارتفاع: 100%؛ التحويل: Translate3d(0,0,0); اليسار: 0؛ مؤشر z: 3؛ العرض: الاتجاه المرن: الصف؛ ضبط المحتوى: المركز؛ }التأثير النهائي:
تلخيصلقطات الشاشة المذكورة أعلاه كلها ثابتة، ولكن لها تأثير ديناميكي بالفعل. لا أعرف كيفية إضافة رسوم متحركة، لذا لم أفعل ذلك. إذا كنت مهتمًا، يمكنك تجربتها.
نطاق التطبيق: أعتقد أن الرسوم المتحركة التي يتم عرضها بملء الشاشة أو المعقدة جزئيًا يمكن أن تستخدم هذه الطريقة، فهي أكثر سلاسة من GIF وتتمتع بتوافق جيد. تستخدم بعض منتجات Android هذه الطريقة لفتح الشاشة بطريقة رائعة، مثل صفحات H5. إذا كان الأمر كذلك، فيمكن عمومًا تنفيذ الرسوم المتحركة البسيطة بواسطة برنامجك الخاص، ويمكنك تجنب المخاطر.
الروابط المرجعية:
موقع لوتي الرسمي
عنوان جيثب لوتي ويب
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.