Wie kann ich meine veralteten SMIL-SVG-Animationen migrieren, um CSS und Webanimationen zu verwenden?

Migration veralteter SMIL-SVG-Animationen zu CSS und Webanimationen

Einführung

Mit der veralteten SMIL-Animationen ist es notwendig geworden, alternative Methoden zu finden zum Erstellen von SVG-Animationen. Dieser Artikel untersucht die Verwendung von CSS und Webanimationen als Ersatz für SMIL-Animationen und konzentriert sich dabei auf gängige Szenarien wie Hover-Effekte, Elementskalierung und Umschalten zwischen Zuständen.

Implementieren eines Hover-Effekts mit CSS

Um einen Hover-Effekt beim Überfahren mit der Maus mithilfe von CSS zu implementieren, können Sie den vorhandenen SMIL-Code wie folgt ändern:

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

Dadurch wird der Hover-Effekt angewendet, indem die Strichdeckkraft verringert wird, wenn der Cursor über dem Element schwebt.

Ein Element mit CSS oder Webanimationen skalieren

Um ein Element nach einer Änderung mehrmals zu skalieren, können Sie CSS oder Webanimationen verwenden. Hier ist ein CSS-Ansatz:

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

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

Alternativ können Sie Webanimationen verwenden:

let element = document.querySelector('.element_tpl');
let animation = element.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(1.12)' },
    { transform: 'scale(1)' }
], {
    duration: 500,
    iterations: Infinity
});

Vergrößern und Verkleinern animieren mit CSS oder Webanimationen

Zum Animieren Ein Element, das beim Klicken vergrößert und verkleinert wird. Sie können entweder CSS oder Webanimationen verwenden. Hier ist der CSS-Ansatz:

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

Für Webanimationen:

let element = document.querySelector('.element_tpl');
element.addEventListener('click', () => {
    element.animate([
        { transform: 'scale(1)' },
        { transform: 'scale(1.1)' },
        { transform: 'scale(1)' }
    ], {
        duration: 400,
        iterations: 1
    });
});

SMIL-Animationen mit einer Polyfüllung beibehalten

Während die SMIL-Unterstützung in Chrome durch eine Polyfüllung ersetzt wurde, Es kann weiterhin verwendet werden, um vorhandene Animationen beizubehalten. Das SMIL-Polyfill von Eric Willigers, verfügbar unter https://github.com/ericwilligers/svg-animation, kann zum Ausführen von SMIL-Animationen in modernen Browsern verwendet werden, die diese nicht mehr nativ unterstützen.

Das obige ist der detaillierte Inhalt vonWie kann ich meine veralteten SMIL-SVG-Animationen migrieren, um CSS und Webanimationen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!