非推奨の SMIL SVG アニメーションを CSS および Web アニメーションを使用できるように移行するにはどうすればよいですか?

非推奨の SMIL SVG アニメーションを CSS および Web アニメーションに移行する

はじめに

SMIL アニメーションの非推奨に伴い、代替方法を見つけることが必要になりました。 SVGアニメーションを作成するためのものです。この記事では、ホバー効果、要素のスケーリング、状態間の切り替えなどの一般的なシナリオに焦点を当てて、SMIL アニメーションの代替としての CSS および Web アニメーションの使用について説明します。

CSS を使用したホバー効果の実装

CSS を使用してマウスオーバー時のホバー効果を実装するには、既存の SMIL コードを次のように変更します。

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

これにより、カーソルが要素上にホバーしたときにストロークの不透明度を下げることでホバー効果が適用されます。

CSS または Web アニメーションを使用した要素の拡大縮小

変更後に要素を数回拡大縮小するには、CSS または Web アニメーションを使用できます。 CSS のアプローチは次のとおりです:

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

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

代わりに、Web アニメーションを使用することもできます:

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

CSS または Web アニメーションを使用してスケールアップおよびスケールダウンをアニメーション化する

アニメーション化するには要素をクリックすると拡大または縮小するため、CSS または Web アニメーションを使用できます。 CSS のアプローチは次のとおりです:

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

Web アニメーションの場合:

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 アニメーションの保持

SMIL サポートは Chrome のポリフィルに置き換えられましたが、既存のアニメーションを保存するために引き続き使用できます。 https://github.com/ericwilligers/svg-animation で入手できる Eric Willigers の SMIL ポリフィルを使用すると、ネイティブでサポートされなくなった最新のブラウザで SMIL アニメーションを実行できます。

以上が非推奨の SMIL SVG アニメーションを CSS および Web アニメーションを使用できるように移行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。