El módulo de efectos visuales viene con efectos de seis núcleos: Opacidad, Escala, Morph, MoveBy, Highlight y Parallel. A través de la combinación de estos efectos principales, hay más de 16 efectos adicionales, por ejemplo: efecto, aparición, efecto, alternar, etc.
Efectos básicos:
- Efecto.Opacidad: se puede utilizar para cambiar la opacidad (transparencia) de un elemento.
- Effect.Scale: se puede usar para escalar gradualmente un elemento hacia arriba o hacia abajo, ya sea vertical u horizontalmente.
- Effect.Morph: se puede utilizar para cambiar las propiedades CSS de un elemento.
- Effect.move : se puede utilizar para mover un elemento modificando sus atributos de posición.
- Effect.Highlight: se puede utilizar para hacer parpadear un color como fondo de un elemento.
- Effect.Parallel: se puede utilizar para combinar más de un efecto principal en un efecto paralelo.
Efectos adicionales:
- Effect.Appear: Hace aparecer el elemento seleccionado.
- Effect.Fade: hace que el elemento se desvanezca y finalmente establezca su propiedad de visualización en ninguno
- Effect.Puff: se puede usar para eliminar el elemento del DOM y luego crecer desde el centro mientras se desvanece en la invisibilidad.
- Effect.Dropout: Se utiliza para eliminar un elemento del DOM.
- Effect.Shake: puede sacudir el elemento de un lado a otro en dirección horizontal.
- Effect.SwitchOff: puede cambiar el tamaño del elemento verticalmente desde la parte superior e inferior hacia su línea central, y luego lo elimina del DOM.
- Effect.BlindDown: Puede simular la persiana de la ventana, el contenido permanece en su lugar.
- Effect.BlindUp : Puede simular la ventana ciega, el contenido permanece en su lugar.
- Effect.SlideDown: Puede simular la persiana de la ventana hacia abajo, el contenido se desplaza hacia abajo.
- Effect.SlideUp: puede simular una ventana ciega, el contenido se desplaza hacia arriba.
- Effect.Pulsate: puede desvanecer el elemento a cero opacidad y luego volver a uno cinco veces.
- Effect.Squish: simula el efecto de que el elemento se pellizca en su punto superior izquierdo hasta que desaparece.
- Effect.Fold: Simula el efecto de plegar el elemento.
- Effect.Grow: Simula alejar el elemento.
- Effect.Shrink: Simula encoger el elemento a su esquina superior izquierda.
- Effect.Toggle: Permite alternar entre ocultar y mostrar, deslizar hacia arriba y deslizar hacia abajo, y ciego arriba y ciego abajo.
Todos los efectos principales admiten varios parámetros comunes, también algunos efectos tienen parámetros específicos de efectos. Estos nombres de efectos distinguen entre mayúsculas y minúsculas
Parámetros comunes:
|
Opciones |
Descripción |
|
|
duración |
Para especificar la duración del efecto (en float) | |
|
fps |
Para especificar el número de fotogramas a los que apuntar en un segundo | |
|
transición |
Da una función que modifica los puntos actuales de la animación (entre 0 y 1). Transiciones disponibles:
|
|
|
de |
Establece el punto de inicio de la transición, toma un valor flotante entre 0 y 1. | |
|
a |
Establece el punto final de la transición, toma un valor flotante entre 0 y 1. | |
|
sincronizar |
Si se establece en verdadero, puede renderizar fotogramas manualmente llamando al método de instancia render() de un efecto. Por defecto, los marcos se renderizan automáticamente |
|
|
cola |
Se puede utilizar para establecer opciones de cola | |
|
demora |
Se puede utilizar para establecer el retraso en un efecto. | |
Ejemplo:
HTML
<html>
<head>
<script type="text/javascript"
src="./javascript/prototype.js">
</script>
<script type="text/javascript"
src=
"./javascript/scriptaculous.js?load = effects">
</script>
<script>
function transitionEffect(element) {
new Effect.Opacity(element, {
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.5
});
};
</script>
</head>
<body>
<div onclick=transitionEffect(div)>
<button>Transition</button>
</div>
<div id="div">
<p>Transition of the text
(changing opacity)</p>
</div>
</body>
</html>
Producción:
Métodos de devolución de llamada: el parámetro de opciones también se puede proporcionar con métodos de devolución de llamada para que pueda ejecutar el script en varios eventos mientras se ejecuta el efecto. Las devoluciones de llamada se proporcionan con una referencia al objeto de efecto como parámetro.
|
llamar de vuelta |
Descripción |
|
antes de comenzar |
Se llama antes de que se inicie el bucle de renderizado de efectos. |
|
antes de la configuración |
Se llama antes de configurar el efecto. |
|
después de la configuración |
Se llama después de configurar el efecto e inmediatamente antes de que se inicie el bucle de renderizado de efectos principales. |
|
antes de Actualizar |
Se llama en cada iteración del bucle de renderizado de efectos antes de que tenga lugar el redibujado. |
|
despúes de actualizar |
Se llama en cada iteración del bucle de renderizado de efectos después de que se lleva a cabo el redibujado. |
|
después de terminar |
Se llama después de que se realizó el último redibujado del efecto. |
Ejemplo:
HTML
<html>
<head>
<script type = "text/javascript"
src = "./javascript/prototype.js">
</script>
<script type = "text/javascript"
src =
"./javascript/scriptaculous.js?load = effects">
</script>
<script>
function OnFinish(div){
alert("OnFinish called: " + div.element.id);
}
function OnStart(div){
alert("OnStart called: " + div.element.id);
}
function callBackMethods(div){
new Effect.Highlight(div,
{
duration: 0.5,
afterFinish: OnFinish,
beforeStart: OnStart
}
);
}
</script>
</head>
<body>
<div onclick = "callBackMethods(this)" id = "div">
<button>callBack</button>
</div>
</body>
</html>
Producción:
Propiedades y métodos:
|
Variable |
Descripción |
|
efecto.elemento |
El elemento sobre el que se aplica el efecto. |
|
efecto.opciones |
Contiene las opciones dadas al efecto. |
|
efecto.currentFrame |
Es el número del cuadro renderizado por último. |
|
efecto.startOn, efecto.finishOn |
Es el tiempo (en ms) en que se inició el efecto y en que terminará. |
|
efecto.efectos[] |
En un efecto Effect.Parallel, hay una array de efectos [] que contiene los efectos individuales de los que se compone el efecto paralelo. |
|
efecto.cancel() |
Se utiliza para detener el efecto tal cual. |
|
efecto.inspeccionar() |
Se utiliza para obtener la información básica de depuración de la instancia. |
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA