{"id":25162910,"url":"https://github.com/rodnye/animatejs","last_synced_at":"2025-04-03T14:43:15.773Z","repository":{"id":130577069,"uuid":"556640621","full_name":"rodnye/AnimateJS","owner":"rodnye","description":"Class to create dynamic animations with Javascript","archived":false,"fork":false,"pushed_at":"2022-12-27T16:56:35.000Z","size":62,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T03:32:25.076Z","etag":null,"topics":["animation","animation-library","html","javascript","js","requestanimationframe","setinterval-settimeout"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodnye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-24T08:26:15.000Z","updated_at":"2023-01-25T20:48:57.000Z","dependencies_parsed_at":"2023-04-30T08:31:02.442Z","dependency_job_id":null,"html_url":"https://github.com/rodnye/AnimateJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodnye%2FAnimateJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodnye%2FAnimateJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodnye%2FAnimateJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodnye%2FAnimateJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodnye","download_url":"https://codeload.github.com/rodnye/AnimateJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247023716,"owners_count":20870933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","html","javascript","js","requestanimationframe","setinterval-settimeout"],"created_at":"2025-02-09T03:30:48.316Z","updated_at":"2025-04-03T14:43:15.765Z","avatar_url":"https://github.com/rodnye.png","language":"JavaScript","readme":"# AnimateJS\n![bounce-ball](https://raw.githubusercontent.com/RodnyE/AnimateJS/main/src/example.gif)  \nClase para crear y manipular animaciones de manera sencilla y directa con Javascript en el navegador empleando internamente `setTimeout` y `requestAnimationFrame`.\n\n## Primeros pasos\nPrimeramente añada el archivo `animate.min.js` a su proyecto.\n```html\n\u003cscript src=\"animate.min.js\"\u003e\u003c/script\u003e\n```\n\n## Ejemplos\nAnimación sencilla de desplazamiento de un elemento\n\n```javascript\nlet elem = document.getElementById(\"myDiv\");\n\nlet animation = new Animate({\n  duration: 5000,\n  draw: function (progress) {\n    elem.style.left = (150 * progress) + \"px\";\n  }\n});\n\nanimation.play(); // iniciar animación\n```\n\n\nEl ejemplo anterior pero extendido a todos los parámetros:\n```javascript\nlet elem = document.getElementById(\"myDiv\");\n\nlet animation = new Animate({\n  duration: 5000,\n  fps: 30,\n  erase: \"in\",\n  timing: Animate.LINEAR,\n  statics: {},\n  draw: function (progress, anima) {\n    elem.style.left = (150 * progress) + \"px\";\n  }\n});\n\nanimation.play(); // iniciar animación\n```\n\n## Constructor `new Animate( opt )`\nAcepta como único parámetro un objeto de opciones que contiene:\n\n### `opt.duration`\n`number`  \n(requerido) Duración de la animación en milisegundos.\n\n### `opt.draw(progress, animation)`\n(requerido)  \nEs la función que toma el estado de finalización de la animación y la dibuja. El valor `progress=0` denota el estado inicial de la animación y `progress=1` el estado final.\nEsta es la función que dibuja la animación, o hacer lo que sea con ella:\n```javascript\nfunction draw (progress) {\n  elem.style.left = progress + \"px\";\n}\n```\n\nEl segundo argumento es la animación donde se está usando la función de dibujado.\n\n\n### `opt.fps`\n`number | \"auto\"`   \n(por defecto `\"auto\"`)  \nLos cuadros por segundo, a mayor fps, más fluida es la animación, si su valor es `\"auto\"`, los fps serán asignados según indique el navegador.\n\n### `opt.timing`\n`Animate.TIMING`  \n(por defecto `Animate.LINEAR`)  \nFunción de sincronización. Obtiene la fracción de tiempo que pasó (0 al inicio, 1 al final) y devuelve la finalización de la animación.\nHay varias que pueden ser usadas:\n```javascript\nAnimate.LINEAR\nAnimate.REVERSE\nAnimate.QUAD\nAnimate.QUBIC\nAnimate.CIRC\nAnimate.ARROW\nAnimate.BOUNCE\nAnimate.ELASTIC\n```\n\nA diferencia de la animación CSS, aquí podemos hacer cualquier función de sincronización y cualquier función de dibujo. La función de sincronización no está limitada por las curvas de Bézier. Y `draw` puede ir más allá de las propiedades, crear nuevos elementos para alguna animación de fuegos artificiales o algo así.\n\n### `opt.erase` \n`\"in\" | \"out\" | \"in-out\"`\n(por defecto `\"in\"`) \nDirección de sincronización, la orientación normal es `easeIn`.\nSi se desea invertir el sentido, se deberá usar `easeOut`.\n\nAquí hay un uso práctico, si se quiere que la animación finalice de manera suave, se deberá utilizar `easeOut` en la sincronización `QUBIC`:\n```javascript\nlet a = new Animate({\n  duration: 3200,\n  timing: Animate.QUBIC,\n  ease: \"out\", \n  draw: function(progress) {\n    elem.style.width = progress * 200 + \"px\";\n    elem.style.height = progress * 120 + \"px\";\n  }\n});\n```\n\nAnimación de rebote:\n```javascript\nlet a = new Animate({\n  duration: 5000,\n  timing: Animate.BOUNCE,\n  ease: \"out\", \n  draw: function(progress) {\n    elem.style.top = progress * 250 + \"px\";\n  }\n});\n```\n\n### `opt.statics`\n(por defecto `undefined`)  \nVariable personalizable donde podremos almacenar cualquier informacion en nuestra animación\n\n```javascript\nlet a = new Animate({\n  duration: 15000,\n  timing: Animate.ELASTIC,\n  ease: \"in-out\", \n  \n  statics: {\n    x: 5, \n    y: 60.7\n  },\n  \n  draw: function(progress, animation) {\n    \n    let statics = animation.statics;\n    console.log(statics.x) // 5\n    console.log(statics.y) // 60.7\n    \n  }\n});\n```\n\n## Propiedades\n### `duration`\nEl mismo valor de duración introducido como parámetro. Puede ser modificado dinámicamente para alterar las velocidades durante la animación:\n```javascript\nnew Animate({\n  duration: 10000,\n  timing: Animate.CIRC,\n  ease: \"out\", \n  draw: function(progress, animation) {\n    elem.style.width = progress * 100 + \"px\";\n    animation.duration --; //reducir duración a medida que avanza\n  }\n});\n```\n\n### `draw`\nLa función de dibujado introducida como parámetro.\n\n### `timing`\nLa función de sincronización que está siendo usada en la animación, ya transformada por los métodos `ease`.\n\n### `state`\n`string`  \nIndica el estado actual de la animación: pausada, detenida o ejecutandose.\n```javascript\n\"paused\"\n\"stoped\" \n\"playing\"\n```\n\n### `fps`\nEl valor de la cantidad de cuadros por segundos a ejecutar.\n\n\n## Métodos\n### `clone()`\nRetorna una nueva instancia `Animate` con las mismas características que el original.\n\n### `destroy()`\nDestruye por completo la animación, despues de ser usado este método la animación quedará como un objeto vacío.\n\n### `play()`\nComenzar la animación, si estaba pausada, continuará por donde se dejó:\n\n### `pause()`\nPausar animación, se guardará el avance actual, si se llama al método `play()` continuará la reproducción.\n\n### `stop()`\nDetener completamente la animación, si se llama el método `play()`, comenzará desde el inicio.\n\n### `toFrame( frame )`\nAvanzar o retroceder la animación hasta el cuadro indicado.\n`frame` debe ser un valor entre 0 y 1, el 0 indica el inicio, y el 1 el final. Así por ejemplo, el `frame=0.5` representaría la mitad de la animación\n\n```javascript\nlet animation = new Animate({\n  duration: 6000,\n  timing: Animate.REVERSE,\n  ease: \"in\", \n  draw: function(progress) {\n    let angle = progress * 90;\n    elem.style.transform = \"rotation(\" + angle + \"deg)\";\n  }\n})\n\nanimation.toFrame(0.5);\nanimation.play();\n```\n\n### `on(event, callback)`\nDeclarar eventos para la animación. Los eventos disponibles son:\n```javascript\n\"onplay\"\n\"onstop\"\n\"onend\"\n\"onpause\"\n```\n\nEl evento `onend` será llamado cuando la animación llegue al frame 1 (cuando la animación finalice), los demás eventos solo ocurrirán si se llaman estrictamente a sus métodos (`play()`, `stop()` ó `pause()`)\n```javascript\nlet animation = new Animate({\n  duration: 6000,\n  timing: Animate.REVERSE,\n  ease: \"in\", \n  draw: function(progress) {\n    let angle = progress * 90;\n    elem.style.transform = \"rotation(\" + angle + \"deg)\";\n  }\n});\n\nanimation.on(\"play\", ()=\u003e{\n  console.log(\"the animation has started\");\n});\nanimation.on(\"end\", ()=\u003e{\n  console.log(\"the animation has finished\");\n});\nanimation.play();\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodnye%2Fanimatejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodnye%2Fanimatejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodnye%2Fanimatejs/lists"}