JavaScript Kullanarak Sunumlarda Şekil Animasyonları Uygulama

Giriş

Animasyonlar, metinlere, görüntülere, şekillere veya grafikler uygulanabilen görsel efektlerdir. Sunumlara veya bileşenlerine yaşam katar.

Neden Sunumlarda Animasyon Kullanılır?

bilgi akışını kontrol et
önemli noktaları vurgula
izleyicilerinizin ilgisini veya katılımını artır
içeriği okumayı, özümsemeyi veya işlemeyi kolaylaştır
okuyucularınızın veya izleyicilerinizin sunumdaki önemli bölümlere dikkatini çek

PowerPoint, entrance, exit, emphasis ve motion paths kategorilerinde animasyonlar ve animasyon efektleri için birçok seçenek ve araç sunar.

Aspose.Slides’ta Animasyonlar

Aspose.Slides, animasyonlarla çalışmak için gereken sınıfları ve türleri Aspose.Slides.Animation ad alanı altında sağlar,
Aspose.Slides, EffectType sayenumerasyonunda 150’den fazla animasyon efekti sağlar. Bu efektler temelde PowerPoint’te kullanılan aynı (veya eşdeğer) efektlerdir.

Metin Kutusuna Animasyon Uygulama

Aspose.Slides for Node.js via Java, bir şeklin içindeki metne animasyon uygulamanızı sağlar.

Bir Presentation sınıfının bir örneğini oluşturun.
İndeks aracılığıyla bir slayt referansı edinin.
rectangle bir AutoShape ekleyin.
AutoShape.addTextFrame kullanarak metin ekleyin.
Efektlerin ana sırasını alın.
AutoShape bir animasyon efekti ekleyin.
TextAnimation.setBuildType metodunu BuildType sayenumerasyonundan gelen değerle çağırın.
Sunumu bir PPTX dosyası olarak diske yazın.

Bu Javascript kodu, Fade efektini AutoShape’e nasıl uygulayacağınızı ve metin animasyonunu By 1st Level Paragraphs değerine nasıl ayarlayacağınızı gösterir:

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Metinle yeni AutoShape ekler
    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");
    // Slaydın ana sırasını alır.
    var sequence = sld.getTimeline().getMainSequence();
    // Şekle Fade animasyon efekti ekler
    var effect = sequence.addEffect(autoShape, aspose.slides.EffectType.Fade, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Şekil metnini birinci seviye paragraflara göre canlandırır
    effect.getTextAnimation().setBuildType(aspose.slides.BuildType.ByLevelParagraphs1);
    // PPTX dosyasını diske kaydet
    pres.save(path + "AnimText_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Metne animasyon uygulamanın yanı sıra tek bir Paragraf üzerine de animasyon uygulayabilirsiniz. Bakın Animasyonlu Metin.

PictureFrame’e Animasyon Uygulama

Bir Presentation sınıfının bir örneğini oluşturun.
İndeks aracılığıyla bir slayt referansı edinin.
Slayta bir PictureFrame ekleyin veya edinin.
Efektlerin ana sırasını alın.
PictureFrame bir animasyon efekti ekleyin.
Sunumu bir PPTX dosyası olarak diske yazın.

Bu Javascript kodu, Fly efektini bir resim çerçevesine nasıl uygulayacağınızı gösterir:

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir.
var pres = new aspose.slides.Presentation();
try {
    // Sunumun görüntü koleksiyonuna eklenecek resmi yükler
    var picture;
    var image = aspose.slides.Images.fromFile("aspose-logo.jpg");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    // Slayta resim çerçevesi ekler
    var picFrame = pres.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 50, 100, 100, picture);
    // Slaydın ana sırasını alır.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Resim çerçevesine Soldan Uçuş animasyon efekti ekler
    var effect = sequence.addEffect(picFrame, aspose.slides.EffectType.Fly, aspose.slides.EffectSubtype.Left, aspose.slides.EffectTriggerType.OnClick);
    // PPTX dosyasını diske kaydeder
    pres.save(path + "AnimImage_out.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Şekle Animasyon Uygulama

Presentation sınıfının bir örneğini oluşturun.
İndeks aracılığıyla bir slayt referansı edinin.
rectangle bir AutoShape ekleyin.
Bevel bir AutoShape ekleyin (bu nesne tıklandığında animasyon oynatılır).
Bevel şekli üzerinde bir efekt sırası oluşturun.
Özel bir UserPath oluşturun.
UserPath‘e hareket komutları ekleyin.
Sunumu bir PPTX dosyası olarak diske yazın.

Bu Javascript kodu, bir şekle PathFootball (yol futbolu) efektini nasıl uygulayacağınızı gösterir:

// PPTX dosyasını temsil eden bir Presentation sınıfını örnekleştirir.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Mevcut şekil için sıfırdan PathFootball efekti oluşturur.
    var ashp = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 150, 250, 25);
    ashp.addTextFrame("Animated TextBox");
    // PathFootBall animasyon efektini ekler
    pres.getSlides().get_Item(0).getTimeline().getMainSequence().addEffect(ashp, aspose.slides.EffectType.PathFootball, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.AfterPrevious);
    // Bir çeşit "button" oluşturur.
    var shapeTrigger = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Bevel, 10, 10, 20, 20);
    // Bu buton için bir efekt sırası oluşturur.
    var seqInter = pres.getSlides().get_Item(0).getTimeline().getInteractiveSequences().add(shapeTrigger);
    // Özel bir kullanıcı yolu oluşturur. Nesnemiz yalnızca butona tıklandıktan sonra hareket ettirilecektir.
    var fxUserPath = seqInter.addEffect(ashp, aspose.slides.EffectType.PathUser, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Oluşturulan yol boş olduğundan hareket komutları ekler
    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);
    // PPTX dosyasını diske yazar
    pres.save("AnimExample_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Şekle Uygulanan Animasyon Efektlerini Al

Aşağıdaki örnekler, bir şekle uygulanan tüm animasyon efektlerini elde etmek için Sequence sınıfından getEffectsByShape metodunun nasıl kullanılacağını gösterir.

Örnek 1: Normal bir slayt üzerindeki bir şekle uygulanan animasyon efektlerini alın

Önceden, PowerPoint sunumlarındaki şekillere animasyon efektleri eklemeyi öğrenmiştiniz. Aşağıdaki örnek kod, AnimExample_out.pptx sunumunda ilk normal slaydın ilk şekline uygulanan efektleri nasıl alacağınızı gösterir:

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

    // Slaydın ana animasyon sırasını alır.
    var sequence = firstSlide.getTimeline().getMainSequence();

    // İlk slayttaki ilk şekli alır.
    var shape = firstSlide.getShapes().get_Item(0);

    // Şekle uygulanan animasyon efektlerini alır.
    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();
    }
}

