تأثير التحويم: الرسوم المتحركة لـ CSS أو الرسوم المتحركة على الويب

المشكلة:

تم إهمال علامة الرسوم المتحركة لـ SMIL، ويجب أن تكون انتقالات التمرير في CSS تم تنفيذه لاستبداله.

الحل:

إزالة علامات المجموعة وإضافة CSS إلى element_tpl:hover pseudo-class:

.element_tpl: تحوم { عتامة السكتة الدماغية: 0.5؛

.element_tpl:hover {
    stroke-opacity: 0.5;
}

المشكلة:

قم بتحريك العنصر للقياس عدة مرات عند إجراء تغيير ملتزم.

الحل:

خذ بعين الاعتبار الخيارات التالية:

الرسوم المتحركة لـ CSS:
1. استخدم إطارات CSS الرئيسية لتحقيق القياس:

@keyframes مقياس الرسوم المتحركة { 0% { تحويل: مقياس (1)؛ } 50% { تحويل: مقياس (1.12)؛ } 100% { تحويل: مقياس (1)؛ }

@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.element_tpl { الرسوم المتحركة: مقياس الرسوم المتحركة 0.5 ثانية بديل لا نهائي؛

.element_tpl {
    animation: scale-animation 0.5s infinite alternate;
}

الرسوم المتحركة على الويب:
2. استخدم واجهة برمجة تطبيقات الرسوم المتحركة على الويب للتحكم في القياس برمجيًا:

// إنشاء رسم متحرك جديد الرسوم المتحركة const = document.timeline.addAnimation(); // تحديد الإطارات الرئيسية إطارات مفتاحية ثابتة = [ { التحويل: 'المقياس (1)'، الإزاحة: 0 }، { التحويل: 'المقياس (1.12)'، الإزاحة: 0.5 }، { التحويل: 'المقياس (1)'، الإزاحة: 1 } ]; // تطبيق الإطارات الرئيسية على الرسوم المتحركة Animation.effect = keyframes; // استهدف العنصر Animation.target = document.querySelector('.element_tpl');

// Create a new animation
const animation = document.timeline.addAnimation();

// Define keyframes
const keyframes = [
    { transform: 'scale(1)', offset: 0 },
    { transform: 'scale(1.12)', offset: 0.5 },
    { transform: 'scale(1)', offset: 1 }
];

// Apply keyframes to the animation
animation.effect = keyframes;

// Target the element
animation.target = document.querySelector('.element_tpl');

المشكلة:

تحريك العنصر لتوسيع نطاقه و للأسفل عند النقر.

الحل:

انتقالات CSS:

استخدم انتقالات CSS لتشغيل تغييرات المقياس في حدثي أسفل الماوس ورفع الماوس:

1. .element_tpl { الانتقال: تحويل 0.2 ثانية؛ } .element_tpl:نشط { تحويل: مقياس (1.1)؛

.element_tpl {
    transition: transform 0.2s;
}

.element_tpl:active {
    transform: scale(1.1);
}

استخدم واجهة برمجة تطبيقات الرسوم المتحركة على الويب للتعامل مع حدث النقر وقياس العنصر وفقًا لذلك:

2. // أضف مستمع الحدث document.querySelector('.element_tpl').addEventListener('click', (event) => { // إنشاء رسم متحرك جديد الرسوم المتحركة const = document.timeline.addAnimation(); // تحديد الإطارات الرئيسية إطارات مفتاحية ثابتة = [ { التحويل: 'المقياس (1)'، الإزاحة: 0 }، { التحويل: 'المقياس (1.1)'، الإزاحة: 0.2 }، { التحويل: 'المقياس (1)'، الإزاحة: 0.4 }، ]; // تطبيق الإطارات الرئيسية على الرسوم المتحركة Animation.effect = keyframes; // استهدف العنصر Animation.target=event.target; });

حفظ صور SMIL المتحركة

// Add event listener
document.querySelector('.element_tpl').addEventListener('click', (event) => {

    // Create a new animation
    const animation = document.timeline.addAnimation();

    // Define keyframes
    const keyframes = [
        { transform: 'scale(1)', offset: 0 },
        { transform: 'scale(1.1)', offset: 0.2 },
        { transform: 'scale(1)', offset: 0.4 },
    ];

    // Apply keyframes to the animation
    animation.effect = keyframes;

    // Target the element
    animation.target = event.target;
});

نقل صور SMIL المتحركة إلى CSS أو رسوم الويب المتحركة.

الحل:
استخدم ملف SMIL polyfill الذي أنشأه إريك ويليجرز: https://github.com/ericwilligers/svg-animation. يقوم هذا polyfill بتحويل الرسوم المتحركة SMIL إلى رسوم متحركة على الويب، مما يوفر طريقة بديلة لتنفيذها.