CSS 및 웹 애니메이션을 사용하기 위해 더 이상 사용되지 않는 SMIL SVG 애니메이션을 마이그레이션하려면 어떻게 해야 합니까?

사용되지 않는 SMIL SVG 애니메이션을 CSS 및 웹 애니메이션으로 마이그레이션

소개

SMIL 애니메이션이 사용 중단됨에 따라 대체 방법을 찾는 것이 필요해졌습니다. SVG 애니메이션을 만들기 위한 것입니다. 이 기사에서는 호버 효과, 요소 크기 조정, 상태 간 전환과 같은 일반적인 시나리오에 중점을 두고 SMIL 애니메이션을 대체하기 위해 CSS 및 웹 애니메이션을 사용하는 방법을 살펴봅니다.

CSS를 사용하여 호버 효과 구현

CSS를 사용하여 마우스 오버 시 호버 효과를 구현하려면 다음과 같이 기존 SMIL 코드를 수정하면 됩니다.

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

이렇게 하면 요소 위에 커서를 올렸을 때 획 불투명도가 감소하여 호버링 효과가 적용됩니다.

CSS 또는 웹 애니메이션으로 요소 크기 조정

변경 후 요소의 크기를 여러 번 조정하려면 CSS 또는 웹 애니메이션을 사용할 수 있습니다. 다음은 CSS 접근 방식입니다.

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

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

또는 웹 애니메이션을 사용할 수 있습니다.

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 또는 웹 애니메이션을 사용하여 확대 및 축소 애니메이션

애니메이션을 적용하려면 클릭하면 확대 및 축소되는 요소로 CSS 또는 웹 애니메이션을 사용할 수 있습니다. CSS 접근 방식은 다음과 같습니다.

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

웹 애니메이션의 경우:

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
    });
});

Polyfill로 SMIL 애니메이션 보존

SMIL 지원이 Chrome에서 폴리필로 대체되었지만, 기존 애니메이션을 보존하는 데 계속 사용할 수 있습니다. https://github.com/ericwilligers/svg-animation에서 제공되는 Eric Willigers의 SMIL 폴리필을 사용하면 더 이상 기본적으로 지원하지 않는 최신 브라우저에서 SMIL 애니메이션을 실행할 수 있습니다.

위 내용은 CSS 및 웹 애니메이션을 사용하기 위해 더 이상 사용되지 않는 SMIL SVG 애니메이션을 마이그레이션하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!