web-dev-qa-db-fra.com

Animation SMIL SVG obsolète remplacée par des effets d'animation CSS ou Web (survolez, cliquez)

Conformément à ce sujet:

problèmes Firefox 38-40 SMIL - vitesse très lente (résolu dans la version FF 41 à partir du 22.09.15)

et ce sujet:

Intention de déprécier: SMIL

La balise SVG 'animateTransform' ne fonctionne pas bien. Ce serait bien de remplacer SMIL (balise d'animation) par des transitions CSS ou CSS.

CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.

Le prochain Google Chrome:

CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated 
and will be removed. Please use CSS animations or Web animations instead.

Révision 196823: ajout d'un avertissement de dépréciation SMIL

Pour commencer, je dois mettre en œuvre trois choses:

1) Effet de survol au survol de la souris (le plus simple)

Comment c'était:

<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
    <!--it makes half-visible selecting effect -->
    <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
    <!-- explicitly reverse the opacity animation on mouseout -->
    <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>

J'ai supprimé les balises set, ajouté des classes à la balise rect et ajouté ceci à la pseudo-classe de survol CSS:

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

2) Il évolue quelques fois après le changement engagé sur cet élément (pageload)

Comment c'était:

<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>

Comment organiser sans la balise animate:

???

3) Il anime le scale up et scale down (onclick)

Comment c'était:

<!--it animates scale up and scale down onclick -->
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>

Comment organiser sans animate tag? J'ai essayé d'utiliser :active, mais il existe des différences de comportement:

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

Voici le code complet de mon élément de modèle:

<g id="switcher" cursor="pointer" stroke-width="0.15">
    <g transform="scale(1,1.375)">
        <g>
            <rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
            <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
                <!--it makes half-visible selecting effect -->
                <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
                <!-- explicitly reverse the opacity animation on mouseout -->
                <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
            </rect>
            <line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
            <!--animation-->
            <!--it scales a few times after change committed to this element -->
            <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
            <!--it animates scale up and scale down onclick -->
            <animateTransform attributeName="transform" attributeType="XML"
            type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
            fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML"
            type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
            fill="freeze"/>
        </g>
    </g>
</g>

La version de travail de mon projet de travail actuel ressemble à:

http://jsfiddle.net/7e2jeet (auparavant uniquement utilisé par un navigateur FF - car (attention) le survol fonctionne ici avec 2 chiffres - car [Chrome supporte SMIL et 'utilise' ensemble, Firefox ne ne supporte pas actuellement SMIL et 'utilise' ensemble]/selon Robert Longson)

dans ma tentative de faire l'équivalent CSS, il ressemble à

http://jsfiddle.net/7e2jeet0/1/ (en FF)

http://jsfiddle.net/7e2jeet0/2/ (dans Chrome)

ou même pour un autre élément. Version de travail:

http://jsfiddle.net/f7o03rsr/

http://jsfiddle.net/f7o03rsr/1/

http://jsfiddle.net/f7o03rsr/2/

Merci!

Modifier 1

J'ai trouvé que cette variante de combinaison fonctionnera très bien pour le survol et la souris dans Firefox, mais seul l'effet de survol fonctionne dans Chrome.

Je suis également intéressé par la façon dont je pourrais enregistrer certaines de ces animations:

http://jsfiddle.net/e4dxx2wg/

http://jsfiddle.net/e4dxx2wg/1/

en les transférant vers des animations CSS/Web?

cssanimationsvgcss-animationssmil
37
Artem.Borysov

Le support SMIL n'a pas été supprimé de Chrome mais a été remplacé par un Polyfill. Eric Willigers a créé un polyfill SMIL implémenté entièrement sur l'API Web Animations. Vous pouvez le trouver ici: https: //github.com/ericwilligers/svg-animation

9
Emanuele Sabetta