Editor de svg en línea: cómo convertir svg 3D a 2D
Este tutorial se basa en la idea de Colin Garven de implementar un botón de progreso de bucle. Usaremos la técnica de animación de bocetos SVG de la que habló JakeArchibald para implementar un proceso de progreso en bucle y luego proporcionaremos un estado de éxito o fracaso para mostrar el estado final al finalizar.
Hoy te mostraremos cómo implementar una hermosa idea de botón de progreso del increíble botón de envío de Colin Garven. Primero veamos los pasos necesarios para implementar esta idea y disfrutemos de la animación ^^. Como Colin mencionó en los comentarios, la idea de implementar este botón es la siguiente: una vez que se hace clic, el botón de enviar se convierte en un círculo y usa los límites de este círculo para mostrar una animación de progreso. Una vez finalizada la animación de progreso, el botón vuelve a su tamaño original y muestra una marca para confirmar que el envío se ha completado. A continuación, finalizaremos esta idea y agregaremos otra marca para envíos fallidos.
Es posible implementar botones y animaciones como esta simplemente teniendo en cuenta CSS. La parte más desafiante es el efecto de progreso circular. Aquí hay un buen truco: use la propiedad Clip para lograr el efecto de progreso. Anders Ingemann ha escrito un tutorial detallado sobre esta técnica. Pero esta vez lo haremos basándonos en tecnología SVG, transformaciones CSS y un poco de JavaScript. Para el efecto de progresión circular y las bifurcaciones, usaremos la técnica de dibujo animado introducida por JakeArchibald.
Cabe señalar que los problemas de compatibilidad con los SVG animados en los navegadores todavía existen, y este tipo de tecnología aún está en su infancia, por lo que este tutorial es sólo un ejercicio experimental y puede resultar útil a medida que buscamos el futuro.
Entonces, comencemos.
Si has estado viendo las animaciones de Colin en Dribbble, habrás notado que hay algunos estados del botón en los que debemos centrarnos.
Curiosamente, los botones pasan de un estado a otro.
Primero, mostraremos un botón simple con un fondo transparente y un color de borde. Rellenaremos el botón con el color del borde y cambiaremos el texto del botón a blanco al pasar el mouse.
AnimatedProgressButton01_hover(1)
Cuando hacemos clic en el botón (por ejemplo, para enviar un formulario), queremos desvanecer el texto, reducir el ancho del botón para que se convierte en un círculo y hace que el borde del botón se vuelva más grueso, iniciando una animación de progreso en el borde. Usaremos círculos SVG para animar el progreso, por lo que debemos asegurarnos de que el círculo del botón y el círculo SVG tengan el mismo tamaño y posición cuando comience la animación. Luego dibujamos los bordes del círculo para simular el proceso de envío.
AnimatedProgressButton02_progress
Una vez que se completa el envío, se completa el dibujo del borde. Tenemos que hacer que el botón se expanda nuevamente al tamaño original y dibujar la marca de verificación después del envío exitoso mientras cambiamos el color del botón al color correspondiente.
AnimatedProgressButton03_success
También necesitamos un estilo de estado de error para manejar el error de envío.
AnimatedProgressButton04_error
A continuación, creemos un marcado que contenga los elementos necesarios.
Para crear nuestro marcado, necesitamos un contenedor principal, un botón (con un elemento span que contiene texto) y tres SVG:
lt;! --progressbutton--gt;
lt;divid="progress-button" class="progress-button"gt;
lt;!--buttonwithtext--gt;
lt;buttongt;lt;spangt;Enviarlt;/spangt;lt;/buttongt;
lt;! --svgcircleforprogressindication--gt;
lt; svgclass="progress-circle "width="70 "height="70"gt;
lt; c17.032.5, 14.32.5, 32.5c0, 17.-14., 32.5-32.5, 32.5c-17., 0-32.5, -14.-32.5, -32.5c0, -17.14., -32.532.5, -32.5z"/gt;
lt;/svggt;
lt;!--checkmarktoshowonsuccess--gt;
lt;svgclass="checkmark " ancho="70 "altura="70"gt;
lt; rutad="m31.5, 46.5l15.3, -23.2"/
lt; "m31.5, 46.5l-8.5, -7.1"/gt;
lt;/svggt;
lt;!--crosstoshowonerror--gt;
lt;svgclass="cross "width="70 "height="70"gt;
lt;pathd="m35,35l-9.3,-9.3"/gt;
lt.pathd="m35, 35l9.3, 9.3"/gt;
lt; pathd="m35, 35l9.3, -9.3"/gt;
lt;/svggt;
lt;/divgt;lt;!--/progress-buttongt;
Dibujamos previamente los pares y cruces usando MethodDraw, un editor SVG en línea fácil de usar. Todas las dimensiones SVG son 70×70 porque nuestros botones tienen 70 píxeles de alto. Queremos que el círculo tenga un borde de 5 píxeles para que se parezca más al efecto de Colin. Al dibujar en el editor de gráficos, debemos configurar el radio correctamente para que todo el círculo y sus bordes tengan 70 píxeles. Tenga en cuenta que en SVG, el borde está semiincrustado (es decir, la mitad dentro del círculo, la mitad fuera), por ejemplo, un círculo con un borde de 2 y un radio de 10 tendrá un ancho y un alto de 20 2, no 10 4 (el doble del borde), por lo que la fórmula es 2r borde. Entonces, en nuestro ejemplo, sabemos que 2r 5=70, entonces necesitamos un círculo con un radio de 32,5.
La forma resultante es:
lt;circlecx="35 "cy="35 "r="32.5"/gt;
Desafortunadamente, no podemos usar esta forma básica Debido a que el punto de inicio de la "ruta" es diferente en el navegador, no podemos controlar el punto de inicio de la "animación de progreso". Por lo tanto, necesitamos convertir el círculo en un camino en lugar de (la forma básica anterior). Puedes hacer esto fácilmente usando ConverttoPath en MethodDraw en el menú Objeto.
Para la bifurcación usaremos 4 trazados para que podamos empezar a dibujar desde el centro y que se vea similar a la animación del signo opuesto.
Ahora tenemos todos los elementos que necesitamos. ¡Pensemos en el proceso y comencemos a peinar!
Primero, debemos darle estilo al contenedor del botón. Es como una máscara para el botón, así que hágalo más como un botón y configure su visualización en bloque en línea. De esta manera, podemos usarlo en nuestro flujo de documentos. botón de progreso{
pantalla: bloque
margen: 0auto;
relleno:
ancho: 250px; p>
p>
altura: 70px;
borde: 2pxsolid#1ECD97;
radio del borde:
fondo.transparente; ;
color: #1ECD97;
espaciado entre letras: 1px;
tamaño de fuente: 18px; 'Montserrat', sans -serif;
webkit-transition: color-de-fondo0.3s, color0.3s, ancho0.3s, ancho-de-borde0.3s, color-de-borde0.3s;
transición: fondo -color0.3s, color0.3s, ancho0.3s, ancho de borde0.3s, color de borde0.3s
}
También necesitamos animar las propiedades (como color de fondo, ancho, etc.) para agregar una transición. Progress-buttonbutton:focus{
outline: none;
}
Todos los SVG requieren un posicionamiento central absoluto, no permitiremos ningún evento de puntero:
}
p>
.progress-buttonsvg{
posición: absoluta
arriba:
webkit-transform: traducirX(-50);
transformar: traducirX(-50);
puntero-eventos: ninguno;
}
Como solo queremos operar en los bordes, la ruta no debe tener ningún relleno. No es necesario mostrar las rutas excepto en estados especiales, por lo que configuramos su transparencia en 0 para ocultarlas.
.progress-buttonsvgpath{
opacidad: 0;
relleno: ninguno
}
Nosotros; El bucle de progreso se implementará estableciendo el borde de la ruta circular en 5:
.progress-buttonsvgpath{
.progress-buttonsvgpath{
.progress -buttonsvgpath{
.progress-buttonpath{
trazo: #1ECD97;
ancho de trazo: 5;
}
El símbolo del indicador de éxito/error se dibujará con un borde blanco delgado y también configuraremos el límite de la línea del borde para que sea redondeado para darle una apariencia más suave. Ambos símbolos tendrán un efecto de transición de opacidad rápida.
.progress-buttonpath,
.progress-buttonpath{
trazo: #fff;
trazo-linecap: redondo;
ancho de trazo: 4;
webkit-transition: opacidad0.1s;
transición: opacidad0.1s
}
Cuando iniciemos el proceso de carga, el botón se convertirá en un círculo que se parece más a un círculo que indica el progreso.
.button{
ancho: 70px; /*makeacircle*/
ancho del borde: 5px; #ddd;
color de fondo.
Cuando iniciamos la animación de progreso, el texto debería desvanecerse rápidamente.
.span{
-webkit-transition: opacidad0.15s;
transición: opacidad0.15s
}
Estableciendo la opacidad en 0:
.span,
.p>.span,
.span{
opacity: 0; /*keepithiddeninallstates*
}
Al cambiar del estado de carga al estado de éxito o error, no necesitamos establecer una transición, simplemente ocultar el texto.
Cuando eliminamos todas las clases y volvemos al estado predeterminado, tardamos más en mostrar el texto. Por lo tanto, necesitamos definir diferentes transiciones y retrasos para volver al estado de visualización normal.
/*Transición para volver al estado predeterminado*/
.progress-buttonbuttonspan{
webkit-transition: opacity0.3s0.1s;
transición :opacity0.3s0.1s;
}
Cuando ingresamos al estado final, la confirmación tiene éxito o falla. En este punto, necesitamos redefinir el efecto de transición del botón.
.botón,
.botón{
webkit-transition: color de fondo0.3s, ancho0.3s, ancho de borde0.3s; >
transición.
.botón{
color-borde: #1ECD97;
color-fondo: #1ECD97;
}
.botón{
color del borde: #FB797E
color de fondo: #FB797E
}
Mientras aplicamos la clase correspondiente, necesitamos mostrar la ruta SVG y animar el desplazamiento del trazo usando el efecto de transición establecido a continuación.
.ruta,
.ruta,
.ruta{
opacidad:
webkit-; transición: trazo-dashoffset0.3s;
transición: trazo-dashoffset0.3s;
}
Anima el ancho del botón definiendo clases de estilo adicionales. algunos efectos de suavizado opcionales
.button{
webkit-transition: background-color0.3s, color0.3s, width0.3sscubic-bezier(0.25, 0.25, 0.4, 1), ancho de borde0.3s, color de borde0.3s;
webkit-transition: color de fondo0.3s, color0.3s, ancho0.3scubic-bezier (0.25, 0.25, 0.4, 1.6), borde- ancho0.3s, color-borde0.3s;
Transición: color-fondo0.3s, color0.3s, ancho0.3scubic-bezier (0.25, 0.25, 0.4, 1.6), ancho-borde0.3s, border-color0.3s;
}
.button{
webkit-transición: background-color0.3s, color0.3s, width0. (0.6, 0, 0.75, 0.75), ancho de borde0.3s, color de borde0.3s;
webkit- transición: color de fondo0.3s, color0.3s, ancho0.3scubic-bezier(0.6 , -0.6, 0.75, 0.75), ancho de borde0.3s, color de borde0.3s;
transición: color de fondo0.3s, color0.3s, ancho0.3s, subic-bezier (0.6, -0.6, 0.75, 0.75), border-width0.3s, border-color0.3s;
}
Si quieres estudiar otras funciones de aceleración, puedes usar Matthew Lein Proporcionado Herramienta de animación CSSEasing Ceaser.
Hasta ahora, el estilo está bien, continuemos con nuestra magia^^
JAVASCRIPT
Primero inicializaremos/guardaremos en caché algunos elementos: botón Sí Un HTML elemento de botón, ProgressEl es un elemento SVG que se usa para representar una barra de progreso circular, y dos elementos SVG, SuccessEl y errorEl, se usan para representar la barra de progreso.
functionUIProgressButton(el, opciones){
=el
=extend({},
extend(, opciones) );
this._init();
}
._init=función(){
=('botón') ;
=newSVGEL((''));
=newSVGEl((''));
=newSVGEL((''));
=this._initEvents();
/enablebutton
this._enable();
}
}
._init=función(){
varself=this;
(función(ruta,i){
: 0 -nostrokeisvisible, 1-strokeisvisible
=función(val){
for(vari=0, len=;ilt;len;i){
[i].=[i]*(1-val);
}
}
}
Siguiente , necesitamos vincular el evento de clic al botón. El botón inicialmente se animará como un círculo (al agregar la clase de carga, una vez finalizada la animación, llamaremos a la función de devolución de llamada existente (si se especifica en las opciones). O convierta directamente la animación a 100 animaciones (la velocidad de esta animación "falsa" es la misma que la velocidad de conversión de desplazamiento de trazo definida en CSS), y no se podrá hacer clic en el botón
<. =función(){varself=this;
('clic', función(){self._submit();});
}
._submit=función(){
(,'cargando');
varself=this,
onEndBtnTransitionFn =función(ev ){
if(){
( transEndEventName, onEndBtnTransitionFn
}
('disabled', '');
if(typeof===='función'){
(self);
}
else{
(1);
();
}
};
(transEndEventName, onEndBtnTransitionFn);
}
else{
onEndBtnTransitionFn();
}
}
Una vez que el progreso llega a 100, debemos restablecer la ruta de la barra de progreso circular. Al mismo tiempo, mostraremos una marca de verificación de éxito o una marca de error en la ruta. Después de un tiempo(), "retiraremos" cualquier indicador de estado en la ruta y habilitaremos el botón nuevamente. Tenga en cuenta que estamos controlando la transición mediante CSS, como se muestra en la imagen.
=función(estado){
varself=this,
endLoading=función(){
(0);
p>
if(typeofstatus===='number'){
Para habilitar el botón nuevamente, usamos CSS. varstatusClass=statusgt;=0?'success':'error',
statusEl=statusgt;=0?:;
(1);
/ /papárespectivaclasealelemento
(, statusClass);
//después de eliminar el estado y desenredar el trazo respectivo y habilitar el botón
setTimeout(function(){
(, statusClass);
(0);
self._enable();
},);
}
else {
self._enable();
}
(,'cargando');
};
//Da un breve período de tiempo (preferiblemente el mismo que el tiempo de transición) para que la animación de aumento del progreso final aún sea visible.
setTimeout(endLoading, 300);
}
¡Botón listo! Cómo convertir una imagen triple svg a una imagen doble
Cómo convertir una imagen triple svg a una imagen doble
Cómo convertir una imagen triple svg a una imagen doble
En vector Abra el archivo SVG en un software de gráficos, escale según sea necesario y luego guárdelo. Exportación de texto SVG
Introducción a la exportación de texto SVG Necesita convertir archivos SVG a formatos PNG, JPEG, TIFF, WEBP y HEIF. (1) Haga clic en exportar en la interfaz y consulte el editor en línea de svg para la implementación.
(2) También puede convertir el contenido svg en una cadena y luego exportar el archivo como .svg.
Por ejemplo, en node puedes usar fs (sistema de archivos) para exportar archivos svg.