Örnek 2: Yer tutuculardan miras alınanlar dahil tüm animasyon efektlerini alın

Normal bir slayttaki bir şeklin, düzen slaytında ve/veya ana slaytta yer tutucuları varsa ve bu yer tutuculara animasyon efektleri eklenmişse, o zaman şeklin tüm efektleri slayt gösterisi sırasında oynatılacak, yer tutuculardan miras alınanlar dahil.

Diyelim ki sample.pptx adlı bir PowerPoint sunum dosyamız var; tek bir slaytı var ve sadece altbilgi şeklinde “Made with Aspose.Slides” metni bulunuyor ve şekle Random Bars efekti uygulanmış.

Slayt şekil animasyon efekti

Ayrıca, Split efektinin layout slaydındaki altbilgi yer tutucusuna uygulandığını varsayalım.

Düzen şekil animasyon efekti

Son olarak, Fly In efektinin master slaydındaki altbilgi yer tutucusuna uygulandığını varsayalım.

Ana slayt şekil animasyon efekti

Aşağıdaki örnek kod, Shape sınıfından getBasePlaceholder metodunu kullanarak şekil yer tutucularına erişmeyi ve altbilgi şekline uygulanan animasyon efektlerini, düzen ve ana slaytlardaki yer tutuculardan miras alınanlar dahil, almayı gösterir:

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

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

// Normal slaydaki şeklin animasyon efektlerini al.
var shape = slide.getShapes().get_Item(0);
var shapeEffects = slide.getTimeline().getMainSequence().getEffectsByShape(shape);

// Düzen slaydındaki yer tutucunun animasyon efektlerini al.
var layoutShape = shape.getBasePlaceholder();
var layoutShapeEffects = slide.getLayoutSlide().getTimeline().getMainSequence().getEffectsByShape(layoutShape);

// Ana slaydındaki yer tutucunun animasyon efektlerini al.
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              // Uç, Alt
Type: 134, subtype: 45            // Böl, Dikeyİçeri
Type: 126, subtype: 22            // Rastgele Çubuklar, Yatay

Animasyon Efekti Zamanlama Özelliklerini Değiştir

