Aplicar animaciones de formas en presentaciones en Android

Las animaciones son efectos visuales que se pueden aplicar a textos, imágenes, formas o gráficos. Le dan vida a las presentaciones o a sus componentes.

¿Por qué usar animaciones en presentaciones?

controlar el flujo de información
resaltar puntos importantes
aumentar el interés o la participación de su audiencia
hacer que el contenido sea más fácil de leer, asimilar o procesar
atraer la atención de sus lectores o espectadores a las partes importantes de una presentación

PowerPoint ofrece muchas opciones y herramientas para animaciones y efectos de animación en las categorías de entrada, salida, énfasis y trayectorias de movimiento.

Animaciones en Aspose.Slides

Aspose.Slides proporciona las clases y tipos que necesita para trabajar con animaciones bajo el espacio de nombres Aspose.Slides.Animation,
Aspose.Slides ofrece más de 150 efectos de animación bajo la enumeración EffectType. Estos efectos son esencialmente los mismos (o equivalentes) que se usan en PowerPoint.

Aplicar animación a un cuadro de texto

Aspose.Slides para Android mediante Java le permite aplicar animación al texto de una forma.

Cree una instancia de la clase Presentation.
Obtenga una referencia a una diapositiva mediante su índice.
Agregue una IAutoShape de tipo rectangle.
Agregue texto a IAutoShape.TextFrame.
Obtenga la secuencia principal de efectos.
Agregue un efecto de animación a IAutoShape.
Establezca la propiedad TextAnimation.BuildType al valor de la enumeración BuildType.
Guarde la presentación en disco como un archivo PPTX.

Este código Java le muestra cómo aplicar el efecto Fade a AutoShape y establecer la animación de texto al valor By 1st Level Paragraphs:

// Instancia una clase de presentación que representa un archivo de presentación.
Presentation pres = new Presentation();
try {
    ISlide sld = pres.getSlides().get_Item(0);

    // Añade una nueva AutoShape con texto
    IAutoShape autoShape = sld.getShapes().addAutoShape(ShapeType.Rectangle, 20, 20, 150, 100);

    ITextFrame textFrame = autoShape.getTextFrame();
    textFrame.setText("First paragraph \nSecond paragraph \n Third paragraph");

    // Obtiene la secuencia principal de la diapositiva.
    ISequence sequence = sld.getTimeline().getMainSequence();

    // Añade el efecto de animación Fade a la forma
    IEffect effect = sequence.addEffect(autoShape, EffectType.Fade, EffectSubtype.None, EffectTriggerType.OnClick);

    // Anima el texto de la forma por párrafos de primer nivel
    effect.getTextAnimation().setBuildType(BuildType.ByLevelParagraphs1);

    // Guarda el archivo PPTX en disco
    pres.save(path + "AnimText_out.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Además de aplicar animaciones al texto, también puede aplicar animaciones a un solo Paragraph. Consulte Texto animado.

Aplicar animación a un PictureFrame

Cree una instancia de la clase Presentation.
Obtenga una referencia a la diapositiva mediante su índice.
Agregue o recupere un PictureFrame en la diapositiva.
Obtenga la secuencia principal de efectos.
Agregue un efecto de animación a PictureFrame.
Guarde la presentación en disco como un archivo PPTX.

Este código Java le muestra cómo aplicar el efecto Fly a un picture frame:

// Instancia una clase de presentación que representa un archivo de presentación.
Presentation pres = new Presentation();
try {
    // Cargar imagen para agregarla a la colección de imágenes de la presentación
    IPPImage picture;
    IImage image = Images.fromFile("aspose-logo.jpg");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) image.dispose();
    }

    // Agrega un marco de imagen a la diapositiva
    IPictureFrame picFrame = pres.getSlides().get_Item(0).getShapes().addPictureFrame(ShapeType.Rectangle, 50, 50, 100, 100, picture);

    // Obtiene la secuencia principal de la diapositiva.
    ISequence sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();

    // Agrega el efecto de animación Fly desde la izquierda al marco de imagen
    IEffect effect = sequence.addEffect(picFrame, EffectType.Fly, EffectSubtype.Left, EffectTriggerType.OnClick);

    // Guarda el archivo PPTX en disco
    pres.save(path + "AnimImage_out.pptx", SaveFormat.Pptx);
} catch(IOException e) {
} finally {
    if (pres != null) pres.dispose();
}

