Applica animazioni di forma nelle presentazioni usando JavaScript

Introduzione

Le animazioni sono effetti visivi che possono essere applicati a testi, immagini, forme o grafici. Danno vita a presentazioni o ai loro componenti.

Perché utilizzare animazioni nelle presentazioni?

Utilizzando le animazioni, è possibile

controllare il flusso di informazioni
enfatizzare i punti importanti
aumentare l’interesse o la partecipazione del pubblico
rendere più facile la lettura, l’assimilazione o l’elaborazione dei contenuti
attirare l’attenzione dei lettori o degli spettatori sulle parti importanti di una presentazione

PowerPoint offre molte opzioni e strumenti per animazioni ed effetti di animazione nelle categorie entrata, uscita, enfasi e percorsi di movimento.

Animazioni in Aspose.Slides

Aspose.Slides fornisce le classi e i tipi necessari per lavorare con le animazioni nello spazio dei nomi Aspose.Slides.Animation,
Aspose.Slides offre oltre 150 effetti di animazione tramite l’enumerazione EffectType. Questi effetti sono essenzialmente gli stessi (o equivalenti) effetti utilizzati in PowerPoint.

Applicare animazione a TextBox

Aspose.Slides per Node.js via Java consente di applicare animazione al testo contenuto in una forma.

Creare un’istanza della classe Presentation.
Ottenere un riferimento a una diapositiva tramite il suo indice.
Aggiungere un rectangle AutoShape.
Aggiungere testo usando AutoShape.addTextFrame.
Ottenere la sequenza principale di effetti.
Aggiungere un effetto di animazione all’AutoShape.
Chiamare il metodo TextAnimation.setBuildType con il valore dell’enumerazione BuildType.
Scrivere la presentazione su disco come file PPTX.

Questo codice Javascript mostra come applicare l’effetto Fade all’AutoShape e impostare l’animazione del testo su By 1st Level Paragraphs:

