أود في هذه المقالة إبراز تعقيدات العمل باستخدام رسومات SVG ، ورسوم SVG المتحركة (بما في ذلك المسار) ، والمشاكل وطرق حلها ، بالإضافة إلى العديد من المزالق ، التي يوجد بها الكثير من SVGs. أضع هذا المقال كدليل مفصل.
لن يكون هناك أي مكونات إضافية أو مكتبات ، وما إلى ذلك ، سنتحدث فقط عن SVG الخالص.
الأداة الوحيدة التي سأستخدمها هي Adobe Illustrator.
مقدمة
بدأ كل شيء بمحاضرة مملة ، وعلى أمل الاستمتاع بنفسي بشيء على الأقل ، قررت دراسة رسومات SVG ، وهي الرسوم المتحركة. لدهشتي ، كان هناك القليل جدا من المعلومات على شبكة الإنترنت. في كل مكان ، كانت هناك معلومات مكررة تشرح الأساسيات ، ولكن حول الرسوم المتحركة بشكل عام من خلال قوة 2-3 روابط بمعلومات متطابقة تمامًا ، وهي ترجمة للمقالة A Guide to SVG Animations (SMIL) بقلم سارة سوزان.
يتحدث مقالها عن كل شيء ، ولكن بشكل سطحي. ومع ذلك ، أوصي بشدة أن تتعرف عليها. * رابط الترجمة *قضيت الأسابيع القليلة المقبلة في جمع المعلومات قطعة قطعة من مصادر مختلفة. نتيجة عمليات البحث هذه هي المقالة.
تصدير SVG الصحيح من Illustrator
يركز هذا القسم على ميزات ومشاكل Adobe Illustrator ، لذلك إذا كنت لا تستخدم Illustrator ، فيمكنك تخطي هذا الجزء.
يعد إعداد مستند للرسوم المتحركة مرحلة مهمة للغاية ، يمكن أن يؤدي إهمالها إلى عواقب غير سارة للغاية. لتعليمك كيفية الرسم بشكل أفضل في Illustrator ، لن أفعل. الشيء الوحيد الذي سأقوله هو أنه عند رسم الأشكال ، يجب عليك تتبع القيم ، فمن المستحسن أن يكون لها رقم واحد فقط بعد العلامة العشرية ، ومن الأفضل أن تكون عددًا صحيحًا. اتباع هذه القاعدة ليس ضروريًا ، ولكنه سيقلل من حجم الملف ، ويبسط المزيد من الرسوم المتحركة ويقلل بصريًا كمية المعلومات. نلقي نظرة
<path d="M 17.7 29 C 28.2 12.9 47 5.6 62.8 10.4 c 28.2 8.5 30 50.5 24.8 53.1 c -2.6 1.3 -10.4 -6.1 -29.2 -34.6"/> <path d="M 17.651 28.956 c 10.56 -16.04 29.351 -23.359 45.12 -18.589 c 28.151 8.516 29.957 50.5 24.841 53.063 c -2.631 1.318 -10.381 -6.148 -29.235 -34.643"/>
في المثال ، نفس المنحنى ، ولكن في الحالة الأولى ، رقم واحد بعد العلامة العشرية ، وفي الثلاثة الثانية. يحتوي هذا المنحنى على 4 نقاط فقط ، والمثال الثاني أطول بمقدار الثلث عن الأول. تخيل مقدار المساحة التي سيستغرقها منحنى 20 نقطة.
بعد رسم الإطار السلكي ، تحتاج إلى حفظ الصورة كملف SVG. هناك طريقتان للقيام بذلك - حفظ باسم أو تصدير باسم. ولكن أي طريقة للاختيار؟ إذا كنت تثق بي ، أفضل استخدام "حفظ باسم". إذا كنت تريد معرفة السبب ، فقم بنشر مفسد.
فلماذا؟للوهلة الأولى ، لا يوجد فرق ، لأنه في النهاية نحصل على ملف a.svg بصورتنا. ومع ذلك ، تبدأ الاختلافات في مرحلة إعدادات التصدير.
لا أرى أي نقطة في شرح جميع المعلمات بالتفصيل ، يقوم Illustrator بعملها جيدًا في قسم "الوصف".كما ترى ، فإن "حفظ" به إعدادات أكثر من "تصدير" ، وبالنسبة للبعض سيكون سببًا جيدًا لرفض التصدير ، لكننا سنستمر.
إذا فتحنا الملفات المحفوظة في كلا الاتجاهين في المتصفح ، فلن نلاحظ الفرق. ومع ذلك ، في الوقت الحالي ، نحن مهتمون أكثر ليس بالمظهر ، بل بالملء ، لذلك سنفعل نفس الشيء ، ولكن من خلال محرر نصوص. هنا سوف تصبح الاختلافات أكثر وضوحا. أقترح عليك أن تنظر بنفسك وتستخلص استنتاجات ، ولم أغير أي شيء في الملفات ، لقد قمت بنسخ الكل كما هو.
تصدير <svg id="_1" data-name=" 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51"> <defs> <style> .cls-1 { fill: none; stroke: #4ec931; stroke-miterlimit: 10; } .cls-2 { fill: #4ec931; } .cls-3 { fill: #fff; } </style> </defs> <title>my_icon_E</title> <circle class="cls-1" cx="25.5" cy="25.5" r="20"/> <circle class="cls-1" cx="25.5" cy="25.5" r="25"/> <g id="_2" data-name=" 2"> <circle class="cls-2" cx="25.5" cy="25.5" r="15"/> <polygon class="cls-3" points="25.5 34.8 34 20.3 17 20.3 25.5 34.8"/> </g> </svg>
احتفظ <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#4EC931;stroke-miterlimit:10;} .st1{fill:#4EC931;} .st2{fill:#FFFFFF;} </style> <circle class="st0" cx="50" cy="50" r="20"/> <circle class="st0" cx="50" cy="50" r="25"/> <g id="_2"> <circle class="st1" cx="50" cy="50" r="15"/> <polygon class="st2" points="50,59.3 58.5,44.8 41.5,44.8 "/> </g> </svg>
بالإضافة إلى الاختلافات في تسمية فئات CSS والتصميم بشكل عام ، والتي قد يعتبرها البعض جيدة ، هناك مشاكل أخرى. عند "تصدير" ، تم تقليل الصورة بأكملها بنسبة 2 مرات. يمكنك الحكم على هذا حسب حجم الأشكال
وسمة viewBox . نظرًا لأن هذا عبارة عن رسومات متجهة ، فإنها لم تزداد سوءًا ، لكنها لا تزال غير سارة. ترك "الحفظ" الأبعاد التي حددتها في Illustrator.
لكن كل هذه أزهار مقارنة بنوع الخنازير "المصدرة" التي يمكن وضعها. على وجه التحديد ، لا تعاني هذه الأمثلة من هذه المشكلة ، ربما لأن الصورة بسيطة جدًا. ومع ذلك ، واجهت ذلك عند تصدير أعمالي الأخرى. هنا قطة لها
حجم الملف كبير بما يكفي ، لذا سأقدم فقط الجزء المتعلق بالمشكلة
<g id="-21" data-name=""> <path class="cls-9" d="M477.94,456.75a1.83,1.83,0,0,1-.9,1.36l-4.91,3.1a7.29,7.29,0,0,1-7.5,0l-16.29-9.72a1.85,1.85,0,0,1-.92-1.56v-3.68a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l4.53-2.86.38-.23a1.87,1.87,0,0,0,.9-1.36Z" transform="translate(-5.5 -5.5)"/> <path class="cls-10" d="M477,451.19l-16.38-9.5a7.28,7.28,0,0,0-7.32,0l-5,2.9a1.88,1.88,0,0,0-.94,1.51v.17a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l4.53-2.86.38-.23a1.87,1.87,0,0,0,.9-1.36v-.51A1.88,1.88,0,0,0,477,451.19Z" transform="translate(-5.5 -5.5)"/> </g> <g id="-22" data-name=""> <path class="cls-9" d="M525.37,557.86a1.85,1.85,0,0,1-.9,1.36l-33.22,19.64a7.29,7.29,0,0,1-7.5,0l-16.29-9.72a1.85,1.85,0,0,1-.92-1.56v-3.68a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l32.84-19.41.38-.23a1.83,1.83,0,0,0,.9-1.36Z" transform="translate(-5.5 -5.5)"/> <path class="cls-10" d="M524.45,552.3l-16.38-9.51a7.31,7.31,0,0,0-7.32,0l-33.27,19.44a1.89,1.89,0,0,0-.94,1.51v.17a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l32.84-19.41.38-.23a1.83,1.83,0,0,0,.9-1.36v-.5A1.86,1.86,0,0,0,524.45,552.3Z" transform="translate(-5.5 -5.5)"/> </g>
لاحظت أي شيء غير عادي؟ إذا نظرت إلى ميزة
التحويل ، فأنت على حق. هو الذي يفسد التوت كله. عندما تقوم "بتصدير" صورة ، يعينها Illustrator إلى جميع عناصر
<path> . ومع ذلك ، لم يلاحظ مثل هذه المشكلة مع "الحفظ".
إذا كنت لا تزال لا تفهم سخطي ، فسأشرح لك: إذا كنت تريد تنشيط حركة هذا العنصر ، فسوف يتحول إلى الجانب. في هذه الحالة ، 5.5 على كلا المحورين. هذا يرجع إلى حقيقة أن الرسوم المتحركة للحركة تغير سمة
التحويل ، وتعيد كل القيم السابقة. بالطبع ، يمكن التحايل على ذلك ، لكن أليس من الأفضل تجنب المشكلة بدلاً من تصحيح عواقبها لاحقًا ...
في الوقت الحالي ، لاحظت هذه المشكلة فقط ، لكن هذا لا يعني أنها المشكلة الوحيدة. إذا قمت بتقييم الموقف بشكل معقول ، اتضح أن "الحفظ باسم" يفوز في كل شيء. هذا هو السبب في أنني أنصحك باستخدامه.
طرق استيراد مستند SVG إلى HTML
قبل أن أبدأ مباشرة مع الرسوم المتحركة ، أريد أن أتحدث عن كيفية تضمين SVG في الصفحة. كل طريقة لها "ميزات" خاصة بها لها تأثير مباشر على الرسوم المتحركة. وإذا لم تتحدث عنها ، فستكون المقالة غير كاملة.
افترض أن لديك بالفعل ملف SVG جاهز به رسوم متحركة تفاعلية ولا يزال يتعين تضمين هذا المستند على الموقع. كيف نفعل هذا؟
الخيار الأول هو أن تتذكر أن SVG هي أيضًا صورة ويمكن استيرادها باستخدام أدوات HTML القياسية. يمكنك إنشاء علامة
<img> مع رابط للمستند
<img src="Hello_SVG.svg" />
أو قم بتعيين SVG كصورة خلفية
#box { background-image: url("Hello_again.svg"); }
العيب الرئيسي لهذه الطريقة هو عزل الصورة. SVG كمعرض في المتحف - يمكنك مشاهدة ، لا لمسة. ستعمل الرسوم المتحركة بداخلها ، لكن لا يمكن الحديث عن أي تفاعل. على سبيل المثال ، إذا تم تشغيل رسم متحرك بنقرة مستخدم ، أو كانت هناك حاجة لتغيير محتويات مستند SVG ديناميكيًا ، فهذه الطريقة ليست لك.
الخيار الثاني هو إنشاء كائن من SVG باستخدام العلامات
<object> أو
<embed> . من الممكن أيضًا استخدام
<iframe> لإنشاء إطار ، لكنني لا أوصي باستخدام هذه الطريقة ، لأن مطلوب
عكاز لجميع المتصفحات بحيث يتم عرض هذا الخيار بشكل صحيح
<object data="My_SVG.svg" type="image/svg+xml"></object> <embed src="My_SVG.svg" type="image/svg+xml" /> <iframe src="My_SVG.svg"></iframe>
هنا الأمور أفضل. تحصل الرسوم المتحركة على فرصة لتكون تفاعلية ، ولكن فقط إذا تم الإعلان عنها داخل مستند SVG ، وكان المحتوى متاحًا لجافا سكريبت خارجي. لا يزال بإمكان
<object> و
<iframe> إظهار كعب روتين إذا لم يتم تحميل الصورة فجأة.
الخيار الثالث هو ببساطة لصق محتويات مستند SVG مباشرة في HTML. نعم تستطيع. ظهر دعم SVG في
معيار HTML5 . نظرًا لأن SVG جزء أساسي من الصفحة نفسها ، فإن الوصول إليها في كل مكان. يمكن الإعلان عن الرسوم المتحركة وأنماط العناصر داخل SVG وفي الملفات الخارجية. الجانب السلبي هو أن هذه الصور فقط لا تخبأ بشكل منفصل عن الصفحة
<body> ... <svg> </svg> </body>
SVG الرسوم المتحركة
هناك طريقتان رئيسيتان لتحريك عنصر SVG:
- المغلق الرسوم المتحركة
- SMIL animated مضمن في SVG (في الواقع ، هي رسوم متحركة لـ SVG تستند إلى SMIL وتوسع من وظائفها)
أنا شخصياً أفصلهم كرسوم متحركة "خارجية" و "داخلية". هذا التقسيم مشروط ، لكن لا يزال لديهم اختلافات وظيفية. إذا تحدثنا عن الاختلافات بشكل عام: CSS - لديه دعم أفضل للمتصفحات ؛ SMIL - لديه وظائف رائعة. من الصعب تحديد أيهما أفضل للاستخدام بسبب هم كثيرون على حد سواء. يعتمد الاختيار على المهمة ، لذلك سأقول فقط الأسباب الرئيسية لاستخدام SMIL بدلاً من CSS
سميل - عند الحاجة:
- ما لم يتمكن CSS من القيام به (تنشيط سمة غير مدعومة ، وما إلى ذلك)
- احصل على تحكم أكثر دقة في الرسوم المتحركة.
- جعل المسار يتحول (الرسوم المتحركة للسمة د في علامة المسار )
- مزامنة الرسوم المتحركة
- جعل الرسوم المتحركة التفاعلية
إذا كتبت أنه يجب استخدام SMIL للرسوم المتحركة التفاعلية ، فهذا لا يعني أنه لا يمكن إجراء نفس الشيء مع CSS. ببساطة SMIL هي أداة أكثر وظيفية ومتطورة. وهذا هو السبب في أنه ينبغي استخدامه فقط عند الضرورة. إذا كانت الرسوم المتحركة بسيطة ويمكن الاستغناء عنها ، فيجب القيام بذلك.
المغلق الرسوم المتحركة
لا جديد هنا يمكننا تحريك أي عنصر SVG بنفس الطريقة التي نفعل بها مع HTML. يتم إنشاء جميع الرسوم المتحركة باستخدام
@ إطارات مفتاحية . نظرًا لأن موضوع CSS للرسوم المتحركة هو موضوع آخر ، فلن أتناول بالتفصيل هذه النقطة ، فالشبكة مليئة بالوثائق والأدلة المتعلقة بهذا الموضوع. ينطبق كل شيء موصوف هناك على SVG ، لكنني سأقدم بعض الأمثلة فقط.
يحتوي مستند SVG على أوراق أنماط داخلية ، لذلك سنقوم بكتابة الرسوم المتحركة فيها
<svg> <style> </style> </svg>
يعد تنشيط سمة SVG بسيطًا مثل سمات CSS
@keyframes reduce_radius { from { r: 10; } to { r: 3; } } @keyframes change_fill { 0% { fill: #49549E; } 75% { fill: #1bceb1; } 100% { fill: #1bce4f; } }
يمكنك تحديد القيم كنسبة مئوية ، ومن - إلى البناءثم يبقى فقط تطبيق الرسوم المتحركة التي تم إنشاؤها على العنصر المطلوب
.circle { animation: change_fill 1s, popup 2s; }
كل ما وصفته أعلاه هو رسوم متحركة ثابتة ، ولا توجد رائحة للتفاعل هناك. ولكن ماذا لو كنت تريد حقا؟ حسنًا ، لا يزال من الممكن القيام بشيء ما بشكل تفاعلي وفي CSS. على سبيل المثال ، إذا كنت تستخدم
الانتقال بالاقتران مع
فئة الزائفة
التحويم .circle { fill: #49549E; transition: .3s; } .circle:hover { fill: #1bceb1; }
عندما تحوم فوق عنصر ما ، فسيغير لونه من الأزرق إلى الأزرق لمدة 300 مللي ثانيةالرسوم المتحركة للسمات وقطعة صغيرة من التفاعل - حيث تنتهي ميزات الرسوم المتحركة لـ CSS. لكن هذه الوظيفة كافية ، لأن معظم المهام تعود إلى تنشيط بعض السمات. تقريبا أي سمة SVG يمكن أن تكون متحركة. وعندما أكتب "أي شيء تقريبًا" ، أعني أنه إذا اخترت سمة عشوائية واتضح أنها غير ثابتة ، فأنت محظوظ جدًا.
SMIL الرسوم المتحركة
يجدر القول على الفور أن SMIL animé قديمة قدم العالم وتلاشى ، ودعم المتصفح لائق ، لكنه لا يزال أقل من CSS Animation ، ولكن هناك سبب يظل SMIL جذابًا - يمكن أن يكون بسبب CSS لا.
سأتحدث أكثر عن SMIL ، لأن هناك العديد من المزالق التي نادراً ما يكتبون عنها. وهذا الموضوع أقل شعبية من CSS. العلامات الرئيسية للرسوم المتحركة هي
<تحريك> ،
<مجموعة> ،
<تحضير تحويل> ،
<تحفة> .
<تحريك>
لنبدأ بالمدفعية الثقيلة.
<تحريك> - تستخدم لتحريك أي سمة وهي الأداة الرئيسية. العلامات المتبقية هي متخصصة للغاية ، ولكن أول الأشياء أولاً.
كيفية تطبيق الرسوم المتحركة على عنصر؟هناك طريقتان لتحديد العنصر الذي سيتم تطبيق الرسوم المتحركة عليه.
- ضع العلامة داخل العنصر. تسمح لك هذه الطريقة بتغليف الرسوم المتحركة داخل الكائن ، مما يسهل عليك قراءة الكود
<circle ...> <animate .../> </circle>
في هذه الحالة ، سيتم تطبيق الرسوم المتحركة على عنصر الدائرة . - تمرير الرابط إلى هذا البند. مفيد إذا كنت ترغب في جمع كل الرسوم المتحركة في مكان واحد
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="blue" .../> ... <animate xlink:href="#blue" .../> </svg>
يتم استخدام سمة xlink: href هنا ، والتي نحدد فيها معرف العنصر الذي يجب أن تسري عليه الرسوم المتحركة. لكي تعمل هذه الطريقة ، يجب عليك تحديد مساحة اسم xlink . يتم ذلك في علامة <svg>.
مع SVG 2 ، يتم إهمال سمة
xlink: href ، توصي المواصفات باستخدام
href بدلاً من ذلك ، والذي لا يتطلب مساحة اسم
xlink .
<circle id="blue" .../> ... <animate href="#blue" .../>
ولكن هنا ، ليس كل شيء سلسًا - لا
يتم دعم
href بواسطة Safari. اتضح موقف الجمود ، سمة واحدة عفا عليها الزمن ، والآخر غير معتمد جزئيا. فما طريقة الاستخدام ، والجميع يقرر لنفسه.
بالنسبة لأولئك الذين لاحظوا أوجه التشابه مع محددات CSS: أنا آسف لخيبة الأمل ، لن أتمكن من الوصول إلى العناصر حسب الفصل
<circle class="blue_circle" .../> <animate href=".blue_circle" .../>
هذا لا يعمل!كيفية تحديد سمة للرسوم المتحركة؟هناك
attributeName لهذا. القيمة هي اسم السمة التي سنقوم بتنشيطها.
<circle r="25" ...> <animate attributeName="r" ... /> </circle>
من خلال تحديد r في attributeName ، نبلغ عن أننا سنقوم بتنشيط نصف قطر الدائرةما هو السمة المميزة ولماذا لا تحتاجها؟لأنه عديم الفائدةمن الناحية النظرية ، قد تنشأ لحظة عندما تتطابق أسماء السمات في CSS و XML ، مما قد يؤدي إلى مشاكل. ولحل هذا التعارض ، يجب تحديد مساحة اسم بشكل صريح. توجد
كراسي ثنائية الاتجاه: حدد بادئة أو استخدم
attributeType . لنبدأ بالبادئة.
في كل مكان يكتبون شيئا مثل التالي:
يمكنك تحديد بادئة XMLNS لسمة لتحديد مساحة الاسم الخاصة بها بشكل صريح
وذكر هذا الأسلوب في تمرير ودون أمثلة. لذلك لن أغير التقاليد. (أنصحك بالتوقف هنا ، ونسيان البادئات باعتبارها كابوسًا وانتقل إلى
سمة) ، لقد حذرتك)
"أنا مازوشي"محتوى هذا المفسد هو بالأحرى مسلية واستكشافية في الطبيعة. لا توجد معلومات مفيدة ، بخلاف حقيقة أن البادئات لا تعمل ، فلن تجد هناتحتاج أولاً إلى العثور على تعريف أكثر دقة ، وكما تعلم ، فإن التعريفات الأكثر دقة في المواصفات والمعايير.
تقرأ ترجمة التعريف كما يلي:
يحدد اسم السمة الهدف. يمكن استخدام بادئة XMLNS لتحديد مساحة اسم XML لسمة. سيتم تفسير البادئة في نطاق عنصر الرسوم المتحركة. "
حسنًا ، لم يكن الأمر أسهل. ما الذي يتبادر إلى الذهن الشخص الذي لا يعرف XML بعد قراءة هذا التعريف؟ هذا صحيح. نفس مثلي.
أخذتها حرفيا واعتقدت أنه ينبغي أن يبدو مثل هذا
<animate attributeName="xmlns:* *"/>
فكرت ونسيت بأمان هذه الطريقة قبل كتابة هذا المقال. بدأت المشاكل عندما قررت اختباره في الممارسة العملية. أعتقد أنني لن أدهش أي شخص إذا قلت إن هذا لا يعمل. بعد عدة ساعات من عمليات البحث الفاشلة ، غوغل "بادئة xmlns" ، وللمفاجأة ، رأيت أن xmlns ليست هي البادئة نفسها ، ولكن
(التركيز ، سيكون من الصعب الآن) تصميم مساحة الاسم بالبادئات .
يبدو كما يلي:
<** xmlns:**="* url *" ...>
ثم أدركت أنني لم أفهم أي شيء ... في البداية ... والآن ، من حيث المبدأ ، أيضًابعد بضع ساعات ، وجدت أخيرًا ما كنت أبحث عنه في
مساحات الأسماء في XML . هنا مثال أصلي:
<x xmlns:n1="http://www.w3.org" xmlns="http://www.w3.org" > <good a="1" n1:a="2" /> </x>
ولكن أنت تعرف ما هو أطرف شيء؟ لا يزال لا يعمل. على الرغم من أن كل شيء يتم وفقًا للكتاب
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:n1="http://www.w3.org/2000/svg"> <circle id="www" n1:r="10" .../> <animate href="#www" attributeName="n1:r" .../> </svg>
لا توجد أخطاء ويجب ألا تكون كذلك ، لأن كل شيء يتم وفقًا للقواعد ، لكن المشكلة هي أن نحصل على دائرة بدون دائرة نصف قطرها. ستكون النتيجة نفسها إذا لم تكتب ببساطة سمة
r .
Epilogue : يتجاهل SVG السمات السابقة. نتيجةً لذلك ، حتى إذا قام SMIL بتنشيط السمة باستخدام بادئة ، فلن ترى نتيجة هذه الرسوم المتحركة.
في دفاعي ، سأقول أنني تعاملت فقط مع SVG ، وبالتحديد مع الرسوم المتحركة الخاصة بها ، وبالتالي فإن معلم XML سوف يضع المشاعل ومضمار النيران جانباً. إذا كنت تعرف كيفية جعل هذه الطريقة تعمل ، نرحب بالتعليقات للإشارة بوضوح إلى ما تنتمي إليه السمة المتحركة ، يتم استخدام attributeType. يستغرق 3 قيم:
CSS ،
XML ،
تلقائي . ما لم
يتم تحديد
attributeType بشكل صريح ، سيتم استخدام
auto . في هذه الحالة ، يتم فحص خصائص CSS أولاً ، وفي حالة عدم وجود تطابقات ، يتم التحقق من سمات العنصر الهدف. في المثال ، نشير إلى أننا سنقوم بتحريك خاصية CSS بالضبط
<animate attributeType="CSS" attributeName="opacity" .../>
حسنًا ، يسمح لك
attributeType بسهولة وبدون عكازات للإشارة إلى ما تنتمي إليه السمة المتحركة ، وبالتالي حل "المشكلة" ، التي لا وجود لها حتى.
بشكل غير متوقع ، أليس كذلك؟ كما قلت في بداية الفصل - SMIL تموت وهذا يرجع إلى حقيقة أن الرسوم المتحركة يتم نقلها إلى سكك CSS. معظم الصفات المكررة متطابقة تمامًا مع بعضها البعض ، أي لا يهم إذا كانت سمة CSS أو SMIL تنتمي - ستكون النتيجة هي نفسها. وبالاقتران مع القيمة
التلقائية التلقائية ، لم تعد هناك حاجة إلى تحديد
سمة سمة بشكل صريح.
لحظة من الحقائق المثيرة للاهتمام: لا يدعم SVG سمات التصميم. من أين أتى؟ لقد جاء إلينا من SMIL Animation ، التي تستند إليها SVG animation. وأيضًا تمت إزالة attributeType بعد الإصدار SVG 1.1 Second Edition. كل البراهين هناكيفية تحديد قيم الرسوم المتحركة؟لا يكفي تحديد سمة للرسوم المتحركة ؛ يجب عليك تحديد قيمها. هنا يأتي
من ،
إلى ، من
خلال القيم .
لنبدأ مع زوجين دائما:
من وإلى. معنى وجودهم واضح ،
من البداية
إلى النهاية
<circle r="25" ...> <animate attributeName="r" from="10" to="45" .../> </circle>
ستكون نتيجة الحركة عبارة عن تغيير سلس في نصف قطر الدائرة من 10 إلى 45على الرغم من أنني قلت إنهم دائمًا معًا ، يمكن استخدامها أيضًا دون الإعلان صراحةً
عن . في هذه الحالة ، سيأخذ من القيمة المحددة في العنصر الهدف. على سبيل المثال أعلاه ، ستبدأ الرسوم المتحركة في الساعة 25.
إذا كانت هناك حاجة لتحديد مجموعة من القيم المتعددة ، يتم استخدام القيم. يتم سرد القيم بفاصلة منقوطة.
<circle r="25" ...> <animate attributeName="r" values="15;50;25" .../> </circle>
تنخفض قيمة نصف القطر إلى 15 ، ثم تزيد إلى 50 ثم تعود إلى موضعها الأصلي.آخر في خط من
قبل . إنه لا يهتم "أين" و "أين" ، وكل ما يهمه هو "كم". بمعنى آخر ، بدلاً من القيم المطلقة ، تعمل مع نسبي
<circle r="25" ...> <animate attributeName="r" by="15" .../> </circle>
كنتيجة للرسوم المتحركة ، سيزيد نصف القطر بمقدار 15 ، أي الحصول على 25 + 15 = 40تدور الأسطورة حول مساحات الكتيبات
" التي يمكن استخدامها للإشارة إلى مقدار تقدم الرسوم المتحركة" . أفهمها بهذه الطريقة: إذا كان
من = 20 ،
إلى = 50 ، وأعطيت
= 10 ، فيجب التغلب على هذا المسار من خلال "القفز" في 10 ، أي 20 ، 30 ، 40 ، 50. ولكن بغض النظر عن الطريقة التي جربتها ، مع وبدون ذلك ، لم تتغير الرسوم المتحركة قليلاً. أيضا ، لم أجد تأكيدا في المواصفات. يبدو أنه مجرد خطأ.
القيم لها أولوية قصوى ، ثم
من -
إلى ، تدوم. أدنى أولوية من
خلال شرح لماذا "الأسطورة" لا يمكن أن تعمل من حيث المبدأ. ومع ذلك ، من
خلال العمل بالتزامن مع
من ، في هذه الحالة ،
من مجرد يتجاوز الموضع الحالي للعنصر
<circle cy="50" ...> <animate attributeName="cy" from="70" by="30" .../> </circle>
هنا الرسوم المتحركة بدلاً من 50 تبدأ من 70 وتنتهي في 100المزيد عن الرسوم المتحركة النسبيةيمكنك جعل السمات الأخرى تعمل كما هي. يتم ذلك باستخدام السمة
المضافة ، والتي لها موقعان -
استبدال وجمع.
الأول هو الافتراضي ، لذلك نحن مهتمون بالثاني. مع قيمة المجموع ، ستتم إضافة جميع السمات إلى القيمة الحالية للعنصر الهدف ، أي عند تنشيط دائرة نصف قطرها 20 بتكوين القيم = 5 وإلى = 15 ، ستكون الرسوم المتحركة من 20 + 5 إلى 20 + 15 <circle r="20" ...> <animate attributeName="r" from="5" to="15" additive="sum" .../> </circle>
عند تنفيذ الرسوم المتحركة ، سيكون هناك قفزة حادة في الموضع 25 ، وهو أمر غير جيد (ما لم يكن المقصود بالطبع). يمكن تجنب ذلك باستخدام النموذج = 0 ، ولكن بعد ذلك يتم فقد معنى استخدام المبلغ ، لأنه يمكن الحصول على التأثير نفسه دون استخدام مادة مضافة بواسطة <animate attributeName="r" from="0" to="15" additive="sum" .../> <animate attributeName="r" by="15" .../>
بالنسبة لي ، الطريقة الثانية مفهومة وملائمة أكثر من أي مكان ،أين يمكنني تحديد مدة الرسوم المتحركة؟يتم ترك آخر سمة مطلوبة لعمل الرسوم المتحركة - وهذا أمر دائم . تحدد قيمة السمة مدة الحركة ، والتي يمكن تحديدها بالثواني وبالمللي ثانية <animate dur="0.5s" .../> <animate dur="500ms" .../> <animate dur="00:00:00.5" .../>
من السطر الأخير ، يمكنك تخمين وجود شيء آخر ...يمكنك أيضًا الإشارة إلى القيم بالدقائق والساعات <animate dur="1.2min" .../> <animate dur="0.02h" .../>
, , , , ..., ?fill ( ) . :
هل من الممكن حلقة الرسوم المتحركة؟الجواب نعم. للقيام بذلك ، تحدد السمة تكرار قيمة غير محددة . تحدد السمة عدد مرات تكرار الرسوم المتحركة والإعدادات الافتراضية إلى 1 ، ولكن يمكنك تحديد أي رقم <animate repeatCount="indefinite" .../> <animate repeatCount="3" .../>
الأول سيتكرر إلى ما لا نهاية ، والثاني سيعمل 3 مرات ،الآن الرسوم المتحركة التي لا نهاية لها تغضبني ، هل يمكنني إيقافها بعد فترة؟لمثل هؤلاء الناس مزعج فعل تكرار . توقف هذه السمة الرسوم المتحركة بعد وقت معين من بداية الحركة! ببساطة ، كرر دور يحد من مدة الرسوم المتحركة. الفارق الرئيسي من تكرار الحساب هو أنه يمكن إيقاف الرسوم المتحركة في المنتصف <animate dur="2s" repeatCount="indefinite" repeatDur="3s" .../>
, ?, ,
begin . , . , , .
, ,
<animate begin="1.5s" .../>
1,5. , ,
<animate begin="-2s" dur="4s" .../>
,begin , , «on». , , «onclick»
click <circle ...> <animate begin="click" .../> </circle>
, . ,
id <circle id="button" .../> ... <animate begin="button.click" .../>
.
<animate begin="click; 0s" .../>
ستبدأ الرسوم المتحركة عندما يتم تحميل المستند والنقر، ولا يتم دعم جميع الأحداث ، لكن معظم الأحداث المتعلقة بالماوس تعمل. لن أدرجها جميعًا ، يمكن العثور على الأحداث المتاحة في مكان ما هنا . أيضا ، لا أحد ألغى طريقة بدس العلمية.يتم إعادة تشغيل الرسوم المتحركة دون الوصول إلى النهاية ، كيف يمكنني إصلاحها؟سأقدم مثال بسيط. هنا تبدأ الرسوم المتحركة بالنقر. إذا كان المستخدم لا يزال لا يضغط ، يتم توفير التشغيل التلقائي في 3 ثوان <animate begin="click; 3s" dur="7s" .../>
ولكن هناك مشكلة: إذا ضغط المستخدم قبل الموقت التلقائي ، فعند انقضاء 3 ثوانٍ ، سيتم إعادة تشغيل الحركة ولن تصل إلى النهاية. سمة إعادة التشغيل في القيمة عندما يأتي NotActive إلى الإنقاذ . في المجموع ، لديه ثلاثة منهم- always –
- whenNotActive – ,
- never –
<animate begin="click; 3s" dur="7s" restart="whenNotActive" .../>
, ,, , , , . , ,
id begin ,
end ,
repeat <animate id="pop" begin="click" .../> <animate begin="pop.begin" .../> <animate begin="pop.end" .../>
إذا كان كل شيء واضحًا مع الأولين ، فكل شيء غير واضح تمامًا. عدد التكرار مكتوب بين قوسين ، وبعد ذلك تحتاج إلى بدء الرسوم المتحركة (لا يمكن أن يكون هذا الرقم هو التكرار الأخير) <animate id="flip" repeatCount="5" .../> <animate begin="flip.repeat(2)" .../>
ستبدأ الرسوم المتحركة بعد تكرارين ، وليس كل تكرار 2.يمكنك أيضًا تحديد تأخير بالنسبة للحدث. على سبيل المثال ، إذا كنت أرغب في تشغيل الرسوم المتحركة بعد ثانيتين من بدء آخر <animate id="another" .../> <animate begin="another.begin + 2s" .../>
أو ابدأ في تشغيل الرسوم المتحركة ثانية قبل نهاية أخرى <animate begin="another.end - 1s" .../>
ماذا يمكن أن يبدأ ...أردت أن أسمي هذا القسم ، لكن من الأصح أن أسميها "ماذا يجب أن يكون قادرًا على ذلك ، لكن ليس قادرًا على ذلك؟". وفقًا لمواصفاتي المفضلة ، يجب أن تحتوي البداية على قيمتين إضافيتين يجب أن تأخذهما. الأول هو accessKey ، الذي يبدأ الرسوم المتحركة عن طريق الضغط على المفتاح المحدد في تنسيق Unicode. والثاني هو wallclock ، الذي يحدد بداية الرسوم المتحركة في الوقت الحقيقي. وهناك يمكنك تحديد ليس فقط الساعة ، ولكن حتى الشهر والسنة ، بشكل عام ، مجموعة كاملة.لسوء الحظ ، لم يرغب أي منهم في العمل. على الرغم من أن الخسارة ليست كبيرة ، لأن الحاجة إليها لا تزال مشكوك فيها <animate begin="accessKey(\u0077)" .../> <animate begin="wallclock(2019-04-09T19:56:00.0Z);" .../>
لا أعرف ما هي المشكلة ، ربما لا يدعمها المتصفح الخاص بي ، أو ربما شيء آخر ...هل يمكنني مقاطعة الرسوم المتحركة؟ويمكن القيام بذلك مع السمة النهاية . في استخدامه ، إنه مطابق للبدء ، يمكنك أيضًا تحديد الوقت والأحداث ، إلخ. كما ترون ، ليست هذه هي الطريقة الأولى (وليس الأخيرة) لمقاطعة الرسوم المتحركة ، لأنه يوجد تكرار ، حيث يمكنك أيضًا تحديد مدة الرسوم المتحركة. وعلىالرغم من أنه يمكنك أيضًا تحديد الوقت مباشرةفي النهاية ، إلا أن ميزاته المميزة هي ربط الحدث والقدرة على تحديد قائمة بالقيم.لنفترض أن لدينا عنصرًا لديه حالة من الراحة والنشاط. يتم تنشيط الثانية عند النقر عليها. ونريد أن نقطع بقية الرسوم المتحركة مع بداية النشاط. يمكنك تنفيذ فكرة مماثلة من هذا القبيل <animate id="idle" end="action.begin" begin="0s" repeatCount="indefinite" .../> <animate id="action" begin="click" .../>
.end begin,
begin ,
end , , , . , , … ? .
, – .
begin -
endيعرف واحد "التكرار". والوقت بين نهاية "التكرار" واحد وبداية المقبل يحدد التأخير. أنا أسميها "التكرار" لسبب ما ، الرسوم المتحركة لا تتوقف وتستمر ، ولكنها تنقطع وتبدأ من البداية. اتضح أنه يمكننا ضبط مدة كل تكرار على حدة وتعيين تأخير مختلف بعد كل تكرار <animate dur="3s" begin="1s; 5s; 9s" end = "2s; 8s; 11s" .../>
3 «». . 3 , 3 . , 1 .- ?, –
min max . ,
min ,
max .
dur ,
repeatCount ,
repeatDur ,
النهاية . وبعد ذلك ، يتم ضبط المدة التي تم الحصول عليها على الإطارات المحددة بواسطة min و max . كل شيء جميل على الورق ، دعنا نرى كيف يعمل في الممارسة.مع max ، كل شيء بسيط ، هذه سمة أخرى تحدد الحد الأعلى. إذا كانت المدة المحسوبة أقل من الحد الأقصى ، فسيتم تجاهله ، وإذا كانت أطول ، فإن مدة الحركة تصبح مساوية للحد الأقصى <animate dur="10s" repeatDur="7s" end="5s" max="4s" .../>
سيتم مقاطعة لمدة 4 ثوان ،ولكنكان دقيقة أقل حظا. إذا كانت مدة الرسوم المتحركة المحسوبة أطول من دقيقة ، فسيتم تجاهله وهو منطقي. ومع ذلك ، إذا كانت المدة المحسوبة أقل من دقيقة ، فسيتم تجاهلها أحيانًا ، وأحيانًا لا يتم تجاهلها.لماذا لماذا؟ هذه اللحظة سهلة للغاية للتشويش ، لذا اقرأ بعناية.لدينا خياران عندما تكون المدة المحسوبة أقل من دقيقة :- لأن الرسوم المتحركة نفسها قد انتهت ، أي dur * repeatCount < دقيقة
<animate dur="2s" repeatCount="2" min="5s" .../>
في هذا الخيار ، يتم تجاهل سمة min ببساطة ، ستتوقف الرسوم المتحركة في الثانية الرابعة - repeatDur end .
- , , .
max min , .
?keyTimes ,
keySplines ,
calcMode .
values , , .
keyTimes . , , . , (0 – 0%; 0,5 – 50%; 1 – 100%).
: 0 1, - , 0, 1, . , ,
keyTimes values .
<animate values="15; 10; 45; 55; 50" keyTimes="0; 0.1; 0.6; 0.9; 1" .../>
بشكل افتراضي ، تحدث جميع التحويلات خطيًا ، لتغيير هذا ، تحتاج إلى تحديد وضع مختلف في calcMode . وليس هناك العديد من الخيارات:- قيمة خطية - قياسية ، لا حاجة إلى شرح
- الايقاع - تحسب فترات زمنية بحيث السرعة بين الإطارات الأساسية هي ثابت
- منفصلة - التبديل بين الرسوم المتحركة الإطارات الرئيسية في القفزات ، دون الاستيفاء
- المفتاح - يمكننا القول أن هذا هو وضع التحكم اليدوي (حوله لاحقًا)
لسوء الحظ ، هذه كلها وظائف مضمنة ، هنا لن تجد سهولة في الإدخال / الإخراج كما في CSS. لذلك يجب أن تفي هذه الاحتياجات بالنظام ، الذي أسميه "يدوي".الأكثر صعوبة في فهم - انها الخطى ، لذلك سوف أشرح بمزيد من التفصيل. للبدء ، راجع كيف تعمل الرسوم المتحركة في الوضع القياسي. تستمر الرسوم المتحركة لمدة ثانيتين ولدينا 3 إطارات رئيسية - أولية ومتوسطة ونهائية <animate dur="2s" values="100; 200; 150" .../>
, , . 100, – 50, .. . , , .
calcMode="paced" , .
<animate dur="2s" values="100; 200; 150" calcMode="paced" .../>
. , , – .
spline keySplines . ……
إذا عرّف spline الوضع اليدوي ، فإن السمة keySplines تحدد قيم هذا الوضع. من الواضح ، واحد لا يعمل دون الآخر. يتم تعيين القيم في keySplines بواسطة قائمة حيث يشار إلى إحداثيات نقطتين لبيزيير مكعب.أكثر على بيزير مكعب وظيفة, . 4 0 1 : cubic-bezier(x1, y1, x2, y2). , .
cubic-bezier .
, .
يجب أن يكون عدد القيم في keySplines 1 أقل من القيم . هذا يرجع إلى حقيقة أننا نشير القيم ليس للإطارات الرئيسية ، ولكن لفترات بينهما. <animate values="100; 200; 150" keySplines=".25 .1 .25 1; 0 0 .58 1" calcMode="spline" .../>
,– , .
–
from -
to by , :
keyTimes "0; 1" <animate from="10" to="50" keyTimes="0; 1" keySplines=".25 .1 .25 1;" calcMode="spline" .../>
from - to values ,?– , . , … , .
, :
accumulate (
none )
sum <animate by="100" repeatCount="3" accumulate="sum".../>
,
values from -
to , , ,
additive="sum" .
accumulate to .
, , . , - .
–
d path , . SMIL.
تشير القيم إلى قائمة قيم السمة d التي يمر خلالها العنصر. يمكنك أيضًا استخدام من - إلى . بشكل عام ، فإن الشكل المخطط يشبه هذا <animate attributeName="d" values=" 1; 2; ..." .../>
:
–
d , . , ( «» ). , « », «», - , .. (
).
,
,
. , – ,
calcMode = "منفصلة" . للوهلة الأولى ، ليس شيئًا معقدًا ، وهذا هو الحال إذا كنت ستحرك الأشكال بدون منحنيات. إذا لم يكن كذلك ، ثم تبدأ الصعوبات.عند إنشاء رسومات معقدة ، يستخدم الجميع برامج تحرير متجه ، ولديهم عادة تحسين "الرمز" قدر الإمكان. هذا عادة ما يكون زائد ، ولكن ليس في حالتنا. في المخرجات ، قد يكون لدينا قائمة ذات طول واحد ، ولكن مع فرق من أنواع مختلفة ، وهذا انتهاك لأحد القواعد. استخدمت Adobe Illustrator ولم أجد خيارًا يمكنه إصلاح الأشياء. في بعض الأحيان ، بإرادة آلهة dizign ، هذه المشكلة غائبة. ولكن على محمل الجد ، فإن احتمال وجود مشكلة يتناسب طرديا مع تعقيد الشكل والتحول.في الوقت الحالي ، فإن الحل الوحيد للمشكلة هو تحويل "الشفرة الملتوية" في تطبيق ويب Shape Shifter . هذا هو الخيار الذي أستخدمه. بالإضافة إلى إصلاح الشفرة التالفة ، يتيح لك Shape Shifter رؤية النتيجة وإضافة نوع آخر من الرسوم المتحركة اختيارياً وتصدير النتيجة بتنسيق مناسب.التالي سيكون تعليميًا خطوة بخطوة ، حيث سأخبرك بكيفية إنشاء مثل هذه الرسوم المتحركة الجميلة
علمني: SVG Adobe Illustrator, , Shape Shifter . CSS, SMIL .
. Illustrator. , . 200x200 .
, , . , , «». ,
. . « »
, . , , ,
. , , . , . SVG , . …
. , . SVG . ( Illustrator )
, , Illustrator
<path> ,
<circle> . , . , , . - (
SVGO ), . .
d , ) <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st0{fill:#D38911;} .st1{fill:#87872B;} .st2{fill:#CEB629;} .st3{fill:none;stroke:#DD913E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12,200;} </style> <g id="Pulse"> <g> <path class="st0" d="M100,87c44.1,0,80,35.9,80,80s-35.9,80-80,80s-80-35.9-80-80S55.9,87,100,87 M100,82c-46.9,0-85,38.1-85,85 s38.1,85,85,85s85-38.1,85-85S146.9,82,100,82L100,82z"/> </g> </g> <g id="_x3F__1_"> <path id="side" class="st1" d=" "/> <path id="front" class="st2" d=" "/> </g> <g id="Particles"> <line class="st3" x1="80" y1="162.9" x2="42" y2="59.1"/> <line class="st3" x1="90.1" y1="148.8" x2="59.8" y2="28.8"/> <line class="st3" x1="107.9" y1="155.6" x2="124.9" y2="15.9"/> <line class="st3" x1="94.4" y1="160.4" x2="154.3" y2="7.2"/> <line class="st3" x1="119.3" y1="157" x2="159.2" y2="75.5"/> <line class="st3" x1="98" y1="169" x2="87.7" y2="10.7"/> <line class="st3" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> </g> </svg>
<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style type="text/css"> #Pulse{fill: none; stroke: #D38911; stroke-width: 5;} #side{fill:#87872B;} #front{fill:#CEB629;} .particles{fill:none;stroke:#DD913E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12,200;} </style> <circle id="Pulse" cx="100" cy="167" r="85"/> <g id="Sign"> <path id="side" d=" "/> <path id="front" d=" "/> </g> <g id="Particles"> <line class="particles" x1="80" y1="162.9" x2="42" y2="59.1"/> <line class="particles" x1="90.1" y1="148.8" x2="59.8" y2="28.8"/> <line class="particles" x1="107.9" y1="155.6" x2="124.9" y2="15.9"/> <line class="particles" x1="94.4" y1="160.4" x2="154.3" y2="7.2"/> <line class="particles" x1="119.3" y1="157" x2="159.2" y2="75.5"/> <line class="particles" x1="98" y1="169" x2="87.7" y2="10.7"/> <line class="particles" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> </g> </svg>
, . , ,CSS , . . , . . CSS . :
#Pulse{fill: none; stroke: #D38911; stroke-width: 5; transform: rotateX(80deg);} ._transformer{transform-box: fill-box; transform-origin: center;}
,
_transformer , , . «»
<animateTransform> .
- :
, Illustrator? …– , . , . ,
<path> , .
, ! – , . , – .
circle , .
animate , 3
<circle id="Pulse" class="_transformer" cx="100" cy="167" r="0"> <animate id="doPulse" attributeName="r" values="0;85;" dur=".8s" begin="Sign.click" calcMode="spline" keySplines="0,0,.58,1"/> <animate attributeName="stroke-width" values="5;12;" dur=".8s" begin="doPulse.begin"/> <animate attributeName="opacity" values="0.5;1;1;0" keyTimes="0;0.2;0.5;1" dur=".8s" begin="doPulse.begin"/> </circle>
, CSS, . : , , . - :
. - , . ,
<linearGradient id="light-gradient"> <stop offset="0%" stop-color="#ffffff00"/> <stop offset="10%" stop-color="#FFF"/> <stop offset="90%" stop-color="#FFF"/> <stop offset="100%" stop-color="#ffffff00"/> </linearGradient> <mask id="light-mask"> <rect y="0" x="90" class="_transformer" width="20" height="220" fill="url(#light-gradient)" /> </mask>
, . , , . ,
<use> ,
<path> <defs> <defs> <path id="question" d=" "/> </defs> ... <use id="front" href="#question"/> <use id="light" href="#question" mask="url(#light-mask)"/>
, , . . ,
#light-mask rect{ animation: highlight 4s infinite; } @keyframes highlight { 0% { transform: translate(-100px,0) rotate(-50deg); } 30% { transform: translate(100px,0) rotate(-50deg); } 100% { transform: translate(100px,0) rotate(-50deg); } }
. . CSS , SMIL.
, . — , . ,
<g id="Sign" class="_transformer"> <path id="side" d=" "/> <use id="front" href="#question"/> <use id="light" href="#question" mask="url(#light-mask)"/> <animateTransform id="idle" attributeName="transform" type="translate" values="0,0;0,-5;0,0" dur="6s" begin="0s; jump.end" end="click" repeatCount="indefinite" /> <animateTransform id="jump" attributeName="transform" type="translate" calMode="spline" values="0,0;0,10;0,-35;0,5;0,0" keyTimes="0;0.1;0.35;0.6;1" keySpline="0,0,.58,1;0,0,.58,1;.42,0,1,1;0,0,.58,1" dur="1s" begin="idle.end" /> </g>
,, , . ,
additive="sum" <animateTransform attributeName="transform" type="scale" additive="sum" values="1,1;1.1,0.8;0.9,1.2;1.1,0.8;1,1" keyTimes="0;0.1;0.35;0.7;1" dur="1s" begin="idle.end" />
, , . النتيجة:
.
? - , , .
stroke-dashoffset , . ,
- . ,
<g id="Particles"> ... </g> <g id="Sign" class="_transformer"> ... </g>
, ,
.particles{ opacity:.7; stroke-width:0; ... }
, . ,
@keyframes sparks { 0% { stroke-dasharray: 20,200; stroke-width: 5px; } 100% { stroke-dasharray: 4,200; stroke-width: 0px; stroke-dashoffset: -180; } }
, . , , «». : CSS , , . SMIL, 3 , , 7. , , …
– , - , . CSS, SMIL.
Particles_active ,
.Particles_active .particles{ animation: sparks .7s; }
<set> , , (
set )
<g id="Particles"> <line class="particles" x1="80" y1="162.9" x2="42" y2="59.1"/> ... <line class="particles" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> <set attributeName="class" to="Particles_active" dur=".7s" begin="jump.begin + .5s"/> </g>
:. , , . 3D , . , , .
Adobe Illustrator, . , . - , . ,
d .
, . Shape Shifter.
, , . , Shape Shifter, SVG . Shape Shifter , «» SVG. Illustrator. , . , pathData
, , toValue. . «»
. ,
, , Shape Shifter , , , , . , toValue fromValue .
. ,
<animate attributeName="d" calMode="spline" values=" 1; 2; 1" dur="5s" keySpline=".42,0,.58,1;.42,0,.58,1" repeatCount="indefinite" />
1 – , 2 –. Codepen.
, SVG – , . , ,
<مجموعة>
العلامة المحددة هي نسخة مختصرة من التحريك ، إلا أنه لا يمكن أن يتم تحريفها. يتم استخدامه لتغيير السمة على الفور لفترة معينة من الوقت ، أي يعمل على مبدأ التبديل. نتيجة لذلك ، يتجاهل السمات المرتبطة بالاستيفاء ولا يدعم الرسوم المتحركة التراكمية أو النسبية. يتم تعيين القيمة فقط من السمة ل ، السمة القيم ، من ، من خلال تجاهل <set attributeName="cx" to="200" begin="click" dur="5s" .../>
, 5dur , .
animate .
<animateTransform>
كما يوحي الاسم ، يتم استخدامه لتطبيق تحويلات مختلفة على عنصر. جميع أنواع التحولات مماثلة للتحولات CSS. مع الاستخدام المتزامن للتحولات CSS و SMIL ، سوف يتغلبون على بعضهم البعض ، لذلك من الأفضل استخدام شيء واحد ، أو المشاهدة حتى لا تتداخل.كيف تحول؟السمة المتحركة هي التحويل . يشار إلى وضع التحويل في سمة الكتابة ويستغرق 4 أنواع من القيم - الحركة ، الدوران ، القياس ، التحول على المحاور.ترجمة - تحريك عنصر نسبة إلى موقعه الحالي. يستغرق إزاحة بالتنسيق [س ، ص] ، حيث ص هي معلمة اختيارية <animateTransform attributeName="transform" type="translate" from="0, -10" to="0, 10" .../>
عنصر يتحرك وفقا لY محورالتدوير - تدور الأعضاء عن مركز الدوران. يستغرق زاوية الدوران وإحداثيات مركز الدوران [درجة ، س ، ص] كقيم، إحداثيات المركز اختيارية. افتراضيًا ، يكون مركز الدوران في الزاوية العلوية اليسرى من مستند SVG <animateTransform attributeName="transform" type="rotate" from="0, 150, 150" to="45, 150, 150" .../>
45 150, 150CSS
transform-origin , . , , CSS
transform-box fill-box .
scale – .
[scale] ,
[scaleX, scaleY] (1 ).
transform-box , , . , ,
<animateTransform attributeName="transform" type="scale" from="1, 1" to="2, 1" .../>
skewX skewY – .
[deg] . – ,
transform-box transform-origin ,
<animateTransform attributeName="transform" type="skewX" from="0" to="45" .../> <animateTransform attributeName="transform" type="skewY" from="90" to="0" .../>
X, YanimateTransform ,
additive .
replace .
sum <rect transform="skewY(115)" ...> <animateTransform type="translate" from="-10" to="10" additive="replace" .../> <animateTransform type="rotate" from="0" to="90" additive="sum" .../> </rect>
<animateMotion>
, .
animateMotion animate 3 –
path ,
rotate ,
keyPoints .
–
from ,
to ,
by values ,
path <mpath> . .
from ,
to، من خلال الإشارة إلى إحداثيات النقاط ، نفس القيم ، ولكن بالفعل في شكل قائمة <animateMotion from="0,0" to="50,100" .../> <animateMotion values="0,0; 0,100; 100,100; 0,0" .../>
تأثير هذه الطريقة مشابه للتحول المعتاد للنزوح. ينتقل العنصر بشكل مستقيم من نقطة إلى أخرى. وهنا ، كما هو الحال في animateTransform ، تكون الإحداثيات نسبية . لا تشير النقطة 0،0 إلى الزاوية العلوية اليسرى من المستند ، ولكن تشير إلى الموضع الحالي للعنصر الهدف. هذه الميزة موجودة في طرق أخرى لتحديد المسار. تحددالسمة path مجموعة من الأوامر ، مثل السمة d . إذا كانت الأوامر في السمة d تُفسَّر على أنها المخطط التفصيلي للرسم ، فعندئذ تكون في السمة path هي الخط الذي سينتقل إليه العنصر. إحداثيات النقاط هي أيضًا نسبية ، لذلك يبدأ المسار عند النقطة 0،0 <animateMotion path="M 0 0 c 3.4 -6.8 27.8 -54.2 56 -37.7 C 73.3 -27.5 89.6 -5.1 81.9 5.9 c -5.8 8.3 -24.7 8.7 -45.4 -0.4" .../>
يصف هذا المسار مثل هذا المنحنىالطريقة الأخيرة هي استخدام عنصر <path> لجهة خارجية كمسار . للقيام بذلك ، تحتاج إلى تحديد رابط لهذا العنصر في العلامة <mpath> ، ويجب وضع العلامة نفسها داخل <تحريك الحركة> . يحتوي هذا الخيار على نفس الميزة مع الإحداثيات النسبية. في جوهرها ، تقوم هذه الطريقة "بنسخ" قيمة السمة d من العنصر إلى السمة <path> <path id="movement" .../> ... <animateMotion ...> <mpath href="#movement"/> </animateMotion>
قد لا يظهر العنصر الذي يعرّف المسار في المستند. يمكنك ببساطة تحديده في <defs>قم بتدوير عنصر نسبة إلى المسار ،ومن الممكن جعل العنصر يدور في اتجاه الحركة باستخدام سمة التدوير . يقبل 3 أنواع من القيم: تلقائي ، عكس تلقائي ورقم يشير إلى الدوران بالدرجات <animateMotion rotate="auto" .../>
بشكل افتراضي ، التدوير هو 0. تلتقط أي قيمة عددية الزاوية خلال الحركة. وضع آلية لصناعة السيارات و صناعة السيارات في عكس تغيير عنصر زاوية الظل على التوالي لهذا المسار. ويختلفون في اتجاه هذا الظل. في الوضع التلقائي ، يتم توجيهه للأمام ، بينما في الاتجاه المعاكس ، يتم توجيهه للخلف.?, , 0 1 . .
keyPoints , . , , .
calcMode linear spline . ,
animateMotion paced (- ).
keyTimes . فقط عن طريق إكمال هذه الخطوات ، ستعمل الرسوم المتحركة كما يجب <animateMotion keyPoints="0.5; 1; 0; 0.5" keyTimes="0; 0.25; 0.75; 1" calcMode="linear" .../>
في المثال ، تبدأ الرسوم المتحركة في منتصف المسار ، وتتحرك إلى النهاية ، ثم إلى البداية ، وتنتهي الحركة مرة أخرى في الوسطPSفي التعامل مع animateMotion ، صادفت معلومات تفيد بأن نفس الشيء يمكن القيام به على CSS. لكن في نهاية هذا المقال ، لم يكن لدي القوة ولا الرغبة في التعامل مع هذا. للمتحمسين ، أترك رابطًا للوثائق.شكر خاص
بوهده على العمل الهائل على تصحيح المادة