Aspose.Slides for Node.js via Java, bir animasyon efektinin Zamanlama özelliklerini değiştirmenizi sağlar.

Bu, Microsoft PowerPoint’teki Animasyon Zamanlama panelidir:

örnek1_resim

PowerPoint Zamanlama ile Effect.Timing özellikleri arasındaki eşleşmeler şunlardır:

PowerPoint Zamanlama Start açılır listesi, Effect.Timing.TriggerType özelliğiyle eşleşir.
PowerPoint Zamanlama Duration, Effect.Timing.Duration özelliğiyle eşleşir. Bir animasyonun (saniye cinsinden) süresi, bir döngünün tamamlanması için geçen toplam süredir.
PowerPoint Zamanlama Delay, Effect.Timing.TriggerDelayTime özelliğiyle eşleşir.

Efekt Zamanlama özelliklerini nasıl değiştirirsiniz:

Uygula ya da animasyon efektini alın.
İhtiyacınız olan Effect.Timing özellikleri için yeni değerler ayarlayın.
Değiştirilmiş PPTX dosyasını kaydedin.

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir.
var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Slaydın ana sırasını alır.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Ana sıranın ilk efektini alır.
    var effect = sequence.get_Item(0);
    // Efektin TriggerType'ını tıklamayla başlatacak şekilde değiştirir
    effect.getTiming().setTriggerType(aspose.slides.EffectTriggerType.OnClick);
    // Efekt süresini değiştirir
    effect.getTiming().setDuration(3.0);
    // Efektin TriggerDelayTime'ını değiştirir
    effect.getTiming().setTriggerDelayTime(0.5);
    // PPTX dosyasını diske kaydeder
    pres.save("AnimExample_changed.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Animasyon Efekti Ses

Aspose.Slides, animasyon efektlerinde seslerle çalışmanıza izin veren bu özellikleri sağlar:

Animasyon Efekti Sesi Ekle

Bu Javascript kodu, bir animasyon efekti sesini nasıl ekleyeceğinizi ve bir sonraki efekt başladığında nasıl durduracağınızı gösterir:

var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Sunuma ses koleksiyonuna ses ekler
    var effectSound = pres.getAudios().addAudio(java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "sampleaudio.wav")));
    var firstSlide = pres.getSlides().get_Item(0);
    // Slaydın ana sırasını alır.
    var sequence = firstSlide.getTimeline().getMainSequence();
    // Ana sıranın ilk efektini alır
    var firstEffect = sequence.get_Item(0);
    // Efekti "Ses Yok" için kontrol eder
    if ((!firstEffect.getStopPreviousSound()) && (firstEffect.getSound() == null)) {
        // İlk efekt için ses ekler
        firstEffect.setSound(effectSound);
    }
    // Slaydın ilk etkileşimli sırasını alır.
    var interactiveSequence = firstSlide.getTimeline().getInteractiveSequences().get_Item(0);
    // Efektin "Önceki sesi durdur" bayrağını ayarlar
    interactiveSequence.get_Item(0).setStopPreviousSound(true);
    // PPTX dosyasını diske yazar
    pres.save("AnimExample_Sound_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Animasyon Efekti Sesini Çıkar

Presentation sınıfının bir örneğini oluşturun.
İndeks aracılığıyla bir slayt referansı edinin.
Efektlerin ana sırasını alın.
Her animasyon efektine gömülmüş setSound(IAudio value) metodunu çıkarın.

Bu Javascript kodu, bir animasyon efektine gömülü sesin nasıl çıkarılacağını gösterir:

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir.
var presentation = new aspose.slides.Presentation("EffectSound.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);
    // Slaydın ana sırasını alır.
    var sequence = slide.getTimeline().getMainSequence();
    for (var i = 0; i < sequence.getCount(); i++) {
        var effect = sequence.get_Item(i);
        if (effect.getSound() == null) {
            continue;
        }
        // Efekt sesini bayt dizisi olarak çıkarır
        var audio = effect.getSound().getBinaryData();
    }
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

Animasyondan Sonra

Aspose.Slides for Node.js via Java, bir animasyon efektinin After animation özelliğini değiştirmenizi sağlar.

Bu, Microsoft PowerPoint’teki Animasyon Efekti paneli ve genişletilmiş menüsüdür:

örnek1_resim

PowerPoint Effect After animation açılır listesi bu özelliklerle eşleşir:

setAfterAnimationType(int value) metodu, After animation tipini tanımlar;
- PowerPoint More Colors, AfterAnimationType.Color tipine karşılık gelir;
- PowerPoint Don’t Dim, AfterAnimationType.DoNotDim tipine karşılık gelir (varsayılan after animation tipi);
- PowerPoint Hide After Animation, AfterAnimationType.HideAfterAnimation tipine karşılık gelir;
- PowerPoint Hide on Next Mouse Click, AfterAnimationType.HideOnNextMouseClick tipine karşılık gelir;
setAfterAnimationColor(IColorFormat value) metodu, after animation renk formatını tanımlar. Bu metod, AfterAnimationType.Color tipiyle birlikte çalışır. Tipi başka bir şeye değiştirirseniz, after animation rengi temizlenir.

Bu Javascript kodu, bir after animation efektini nasıl değiştireceğinizi gösterir:

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir
var pres = new aspose.slides.Presentation("AnimImage_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Ana sıranın ilk efektini alır
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // After animation tipini Renk olarak değiştirir
    firstEffect.setAfterAnimationType(aspose.slides.AfterAnimationType.Color);
    // After animation kararma rengini ayarlar
    firstEffect.getAfterAnimationColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    // PPTX dosyasını diske yazar
    pres.save("AnimImage_AfterAnimation.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Metni Canlandır

Aspose.Slides, bir animasyon efektinin Animate text bloğuyla çalışmanıza izin veren bu özellikleri sağlar:

setAnimateTextType(int value) efekti için Animate text tipini tanımlar. Şekil metni şu şekilde animasyonlanabilir:
- Hepsi bir anda (AnimateTextType.AllAtOnce tipi)
- Kelime kelime (AnimateTextType.ByWord tipi)
- Harfe harfe (AnimateTextType.ByLetter tipi)
setDelayBetweenTextParts(float value) animasyonlu metin parçaları (kelimeler veya harfler) arasında bir gecikme belirler. Pozitif bir değer, efekt süresinin yüzdesini belirtir. Negatif bir değer, saniye cinsinden gecikmeyi belirtir.

Efekt Animate text özelliklerini nasıl değiştirirsiniz:

Uygula ya da animasyon efektini alın.
setBuildType(int value) metodunu BuildType.AsOneObject değerine ayarlayarak By Paragraphs animasyon modunu devre dışı bırakın.
Yeni değerleri setAnimateTextType(int value) ve setDelayBetweenTextParts(float value) özelliklerine ayarlayın.
Değiştirilmiş PPTX dosyasını kaydedin.

// Sunum dosyasını temsil eden bir sunum sınıfını örnekleştirir.
var pres = new aspose.slides.Presentation("AnimTextBox_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Ana sıranın ilk efektini alır
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // Efektin Metin animasyon tipini "Tek Nesne Olarak" değiştirir
    firstEffect.getTextAnimation().setBuildType(aspose.slides.BuildType.AsOneObject);
    // Efektin Metni Canlandırma tipini "Kelimeye göre" değiştirir
    firstEffect.setAnimateTextType(aspose.slides.AnimateTextType.ByWord);
    // Kelimeler arasındaki gecikmeyi efekt süresinin %20'si olarak ayarlar
    firstEffect.setDelayBetweenTextParts(20.0);
    // PPTX dosyasını diske yazar
    pres.save("AnimTextBox_AnimateText.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

Sunumu web’e yayınlarken animasyonların korunmasını nasıl sağlayabilirim?

HTML5’e Dönüştür ve animasyonlu şekiller (setanimateshapes) ve geçişler (setanimatetransitions) için sorumlu options ayarlarını etkinleştirin. Düz HTML slayt animasyonlarını oynatmaz, HTML5 ise oynatır.

Şekillerin z-order (katman sırası) değiştirilmesi animasyonu nasıl etkiler?

Animasyon ve çizim sırası bağımsızdır: bir efekt, görünürlük zamanlamasını ve tipini kontrol eder, z-order ise neyin neyi örteceğini belirler. Görünür sonuç, bunların birleşimiyle tanımlanır. (Bu, genel PowerPoint davranışıdır; Aspose.Slides efekt‑ve‑şekil modeli aynı mantığı izler.)

Belirli efektler için animasyonları videoya dönüştürürken sınırlamalar var mı?

Genel olarak, animasyonlar desteklenir, ancak nadir durumlarda veya belirli efektlerde farklı renderlanabilir. Kullandığınız efektleri ve kütüphane sürümünü test etmeniz önerilir.

JavaScript'te Sunumlardan Şekil Etkin Özelliklerini Alın JavaScript ile Sunum Şekillerinin Küçük Resimlerini Oluşturma