// Istanzia una classe Presentation che rappresenta un file di presentazione.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Aggiunge una nuova AutoShape con testo
    var autoShape = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 20, 20, 150, 100);
    var textFrame = autoShape.getTextFrame();
    textFrame.setText("First paragraph \nSecond paragraph \n Third paragraph");
    // Ottiene la sequenza principale della diapositiva.
    var sequence = sld.getTimeline().getMainSequence();
    // Aggiunge l’effetto di animazione Fade alla forma
    var effect = sequence.addEffect(autoShape, aspose.slides.EffectType.Fade, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Anima il testo della forma per paragrafi di primo livello
    effect.getTextAnimation().setBuildType(aspose.slides.BuildType.ByLevelParagraphs1);
    // Salva il file PPTX su disco
    pres.save(path + "AnimText_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Oltre ad applicare animazioni al testo, è possibile applicare animazioni a un singolo Paragraph. Vedi Testo animato.

Applicare animazione a PictureFrame

Creare un’istanza della classe Presentation.
Ottenere un riferimento a una diapositiva tramite il suo indice.
Aggiungere o ottenere un PictureFrame sulla diapositiva.
Ottenere la sequenza principale di effetti.
Aggiungere un effetto di animazione al PictureFrame.
Scrivere la presentazione su disco come file PPTX.

Questo codice Javascript mostra come applicare l’effetto Fly a un picture frame:

// Istanzia una classe Presentation che rappresenta un file di presentazione.
var pres = new aspose.slides.Presentation();
try {
    // Carica l'immagine da aggiungere alla raccolta immagini della presentazione
    var picture;
    var image = aspose.slides.Images.fromFile("aspose-logo.jpg");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    // Aggiunge un picture frame alla diapositiva
    var picFrame = pres.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 50, 100, 100, picture);
    // Ottiene la sequenza principale della diapositiva.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Aggiunge l'effetto di animazione Fly da sinistra al picture frame
    var effect = sequence.addEffect(picFrame, aspose.slides.EffectType.Fly, aspose.slides.EffectSubtype.Left, aspose.slides.EffectTriggerType.OnClick);
    // Salva il file PPTX su disco
    pres.save(path + "AnimImage_out.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Applicare animazione a Shape

Creare un’istanza della classe Presentation.
Ottenere un riferimento a una diapositiva tramite il suo indice.
Aggiungere un rectangle AutoShape.
Aggiungere una Bevel AutoShape (quando questo oggetto viene cliccato, l’animazione viene avviata).
Creare una sequenza di effetti sulla forma bevel.
Creare un UserPath personalizzato.
Aggiungere comandi per spostarsi sul UserPath.
Scrivere la presentazione su disco come file PPTX.

Questo codice Javascript mostra come applicare l’effetto PathFootball a una forma:

// Istanzia una classe Presentation che rappresenta un file PPTX.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Crea l'effetto PathFootball per una forma esistente da zero.
    var ashp = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 150, 250, 25);
    ashp.addTextFrame("Animated TextBox");
    // Aggiunge l'effetto di animazione PathFootBall
    pres.getSlides().get_Item(0).getTimeline().getMainSequence().addEffect(ashp, aspose.slides.EffectType.PathFootball, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.AfterPrevious);
    // Crea una sorta di "button".
    var shapeTrigger = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Bevel, 10, 10, 20, 20);
    // Crea una sequenza di effetti per questo button.
    var seqInter = pres.getSlides().get_Item(0).getTimeline().getInteractiveSequences().add(shapeTrigger);
    // Crea un percorso utente personalizzato. Il nostro oggetto verrà spostato solo dopo che il button è stato cliccato.
    var fxUserPath = seqInter.addEffect(ashp, aspose.slides.EffectType.PathUser, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Aggiunge comandi per lo spostamento poiché il percorso creato è vuoto.
    var motionBhv = fxUserPath.getBehaviors().get_Item(0);
    var pts = java.newArray("com.aspose.slides.Point2DFloat", [java.newInstanceSync("com.aspose.slides.Point2DFloat", 0.076, 0.59)]);
    motionBhv.getPath().add(aspose.slides.MotionCommandPathType.LineTo, pts, aspose.slides.MotionPathPointsType.Auto, true);
    pts[0] = java.newInstanceSync("com.aspose.slides.Point2DFloat", java.newFloat(-0.076), java.newFloat(-0.59));
    motionBhv.getPath().add(aspose.slides.MotionCommandPathType.LineTo, pts, aspose.slides.MotionPathPointsType.Auto, false);
    motionBhv.getPath().add(aspose.slides.MotionCommandPathType.End, null, aspose.slides.MotionPathPointsType.Auto, false);
    // Scrive il file PPTX su disco
    pres.save("AnimExample_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ottenere gli effetti di animazione applicati a una Shape

Gli esempi seguenti mostrano come utilizzare il metodo getEffectsByShape della classe Sequence per ottenere tutti gli effetti di animazione applicati a una forma.

Esempio 1: Ottenere gli effetti di animazione applicati a una forma su una diapositiva normale

In precedenza hai imparato a aggiungere effetti di animazione a forme in presentazioni PowerPoint. Il seguente codice di esempio mostra come ottenere gli effetti applicati alla prima forma della prima diapositiva normale nella presentazione AnimExample_out.pptx.

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

    // Ottiene la sequenza principale di animazione della diapositiva.
    var sequence = firstSlide.getTimeline().getMainSequence();

    // Ottiene la prima forma sulla prima diapositiva.
    var shape = firstSlide.getShapes().get_Item(0);

    // Ottiene gli effetti di animazione applicati alla forma.
    var shapeEffects = sequence.getEffectsByShape(shape);

    if (shapeEffects.length > 0) {
        console.log("The shape", shape.getName(), "has", shapeEffects.length, "animation effects.");
    }
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

Esempio 2: Ottenere tutti gli effetti di animazione, inclusi quelli ereditati da segnaposto

Se una forma su una diapositiva normale ha segnaposto che si trovano nella diapositiva layout e/o master, e a questi segnaposto sono stati aggiunti effetti di animazione, allora tutti gli effetti della forma verranno riprodotti durante la presentazione, inclusi quelli ereditati dai segnaposto.

Supponiamo di avere un file di presentazione PowerPoint sample.pptx con una diapositiva contenente solo una forma piè di pagina con il testo “Made with Aspose.Slides” e l’effetto Random Bars applicato alla forma.

effetto animazione forma diapositiva

Supponiamo inoltre che l’effetto Split sia applicato al segnaposto piè di pagina sulla diapositiva layout.

effetto animazione forma layout

Infine, l’effetto Fly In è applicato al segnaposto piè di pagina sulla diapositiva master.

effetto animazione forma master

Il seguente codice di esempio mostra come utilizzare il metodo getBasePlaceholder della classe Shape per accedere ai segnaposto della forma e ottenere gli effetti di animazione applicati alla forma piè di pagina, inclusi quelli ereditati dai segnaposto situati su layout e master.

var presentation = new aspose.slides.Presentation("sample.pptx");

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

// Ottiene gli effetti di animazione della forma sulla diapositiva normale.
var shape = slide.getShapes().get_Item(0);
var shapeEffects = slide.getTimeline().getMainSequence().getEffectsByShape(shape);

// Ottiene gli effetti di animazione del segnaposto sulla diapositiva layout.
var layoutShape = shape.getBasePlaceholder();
var layoutShapeEffects = slide.getLayoutSlide().getTimeline().getMainSequence().getEffectsByShape(layoutShape);

// Ottiene gli effetti di animazione del segnaposto sulla diapositiva master.
var masterShape = layoutShape.getBasePlaceholder();
var masterShapeEffects = slide.getLayoutSlide().getMasterSlide().getTimeline().getMainSequence().getEffectsByShape(masterShape);

console.log("Main sequence of shape effects:");
printEffects(masterShapeEffects);
printEffects(layoutShapeEffects);
printEffects(shapeEffects);

presentation.dispose();

function printEffects(effects) {
    for (const effect of effects) {
        console.log("Type:", effect.getType() + ", subtype:", effect.getSubtype());
    }
}

Output:

Main sequence of shape effects:
Type: 47, subtype: 2              // Vola, In basso
Type: 134, subtype: 45            // Dividi, VerticalIn
Type: 126, subtype: 22            // Barre casuali, Orizzontale

Modificare le proprietà di timing dell’effetto di animazione

Aspose.Slides per Node.js via Java consente di modificare le proprietà di Timing di un effetto di animazione.

Questo è il pannello Timing dell’animazione in Microsoft PowerPoint:

example1_image

Queste sono le corrispondenze tra il Timing di PowerPoint e le proprietà Effect.Timing:

L’elenco a discesa Start di PowerPoint corrisponde alla proprietà Effect.Timing.TriggerType.
Duration di PowerPoint corrisponde alla proprietà Effect.Timing.Duration. La durata di un’animazione (in secondi) è il tempo totale necessario per completare un ciclo.
Delay di PowerPoint corrisponde alla proprietà Effect.Timing.TriggerDelayTime.

Ecco come modificare le proprietà di Timing dell’effetto:

Applicare o ottenere l’effetto di animazione.
Impostare nuovi valori per le proprietà di Effect.Timing necessarie.
Salvare il file PPTX modificato.

Questo codice Javascript dimostra l’operazione:

// Istanzia una classe Presentation che rappresenta un file di presentazione.
var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Ottiene la sequenza principale della diapositiva.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Ottiene il primo effetto della sequenza principale.
    var effect = sequence.get_Item(0);
    // Modifica il TriggerType dell'effetto per avviarlo al clic
    effect.getTiming().setTriggerType(aspose.slides.EffectTriggerType.OnClick);
    // Modifica la durata dell'effetto
    effect.getTiming().setDuration(3.0);
    // Modifica il TriggerDelayTime dell'effetto
    effect.getTiming().setTriggerDelayTime(0.5);
    // Salva il file PPTX su disco
    pres.save("AnimExample_changed.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Suono dell’effetto di animazione

Aspose.Slides fornisce queste proprietà per lavorare con i suoni negli effetti di animazione:

Aggiungere suono all’effetto di animazione

Questo codice Javascript mostra come aggiungere un suono all’effetto di animazione e fermarlo quando inizia il successivo effetto:

var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Aggiunge audio alla collezione audio della presentazione
    var effectSound = pres.getAudios().addAudio(java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "sampleaudio.wav")));
    var firstSlide = pres.getSlides().get_Item(0);
    // Ottiene la sequenza principale della diapositiva.
    var sequence = firstSlide.getTimeline().getMainSequence();
    // Ottiene il primo effetto della sequenza principale
    var firstEffect = sequence.get_Item(0);
    // Verifica l'effetto per "Nessun suono"
    if ((!firstEffect.getStopPreviousSound()) && (firstEffect.getSound() == null)) {
        // Aggiunge il suono al primo effetto
        firstEffect.setSound(effectSound);
    }
    // Ottiene la prima sequenza interattiva della diapositiva.
    var interactiveSequence = firstSlide.getTimeline().getInteractiveSequences().get_Item(0);
    // Imposta il flag "Stop previous sound" dell'effetto
    interactiveSequence.get_Item(0).setStopPreviousSound(true);
    // Scrive il file PPTX su disco
    pres.save("AnimExample_Sound_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Estrarre il suono dell’effetto di animazione

Creare un’istanza della classe Presentation.
Ottenere un riferimento a una diapositiva tramite il suo indice.
Ottenere la sequenza principale di effetti.
Estrarre il setSound(IAudio value) incorporato in ciascun effetto di animazione.

Questo codice Javascript mostra come estrarre il suono incorporato in un effetto di animazione:

// Istanzia una classe Presentation che rappresenta un file di presentazione.
var presentation = new aspose.slides.Presentation("EffectSound.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);
    // Ottiene la sequenza principale della diapositiva.
    var sequence = slide.getTimeline().getMainSequence();
    for (var i = 0; i < sequence.getCount(); i++) {
        var effect = sequence.get_Item(i);
        if (effect.getSound() == null) {
            continue;
        }
        // Estrae il suono dell'effetto in un array di byte
        var audio = effect.getSound().getBinaryData();
    }
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

Dopo l’animazione

Aspose.Slides per Node.js via Java consente di modificare la proprietà “After animation” di un effetto di animazione.

Questo è il pannello dell’effetto di animazione e il menu esteso in Microsoft PowerPoint:

example1_image

L’elenco a discesa After animation di PowerPoint corrisponde a queste proprietà:

Metodo setAfterAnimationType(int value) che descrive il tipo di “After animation”;
- More Colors di PowerPoint corrisponde al tipo AfterAnimationType.Color;
- Don’t Dim di PowerPoint corrisponde al tipo AfterAnimationType.DoNotDim (tipo predefinito);
- Hide After Animation di PowerPoint corrisponde al tipo AfterAnimationType.HideAfterAnimation;
- Hide on Next Mouse Click di PowerPoint corrisponde al tipo AfterAnimationType.HideOnNextMouseClick;
Metodo setAfterAnimationColor(IColorFormat value) che definisce un formato colore “after animation”. Questo metodo funziona in combinazione con il tipo AfterAnimationType.Color. Se si cambia il tipo, il colore “after animation” verrà cancellato.

Questo codice Javascript mostra come modificare un effetto “after animation”:

// Istanzia una classe Presentation che rappresenta un file di presentazione
var pres = new aspose.slides.Presentation("AnimImage_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Ottiene il primo effetto della sequenza principale
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // Cambia il tipo di animazione successiva a Color
    firstEffect.setAfterAnimationType(aspose.slides.AfterAnimationType.Color);
    // Imposta il colore di dim dell'animazione successiva
    firstEffect.getAfterAnimationColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    // Scrive il file PPTX su disco
    pres.save("AnimImage_AfterAnimation.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Animare il testo

Aspose.Slides fornisce queste proprietà per gestire il blocco Animate text di un effetto di animazione:

setAnimateTextType(int value) che descrive il tipo di animazione del testo dell’effetto. Il testo della forma può essere animato:
- Tutto in una volta (AnimateTextType.AllAtOnce)
- Parola per parola (AnimateTextType.ByWord)
- Letterra per lettera (AnimateTextType.ByLetter)
setDelayBetweenTextParts(float value) imposta un ritardo tra le parti di testo animate (parole o lettere). Un valore positivo specifica la percentuale della durata dell’effetto; un valore negativo specifica il ritardo in secondi.

Ecco come è possibile modificare le proprietà “Animate text” dell’effetto:

Applicare o ottenere l’effetto di animazione.
Impostare il metodo setBuildType(int value) su BuildType.AsOneObject per disattivare la modalità By Paragraphs.
Impostare nuovi valori per le proprietà setAnimateTextType(int value) e setDelayBetweenTextParts(float value).
Salvare il file PPTX modificato.

Questo codice Javascript dimostra l’operazione:

// Istanzia una classe Presentation che rappresenta un file di presentazione.
var pres = new aspose.slides.Presentation("AnimTextBox_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Ottiene il primo effetto della sequenza principale
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // Cambia il tipo di animazione testo dell'effetto a "As One Object"
    firstEffect.getTextAnimation().setBuildType(aspose.slides.BuildType.AsOneObject);
    // Cambia il tipo di animazione testo dell'effetto a "By word"
    firstEffect.setAnimateTextType(aspose.slides.AnimateTextType.ByWord);
    // Imposta il ritardo tra le parole al 20% della durata dell'effetto
    firstEffect.setDelayBetweenTextParts(20.0);
    // Scrive il file PPTX su disco
    pres.save("AnimTextBox_AnimateText.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

Come posso assicurarmi che le animazioni vengano preservate quando pubblico la presentazione sul web?

Esporta in HTML5 e abilita le opzioni responsabili delle animazioni di shape e di transition. L’HTML semplice non riproduce le animazioni delle diapositive, mentre l’HTML5 lo fa.

In che modo la modifica dell’ordine Z (ordine dei livelli) delle forme influisce sull’animazione?

L’ordine di animazione e l’ordine di disegno sono indipendenti: un effetto controlla il timing e il tipo di comparsa/scomparsa, mentre lo z-order determina quale elemento copre quale. Il risultato visibile è definito dalla loro combinazione. (Questo è il comportamento generale di PowerPoint; il modello di effetti‑e‑forme di Aspose.Slides segue la stessa logica.)

Ci sono limitazioni nella conversione delle animazioni in video per alcuni effetti?

In generale, le animazioni sono supportate, ma casi rari o effetti specifici potrebbero essere renderizzati diversamente. Si consiglia di testare con gli effetti utilizzati e con la versione della libreria.

Ottieni Proprietà Effettive della Forma dalle Presentazioni in JavaScript Crea miniature delle forme di presentazione in JavaScript