{"id":703,"date":"2024-03-28T05:37:22","date_gmt":"2024-03-28T05:37:22","guid":{"rendered":"https:\/\/javigomez.org\/?p=703"},"modified":"2025-09-29T20:33:15","modified_gmt":"2025-09-29T20:33:15","slug":"boton-animado-svg-animacion-y-javascript","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2024\/03\/28\/boton-animado-svg-animacion-y-javascript\/","title":{"rendered":"Bot\u00f3n animado: SVG, Animaci\u00f3n y JavaScript"},"content":{"rendered":"\n<p>En el siguiente c\u00f3digo se hace una animaci\u00f3n de  un bot\u00f3n. Cuando se pulsa el bot\u00f3n, este da la sensaci\u00f3n que se hincha y se vuelve a deshinchar. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2024\/03\/boton-1.mp4\"><\/video><\/figure>\n\n\n\n<p>Para ello se construye el bot\u00f3n con 4 l\u00edneas realizadas con un path de SVG que luego se deforman en una animaci\u00f3n. Si nos fijamos en la l\u00ednea superior vemos que el origen es el siguiente path<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> 0% {d: path(\"M5,5 C75,5 150,5 200,5\");  }<\/code><\/pre>\n\n\n\n<p>Aqu\u00ed vemos que se inicia en el punto 5,5 y finaliza en el 200,5. Tambi\u00e9n realiza una curva cubic-betzier (indicado con la letra C), en donde se definen dos puntos intermedios de la recta (75,5 y 150,5). En un principio, todos estos puntos est\u00e1n a una altura 5, con lo cual, no hay curva. En el punto intermedio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>50% {d: path(\"M5,5 C75,0 150,0 200,5\");  }<\/code><\/pre>\n\n\n\n<p>Vemos que el origen y el final es el mismo, pero los puntos intermedios de la curva tienen la posici\u00f3n Y mas arriba (75,0 y 150,0) y al estar dentro de la cubic-betzier forman una curva<\/p>\n\n\n\n<p>Otra cosa a destacar es cuando se realiza la pulsaci\u00f3n, es necesario reiniciar la animaci\u00f3n para que se pueda realizar mas de una vez, para ello se activa la animaci\u00f3n con la funci\u00f3n setTimeout(), para que se realice en un hilo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Modificar Curva SVG con Animaci\u00f3n&lt;\/title>\n  &lt;style>\n\/* Estilos opcionales *\/\nsvg {\n\n  &amp;:hover {\n  cursor: pointer;\n  }\n}\n#sur,#norte, #este, #oeste {\n  stroke: #500;\n  stroke-width: 2;\n  fill: none;\n}\n\n@keyframes aniSur {\n  0% {d: path(\"M5,35 C75,35 150,35 200,35\");  }\n  50% {d: path(\"M5,35 C75,40 150,40 200,35\");  }\n  100% {d: path(\"M5,35 C75,35 150,35 200,35\");  }\n}\n\n@keyframes aniNorte {\n  0% {d: path(\"M5,5 C75,5 150,5 200,5\");  }\n  50% {d: path(\"M5,5 C75,0 150,0 200,5\");  }\n  100% {d: path(\"M5,5 C75,5 150,5 200,5\");  }\n}\n\n@keyframes aniEste {\n  0% {d: path(\"M200,5 C200,15 200,25 200,35\");  }\n  50% {d: path(\"M200,5 C205,15 205,25 200,35\");  }\n  100% {d: path(\"M200,5 C200,15 200,25 200,35\");  }\n}\n\n@keyframes aniOeste {\n  0% {d: path(\"M5,5 C5,15 5,25 5,35\");  }\n  50% {d: path(\"M5,5 C0,15 0,25 5,35\");  }\n  100% {d: path(\"M5,5 C5,15 5,25 5,35\");  }\n}\n  &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n  &lt;div id=\"boton\">\n&lt;svg width=\"205\" height=\"40\">\n  &lt;path id=\"norte\" d=\"M5,5  200,5\" \/>\n  &lt;path id=\"sur\" d=\"M5,35  200,35\" \/>\n  &lt;path id=\"este\" d=\"M200,5  200,35\" \/>\n  &lt;path id=\"oeste\" d=\"M5,5  5,35\" \/>\n  &lt;text x=\"50%\" y=\"50%\" fill=\"#500\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\"\nfont-size=\"20\">\nAceptar\n  &lt;\/text>\n&lt;\/svg>\n  &lt;\/div>\n\n  &lt;script>\nboton = document.getElementById(\"boton\");\nboton.addEventListener(\"mousedown\", modificarCurva);\nboton.addEventListener(\"click\", ejecutar);\nfunction ejecutar(){\n  console.log(\"ejecutar\")\n}\n\nfunction modificarCurva() {\n  var sur = document.getElementById(\"sur\");\n  var norte = document.getElementById(\"norte\");\n  var este = document.getElementById(\"este\");\n  var oeste = document.getElementById(\"oeste\");\n  \/\/ Reiniciar la animaci\u00f3n\n  sur.style.animation = \"none\";\n  norte.style.animation = \"none\";\n  este.style.animation = \"none\";\n  oeste.style.animation = \"none\";\n  setTimeout(function () {\n    sur.style.animation = \"aniSur .5s\";\n    norte.style.animation = \"aniNorte .5s\";\n    este.style.animation = \"aniEste .5s\";\n    oeste.style.animation = \"aniOeste .5s\";\n  }, 1);\n}\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente c\u00f3digo se hace una animaci\u00f3n de un bot\u00f3n. Cuando se pulsa el bot\u00f3n, este da la sensaci\u00f3n que se hincha y se &hellip; <\/p>\n","protected":false},"author":1,"featured_media":704,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[33,56,106,204,319],"class_list":["post-703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-javascript","tag-animacion","tag-boton","tag-css","tag-javascript","tag-svg"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/703\/revisions\/870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/704"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}