Aplicar animación a una forma

Cree una instancia de la clase Presentation.
Obtenga una referencia a la diapositiva mediante su índice.
Agregue una IAutoShape de tipo rectangle.
Agregue una IAutoShape de tipo Bevel (cuando este objeto se hace clic, se reproduce la animación).
Cree una secuencia de efectos en la forma de bisel.
Cree un UserPath personalizado.
Agregue comandos para mover al UserPath.
Guarde la presentación en disco como un archivo PPTX.

Este código Java le muestra cómo aplicar el efecto PathFootball (path football) a una forma:

// Instancia una clase Presentation que representa un archivo PPTX.
Presentation pres = new Presentation();
try {
    ISlide sld = pres.getSlides().get_Item(0);

    // Crea el efecto PathFootball para una forma existente desde cero.
    IAutoShape ashp = sld.getShapes().addAutoShape(ShapeType.Rectangle, 150, 150, 250, 25);
    ashp.addTextFrame("Animated TextBox");

    // Añade el efecto de animación PathFootball
    pres.getSlides().get_Item(0).getTimeline().getMainSequence().addEffect(ashp, EffectType.PathFootball,
            EffectSubtype.None, EffectTriggerType.AfterPrevious);

    // Crea algún tipo de "botón".
    IShape shapeTrigger = pres.getSlides().get_Item(0).getShapes().addAutoShape(ShapeType.Bevel, 10, 10, 20, 20);

    // Crea una secuencia de efectos para este botón.
    ISequence seqInter = pres.getSlides().get_Item(0).getTimeline().getInteractiveSequences().add(shapeTrigger);

     // Crea una ruta de usuario personalizada. Nuestro objeto se moverá solo después de que se haga clic en el botón.
    IEffect fxUserPath = seqInter.addEffect(ashp, EffectType.PathUser, EffectSubtype.None, EffectTriggerType.OnClick);

     // Añade comandos para mover ya que la ruta creada está vacía.
    IMotionEffect motionBvh = ((IMotionEffect)fxUserPath.getBehaviors().get_Item(0));

    Point2D.Float[] pts = new Point2D.Float[1];
    pts[0] = new Point2D.Float(0.076f, 0.59f);
    motionBvh.getPath().add(MotionCommandPathType.LineTo, pts, MotionPathPointsType.Auto, true);
    pts[0] = new Point2D.Float(-0.076f, -0.59f);
    motionBvh.getPath().add(MotionCommandPathType.LineTo, pts, MotionPathPointsType.Auto, false);
    motionBvh.getPath().add(MotionCommandPathType.End, null, MotionPathPointsType.Auto, false);

     // Escribe el archivo PPTX en disco
    pres.save("AnimExample_out.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Obtener los efectos de animación aplicados a una forma

Los siguientes ejemplos le muestran cómo usar el método getEffectsByShape de la interfaz ISequence para obtener todos los efectos de animación aplicados a una forma.

Ejemplo 1: Obtener efectos de animación aplicados a una forma en una diapositiva normal

Anteriormente, aprendió cómo agregar efectos de animación a formas en presentaciones de PowerPoint. El siguiente código de ejemplo le muestra cómo obtener los efectos aplicados a la primera forma en la primera diapositiva normal de la presentación AnimExample_out.pptx.

Presentation presentation = new Presentation("AnimExample_out.pptx");
try {
    ISlide firstSlide = presentation.getSlides().get_Item(0);

    // Obtiene la secuencia principal de animación de la diapositiva.
    ISequence sequence = firstSlide.getTimeline().getMainSequence();

    // Obtiene la primera forma en la primera diapositiva.
    IShape shape = firstSlide.getShapes().get_Item(0);

    // Obtiene los efectos de animación aplicados a la forma.
    IEffect[] shapeEffects = sequence.getEffectsByShape(shape);

    if (shapeEffects.length > 0)
        System.out.println("The shape " + shape.getName() + " has " + shapeEffects.length + " animation effects.");
} finally {
    if (presentation != null) presentation.dispose();
}

Ejemplo 2: Obtener todos los efectos de animación, incluidos los heredados de marcadores de posición

Si una forma en una diapositiva normal tiene marcadores de posición que están en la diapositiva de diseño y/o en la diapositiva maestra, y se han agregado efectos de animación a esos marcadores de posición, entonces todos los efectos de la forma se reproducirán durante la presentación, incluidos los heredados de los marcadores de posición.

Supongamos que tenemos un archivo de presentación PowerPoint sample.pptx con una diapositiva que contiene solo una forma de pie de página con el texto “Made with Aspose.Slides” y al que se le aplica el efecto Random Bars.

Slide shape animation effect

Supongamos también que el efecto Split se aplica al marcador de posición de pie de página en la diapositiva de diseño.

Layout shape animation effect

Y finalmente, el efecto Fly In coincide con el marcador de posición de pie de página en la diapositiva maestra.

Master shape animation effect

El siguiente código de ejemplo le muestra cómo usar el método getBasePlaceholder de la interfaz IShape para acceder a los marcadores de posición de la forma y obtener los efectos de animación aplicados a la forma de pie de página, incluidos los heredados de los marcadores de posición ubicados en las diapositivas de diseño y maestra.

Presentation presentation = new Presentation("sample.pptx");

ISlide slide = presentation.getSlides().get_Item(0);

// Get animation effects of the shape on the normal slide.
IShape shape = slide.getShapes().get_Item(0);
IEffect[] shapeEffects = slide.getTimeline().getMainSequence().getEffectsByShape(shape);

// Get animation effects of the placeholder on the layout slide.
IShape layoutShape = shape.getBasePlaceholder();
IEffect[] layoutShapeEffects = slide.getLayoutSlide().getTimeline().getMainSequence().getEffectsByShape(layoutShape);

// Get animation effects of the placeholder on the master slide.
IShape masterShape = layoutShape.getBasePlaceholder();
IEffect[] masterShapeEffects = slide.getLayoutSlide().getMasterSlide().getTimeline().getMainSequence().getEffectsByShape(masterShape);

System.out.println("Main sequence of shape effects:");
printEffects(masterShapeEffects);
printEffects(layoutShapeEffects);
printEffects(shapeEffects);

presentation.dispose();

static void printEffects(IEffect[] effects)
{
    for (IEffect effect : effects)
    {
        String typeName = EffectType.getName(EffectType.class, effect.getType());
        String subtypeName = EffectSubtype.getName(EffectSubtype.class, effect.getSubtype());

        System.out.println(typeName + " " + subtypeName);
    }
}

Salida:

Main sequence of shape effects:
Fly Bottom
Split VerticalIn
RandomBars Horizontal

Cambiar propiedades de sincronización del efecto de animación

Aspose.Slides para Android mediante Java le permite cambiar las propiedades de sincronización de un efecto de animación.

Este es el panel de sincronización de animación en Microsoft PowerPoint:

example1_image

Estas son las correspondencias entre PowerPoint Timing y las propiedades Effect.Timing :

La lista desplegable Start de PowerPoint Timing coincide con la propiedad Effect.Timing.TriggerType.
PowerPoint Timing Duration coincide con la propiedad Effect.Timing.Duration. La duración de una animación (en segundos) es el tiempo total que tarda la animación en completar un ciclo.
PowerPoint Timing Delay coincide con la propiedad Effect.Timing.TriggerDelayTime.

Así es como cambia las propiedades de sincronización del efecto:

Aplicar o obtener el efecto de animación.
Establezca nuevos valores para las propiedades Effect.Timing que necesite.
Guarde el archivo PPTX modificado.

// Instancia una clase de presentación que representa un archivo de presentación.
Presentation pres = new Presentation("AnimExample_out.pptx");
try {
    // Obtiene la secuencia principal de la diapositiva.
    ISequence sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();

    // Obtiene el primer efecto de la secuencia principal.
    IEffect effect = sequence.get_Item(0);

    // Cambia el TriggerType del efecto para iniciar al hacer clic
    effect.getTiming().setTriggerType(EffectTriggerType.OnClick);

    // Cambia la duración del efecto
    effect.getTiming().setDuration(3f);

    // Cambia el TriggerDelayTime del efecto
    effect.getTiming().setTriggerDelayTime(0.5f);

    // Guarda el archivo PPTX en disco
    pres.save("AnimExample_changed.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Sonido del efecto de animación

Aspose.Slides proporciona estas propiedades para permitirle trabajar con sonidos en efectos de animación:

Agregar un sonido al efecto de animación

Este código Java le muestra cómo agregar un sonido al efecto de animación y detenerlo cuando comienza el siguiente efecto:

Presentation pres = new Presentation("AnimExample_out.pptx");
try {
    // Agrega audio a la colección de audio de la presentación
    IAudio effectSound = pres.getAudios().addAudio(Files.readAllBytes(Paths.get("sampleaudio.wav")));

    ISlide firstSlide = pres.getSlides().get_Item(0);

    // Obtiene la secuencia principal de la diapositiva.
    ISequence sequence = firstSlide.getTimeline().getMainSequence();

    // Obtiene el primer efecto de la secuencia principal
    IEffect firstEffect = sequence.get_Item(0);

    // Verifica el efecto para "No Sound"
    if (!firstEffect.getStopPreviousSound() && firstEffect.getSound() == null)
    {
        // Agrega sonido al primer efecto
        firstEffect.setSound(effectSound);
    }

    // Obtiene la primera secuencia interactiva de la diapositiva.
    ISequence interactiveSequence = firstSlide.getTimeline().getInteractiveSequences().get_Item(0);

    // Establece la bandera "Stop previous sound" del efecto
    interactiveSequence.get_Item(0).setStopPreviousSound(true);

    // Escribe el archivo PPTX en disco
    pres.save("AnimExample_Sound_out.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Extraer un sonido del efecto de animación

Cree una instancia de la clase Presentation.
Obtenga una referencia a una diapositiva mediante su índice.
Obtenga la secuencia principal de efectos.
Extraiga el setSound(IAudio value) incrustado en cada efecto de animación.

// Instancia una clase de presentación que representa un archivo de presentación.
Presentation presentation = new Presentation("EffectSound.pptx");
try {
    ISlide slide = presentation.getSlides().get_Item(0);

    // Obtiene la secuencia principal de la diapositiva.
    ISequence sequence = slide.getTimeline().getMainSequence();

    for (IEffect effect : sequence)
    {
        if (effect.getSound() == null)
            continue;

        // Extrae el sonido del efecto en un array de bytes
        byte[] audio = effect.getSound().getBinaryData();
    }
} finally {
    if (presentation != null) presentation.dispose();
}

Después de la animación

Aspose.Slides para Android mediante Java le permite cambiar la propiedad After animation de un efecto de animación.

Este es el panel de efecto de animación y el menú extendido en Microsoft PowerPoint:

example1_image

PowerPoint Effect After animation drop-down list matches these properties:

La propiedad setAfterAnimationType(int value) que describe el tipo After animation:
- PowerPoint More Colors coincide con el tipo AfterAnimationType.Color;
- PowerPoint Don’t Dim coincide con el tipo AfterAnimationType.DoNotDim (tipo predeterminado de After animation);
- PowerPoint Hide After Animation coincide con el tipo AfterAnimationType.HideAfterAnimation;
- PowerPoint Hide on Next Mouse Click coincide con el tipo AfterAnimationType.HideOnNextMouseClick;
La propiedad setAfterAnimationColor(IColorFormat value) que define un formato de color After animation. Esta propiedad funciona en conjunto con el tipo AfterAnimationType.Color. Si cambia el tipo a otro, el color After animation se borrará.

Este código Java le muestra cómo cambiar un efecto After animation:

// Instancia una clase de presentación que representa un archivo de presentación
Presentation pres = new Presentation("AnimImage_out.pptx");
try {
    ISlide firstSlide = pres.getSlides().get_Item(0);

    // Obtiene el primer efecto de la secuencia principal
    IEffect firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);

    // Cambia el tipo de animación posterior a Color
    firstEffect.setAfterAnimationType(AfterAnimationType.Color);

    // Establece el color de atenuación de la animación posterior
    firstEffect.getAfterAnimationColor().setColor(Color.BLUE);

    // Guarda el archivo PPTX en disco
    pres.save("AnimImage_AfterAnimation.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Animar texto

Aspose.Slides proporciona estas propiedades para permitirle trabajar con el bloque Animate text de un efecto de animación:

La propiedad setAnimateTextType(int value) que describe el tipo de animación de texto del efecto. El texto de la forma puede animarse:
- Todo a la vez (AnimateTextType.AllAtOnce tipo)
- Por palabra (AnimateTextType.ByWord tipo)
- Por letra (AnimateTextType.ByLetter tipo)
La propiedad setDelayBetweenTextParts(float value) establece un retraso entre las partes del texto animado (palabras o letras). Un valor positivo especifica el porcentaje de la duración del efecto. Un valor negativo especifica el retraso en segundos.

Así es como puede cambiar las propiedades Animate text del efecto:

Aplicar o obtener el efecto de animación.
Establezca la propiedad setBuildType(int value) al valor BuildType.AsOneObject para desactivar el modo de animación By Paragraphs.
Establezca nuevos valores para las propiedades setAnimateTextType(int value) y setDelayBetweenTextParts(float value).
Guarde el archivo PPTX modificado.

// Instancia una clase de presentación que representa un archivo de presentación.
Presentation pres = new Presentation("AnimTextBox_out.pptx");
try {
    ISlide firstSlide = pres.getSlides().get_Item(0);

    // Obtiene el primer efecto de la secuencia principal
    IEffect firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);

    // Cambia el tipo de animación de texto del efecto a "As One Object"
    firstEffect.getTextAnimation().setBuildType(BuildType.AsOneObject);

    // Cambia el tipo de animación de texto del efecto a "By word"
    firstEffect.setAnimateTextType(AnimateTextType.ByWord);

    // Establece el retraso entre palabras al 20% de la duración del efecto
    firstEffect.setDelayBetweenTextParts(20f);

    // Guarda el archivo PPTX en disco
    pres.save("AnimTextBox_AnimateText.pptx", SaveFormat.Pptx);
} finally {
    if (pres != null) pres.dispose();
}

Preguntas frecuentes

¿Cómo puedo asegurar que las animaciones se conserven al publicar la presentación en la web?

Export to HTML5 y habilite las options responsables de las animaciones de shape y transition. El HTML plano no reproduce animaciones de diapositivas, mientras que HTML5 sí.

¿Cómo afecta al cambiar el orden z (orden de capas) de las formas a la animación?

El orden de animación y el orden de dibujo son independientes: un efecto controla la sincronización y el tipo de aparición/desaparición, mientras que el z-order determina qué cubre a qué. El resultado visible se define por su combinación. (Este es el comportamiento general de PowerPoint; el modelo de efectos y formas de Aspose.Slides sigue la misma lógica.)

¿Existen limitaciones al convertir animaciones a video para ciertos efectos?

En general, las animaciones son compatibles, pero en casos raros o con efectos específicos pueden renderizarse de manera distinta. Se recomienda probar con los efectos que use y con la versión de la biblioteca.

Obtener propiedades efectivas de formas de presentaciones en Android Crear miniaturas de formas de presentación en Android