25/9/2016

5LibrerasDeJavaScriptParaAnimarSVG

Inicio

Web Hosting

Contacto

5 Libreras De JavaScript Para Animar SVG

SVGesunaresolucinindependientedegrficos.Estosignificaquelaimagenseverbienencualquiertipodepantallasin
sufrirningunaprdidadecalidad.Msalldeeso,tambinpuedeshacerquelasimgenesSVGpuedanteneralgunos
efectosdeanimacin.
Anteriormentehemoscompartidoalgunosartculosdondehablamossobrelaanimacinusandoanimate.css,ousando
Animatronpararealizaranimaciones.Enestaoportunidad,vamosacompartirunascuantaslibrerasdeJavaScript
paraanimarSVG.

1.Vivus
VivusesunabibliotecaJavaScriptqueledaasuSVGlaaparienciadeserdibujado.Vivusfuncionasinnecesidadde
dependerdeotraslibreras,comojQuery.Slotienesqueincluirelarchivo.jsenelcdigoHTML,ydesignarelelemento
SVGquedeseasanimar,juntoconalgunasopcionespredeterminadasparainiciarlaanimacindeinmediato.
Porejemplo:
newVivus('svgelement',{type:'oneByOne',duration:200});
LoanterioranimaelelementoSVGquetieneelIDsvgelementoen200milisegundos.CadaelementodeestaimagenSVG,
seanimarunatrasotradentrodeeseperiododetiempo.

http://blog.hostdime.com.co/5libreriasdejavascriptparaanimarsvg/

1/5

25/9/2016

5LibrerasDeJavaScriptParaAnimarSVG

2. Bonsai
BonsaiesunapotentelibreradeJavaScriptquetepermitedibujar,ascomoanimarelementosgrficosen
pginasweb.EscompatibletantoconHTML5CanvasySVG.ConBonsai,sepuededesarrollarunsimplerectngulooun
crculoosisequiere,unjuegomultijugadordeanimacin,comoeste.PuedesusarOrbitsentircmofuncionaBonsaien
accinenvivooechaunvistazoaunpardeestosejemplosimpresionantesainspirarse.

3.Velocity
VelocityesunalibreraJavaScriptutilparadesarrollaranimacionesrpidas.SuperaajQuery,einclusoCSSalmomento
deimplementaranimacionesrpidaseneldesarrolloweb.LaAPIdeVelocityfuncionadeformasimilarala
animacinenjQuery,exceptoqueutilizalapalabraclavealias$.velocity()enlugarde$.animate().Apartedeeso,puedes
utilizarlasmismaspalabrasexactasdeanimacincomofadeInyfadeOut.

http://blog.hostdime.com.co/5libreriasdejavascriptparaanimarsvg/

2/5

25/9/2016

5LibrerasDeJavaScriptParaAnimarSVG

4. Raphael
RaphaelJSesunabibliotecaquepermitedibujaryanimargrficosvectorialesSVGenlaspginasweb.Es
compatibleconunaampliagamadenavegadoreshastaelantiguoIE6,quecasihacequeRaphaelsealabibliotecade
JavaScriptmsconfiableenestarea.ConRaphaelJS,puedescreargrficosinteractivosdeanlisis,mapasdelmundo,e
interaccionesdejuegosimilaraladeCounterStrike.

5. Snap
SnapSVGesotralibreradeJavaScriptpopularparalaanimacionSVG,lacualfuedesarrolladadaporDmitry
Baranovskiy,juntoconAdobeWebPlatformTeam.AdiferenciadeRaphael,SnapSVGsoportanicamentelos
navegadoresmsrecientes.EsopermitequelabibliotecaseasignificativamentemenorqueRaphaelyporsupuestoel
soportealascaractersticasSVGcomoelrecorteyelenmascaramiento.

http://blog.hostdime.com.co/5libreriasdejavascriptparaanimarsvg/

3/5

25/9/2016

5LibrerasDeJavaScriptParaAnimarSVG

Post Relacionados

Cmo optimizar tu tienda PrestaShop

Servidores Echo
Hostdimeteofreceloltimoendesarrollo

Alternativa Para Las Empresas,

PrestaShopesunaaplicacinlibreydecdigo

tecnolgico:ServidoresEcho,Hoymsque

ServidoresVPS,unaexcelentealternativapara

abiertodecomercioelectrnicootienda

nuncaes

lasempresasencrecimientoSituempresa

virtual

crececada

Deja un comentario
Tudireccindecorreoelectrniconoserpublicada.

Comentario

Nombre
Correoelectrnico
Web

CdigoCAPTCHA*
Publicar comentario

5 Beneficios De Tener Correo Electrnico Con Tu Propio Dominio

http://blog.hostdime.com.co/5libreriasdejavascriptparaanimarsvg/

Editar Archivos De Vdeo Desde La Consola De Windows

4/5

25/9/2016

Entradas recientes

5LibrerasDeJavaScriptParaAnimarSVG
search

Suscrbete al blog y no te pierdas las

novedades

Vacantesparasoportetcnicoennuestra
Compaa

Sitios de inters

WordPressoJoomla,esaeslacuestin

FacebookhostDimeColombia

Googleadviertedepginasnoseguras,sin
SSL

Ingresatuemail:

FacebookhostDimePer
ServidoresdedicadosColombia
VpsPer

Empezamos

Costodefuncionamientodeuncentrode
datostradicional

Teinvitamosanuestrasvideoconferencias

HostDime Blog en espaol 2016

http://blog.hostdime.com.co/5libreriasdejavascriptparaanimarsvg/

5/5