Анимация фигур

Анимации — это визуальные эффекты, которые можно применять к тексту, изображениям, фигурам или диаграммам. Они оживляют презентации и их составляющие.

Почему использовать анимацию в презентациях?

Используя анимации, вы можете

контролировать поток информации
подчёркивать важные моменты
повышать интерес или вовлечённость аудитории
делать содержимое более читаемым, усваиваемым или обрабатываемым
привлекать внимание читателей или зрителей к важным частям презентации

PowerPoint предоставляет множество параметров и инструментов для анимаций и анимационных эффектов в категориях вход, выход, выделение и траектории движения.

Анимации в Aspose.Slides

Aspose.Slides предоставляет классы и типы, необходимые для работы с анимациями, в пространстве имён Aspose.Slides.Animation,
Aspose.Slides предоставляет более 150 анимационных эффектов в перечислении EffectType. Эти эффекты по сути такие же (или эквивалентные) эффектам, используемым в PowerPoint.

Применить анимацию к TextBox

Aspose.Slides for Node.js via Java позволяет применять анимацию к тексту в фигуре.

Создайте экземпляр класса Presentation.
Получите ссылку на слайд по его индексу.
Добавьте rectangle AutoShape.
Добавьте текст с помощью AutoShape.addTextFrame.
Получите основную последовательность эффектов.
Добавьте анимационный эффект к AutoShape.
Вызовите метод TextAnimation.setBuildType со значением из перечисления BuildType.
Запишите презентацию на диск в формате PPTX.

Этот код Javascript демонстрирует, как применить эффект Fade к AutoShape и установить анимацию текста со значением By 1st Level Paragraphs:

// Создает экземпляр класса презентации, представляющего файл презентации.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Добавляет новую автофигуру с текстом
    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");
    // Получает основную последовательность слайда.
    var sequence = sld.getTimeline().getMainSequence();
    // Добавляет эффект анимации Fade к фигуре
    var effect = sequence.addEffect(autoShape, aspose.slides.EffectType.Fade, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Анимирует текст фигуры по абзацам первого уровня
    effect.getTextAnimation().setBuildType(aspose.slides.BuildType.ByLevelParagraphs1);
    // Сохраняет файл PPTX на диск
    pres.save(path + "AnimText_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Помимо применения анимаций к тексту, вы также можете применять анимации к отдельному Paragraph. Смотрите Animated Text.

Применить анимацию к PictureFrame

Создайте экземпляр класса Presentation.
Получите ссылку на слайд по его индексу.
Добавьте или получите PictureFrame на слайде.
Получите основную последовательность эффектов.
Добавьте анимационный эффект к PictureFrame.
Запишите презентацию на диск в формате PPTX.

Этот код Javascript демонстрирует, как применить эффект Fly к кадру изображения:

// Создает экземпляр класса презентации, представляющего файл презентации.
var pres = new aspose.slides.Presentation();
try {
    // Загружает изображение, которое будет добавлено в коллекцию изображений презентации
    var picture;
    var image = aspose.slides.Images.fromFile("aspose-logo.jpg");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    // Добавляет кадр изображения на слайд
    var picFrame = pres.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 50, 100, 100, picture);
    // Получает основную последовательность слайда.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Добавляет анимацию Fly слева к кадру изображения
    var effect = sequence.addEffect(picFrame, aspose.slides.EffectType.Fly, aspose.slides.EffectSubtype.Left, aspose.slides.EffectTriggerType.OnClick);
    // Сохраняет файл PPTX на диск
    pres.save(path + "AnimImage_out.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Применить анимацию к Shape

Создайте экземпляр класса Presentation.
Получите ссылку на слайд по его индексу.
Добавьте rectangle AutoShape.
Добавьте Bevel AutoShape (при щелчке по этому объекту анимация будет воспроизводиться).
Создайте последовательность эффектов для bevel фигуры.
Создайте пользовательский UserPath.
Добавьте команды перемещения к UserPath.
Запишите презентацию на диск в формате PPTX.

Этот код Javascript демонстрирует, как применить эффект PathFootball (путь футбола) к фигуре:

// Создает экземпляр класса Presentation, представляющего файл PPTX.
var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    // Создает эффект PathFootball для существующей фигуры с нуля.
    var ashp = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 150, 250, 25);
    ashp.addTextFrame("Animated TextBox");
    // Добавляет анимационный эффект PathFootBall
    pres.getSlides().get_Item(0).getTimeline().getMainSequence().addEffect(ashp, aspose.slides.EffectType.PathFootball, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.AfterPrevious);
    // Создает некоторую кнопку.
    var shapeTrigger = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Bevel, 10, 10, 20, 20);
    // Создает последовательность эффектов для этой кнопки.
    var seqInter = pres.getSlides().get_Item(0).getTimeline().getInteractiveSequences().add(shapeTrigger);
    // Создает пользовательский путь. Наш объект будет перемещён только после щелчка по кнопке.
    var fxUserPath = seqInter.addEffect(ashp, aspose.slides.EffectType.PathUser, aspose.slides.EffectSubtype.None, aspose.slides.EffectTriggerType.OnClick);
    // Добавляет команды перемещения, так как созданный путь пуст.
    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 на диск
    pres.save("AnimExample_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Получить анимационные эффекты, применённые к Shape

Следующие примеры показывают, как использовать метод getEffectsByShape из класса Sequence для получения всех анимационных эффектов, применённых к фигуре.

Пример 1: Получить анимационные эффекты, применённые к фигуре на обычном слайде

Ранее вы узнали, как добавлять анимационные эффекты к фигурам в презентациях PowerPoint. Следующий образец кода показывает, как получить эффекты, применённые к первой фигуре на первом обычном слайде в презентации AnimExample_out.pptx.

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

    // Получает основную последовательность анимации слайда.
    var sequence = firstSlide.getTimeline().getMainSequence();

    // Получает первую фигуру на первом слайде.
    var shape = firstSlide.getShapes().get_Item(0);

    // Получает анимационные эффекты, применённые к фигуре.
    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();
    }
}

Пример 2: Получить все анимационные эффекты, включая унаследованные из заполнителей

Если фигура на обычном слайде имеет заполнители, расположенные на слайде‑макете и/или слайде‑образце, и к этим заполнителям добавлены анимационные эффекты, то все эффекты фигуры будут воспроизводиться во время показа, включая унаследованные из заполнителей.

Предположим, что у нас есть файл презентации PowerPoint sample.pptx с одним слайдом, содержащим только фигурку нижнего колонтитула с текстом «Made with Aspose.Slides» и к ней применён эффект Random Bars.

Эффект анимации фигуры на слайде

Предположим также, что эффект Split применён к заполнителю нижнего колонтитула на слайде‑макете.

Эффект анимации фигуры на макете

И, наконец, эффект Fly In применён к заполнителю нижнего колонтитула на слайде‑образце.

Эффект анимации фигуры на образце

Следующий образец кода показывает, как использовать метод getBasePlaceholder из класса Shape для доступа к заполнителям фигуры и получения анимационных эффектов, применённых к фигуре нижнего колонтитула, включая унаследованные из заполнителей, расположенных на макете и образце.

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

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

// Получить анимационные эффекты фигуры на обычном слайде.
var shape = slide.getShapes().get_Item(0);
var shapeEffects = slide.getTimeline().getMainSequence().getEffectsByShape(shape);

// Получить анимационные эффекты заполнителя на слайде‑макете.
var layoutShape = shape.getBasePlaceholder();
var layoutShapeEffects = slide.getLayoutSlide().getTimeline().getMainSequence().getEffectsByShape(layoutShape);

// Получить анимационные эффекты заполнителя на мастер‑слайде.
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              // Полёт, снизу
Type: 134, subtype: 45            // Разделение, вертикальный вход
Type: 126, subtype: 22            // Случайные полосы, горизонтально

Изменить свойства тайминга анимационного эффекта

Aspose.Slides for Node.js via Java позволяет изменять свойства тайминга анимационного эффекта.

Это панель Animation Timing в Microsoft PowerPoint:

example1_image

Это соответствия между PowerPoint Timing и свойствами Effect.Timing:

Выпадающий список PowerPoint Timing Start соответствует свойству Effect.Timing.TriggerType.
PowerPoint Timing Duration соответствует свойству Effect.Timing.Duration. Длительность анимации (в секундах) — это общее время, необходимое для завершения одного цикла.
PowerPoint Timing Delay соответствует свойству Effect.Timing.TriggerDelayTime.

Как изменить свойства тайминга эффекта:

Apply или получите анимационный эффект.
Установите новые значения для нужных вам свойств Effect.Timing.
Сохраните изменённый файл PPTX.

Этот код Javascript демонстрирует операцию:

// Создает экземпляр класса презентации, представляющего файл презентации.
var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Получает основную последовательность слайда.
    var sequence = pres.getSlides().get_Item(0).getTimeline().getMainSequence();
    // Получает первый эффект основной последовательности.
    var effect = sequence.get_Item(0);
    // Изменяет TriggerType эффекта на запуск по клику
    effect.getTiming().setTriggerType(aspose.slides.EffectTriggerType.OnClick);
    // Изменяет длительность эффекта
    effect.getTiming().setDuration(3.0);
    // Изменяет задержку запуска эффекта
    effect.getTiming().setTriggerDelayTime(0.5);
    // Сохраняет файл PPTX на диск
    pres.save("AnimExample_changed.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Animation Effect Sound

Aspose.Slides предоставляет следующие свойства для работы со звуками в анимационных эффектах:

Add Animation Effect Sound

Этот код Javascript демонстрирует, как добавить звук к анимационному эффекту и остановить его, когда начинается следующий эффект:

var pres = new aspose.slides.Presentation("AnimExample_out.pptx");
try {
    // Добавляет аудио в коллекцию аудио презентации
    var effectSound = pres.getAudios().addAudio(java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "sampleaudio.wav")));
    var firstSlide = pres.getSlides().get_Item(0);
    // Получает основную последовательность слайда.
    var sequence = firstSlide.getTimeline().getMainSequence();
    // Получает первый эффект основной последовательности
    var firstEffect = sequence.get_Item(0);
    // Проверяет эффект на отсутствие звука
    if ((!firstEffect.getStopPreviousSound()) && (firstEffect.getSound() == null)) {
        // Добавляет звук к первому эффекту
        firstEffect.setSound(effectSound);
    }
    // Получает первую интерактивную последовательность слайда.
    var interactiveSequence = firstSlide.getTimeline().getInteractiveSequences().get_Item(0);
    // Устанавливает флаг эффекта "Stop previous sound"
    interactiveSequence.get_Item(0).setStopPreviousSound(true);
    // Записывает файл PPTX на диск
    pres.save("AnimExample_Sound_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Extract Animation Effect Sound

Создайте экземпляр класса Presentation.
Получите ссылку на слайд по его индексу.
Получите основную последовательность эффектов.
Извлеките setSound(IAudio value) , встроенный в каждый анимационный эффект.

Этот код Javascript демонстрирует, как извлечь звук, встроенный в анимационный эффект:

// Создает экземпляр класса презентации, представляющего файл презентации.
var presentation = new aspose.slides.Presentation("EffectSound.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);
    // Получает основную последовательность слайда.
    var sequence = slide.getTimeline().getMainSequence();
    for (var i = 0; i < sequence.getCount(); i++) {
        var effect = sequence.get_Item(i);
        if (effect.getSound() == null) {
            continue;
        }
        // Извлекает звук эффекта в виде байтового массива
        var audio = effect.getSound().getBinaryData();
    }
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

После анимации

Aspose.Slides for Node.js via Java позволяет изменять свойство After animation анимационного эффекта.

Это панель Animation Effect и расширенное меню в Microsoft PowerPoint:

example1_image

Выпадающий список PowerPoint Effect After animation соответствует следующим свойствам:

Метод setAfterAnimationType(int value) описывает тип After animation;
- Пункт More Colors соответствует типу AfterAnimationType.Color;
- Пункт Don’t Dim соответствует типу AfterAnimationType.DoNotDim (тип After animation по умолчанию);
- Пункт Hide After Animation соответствует типу AfterAnimationType.HideAfterAnimation;
- Пункт Hide on Next Mouse Click соответствует типу AfterAnimationType.HideOnNextMouseClick;
Метод setAfterAnimationColor(IColorFormat value) задаёт формат цвета After animation. Этот метод работает совместно с типом AfterAnimationType.Color. При смене типа цвет After animation будет очищен.

Этот код Javascript показывает, как изменить эффект After animation:

// Создает экземпляр класса презентации, представляющего файл презентации
var pres = new aspose.slides.Presentation("AnimImage_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Получает первый эффект основной последовательности
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // Изменяет тип after animation на Color
    firstEffect.setAfterAnimationType(aspose.slides.AfterAnimationType.Color);
    // Устанавливает цвет after animation
    firstEffect.getAfterAnimationColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    // Сохраняет файл PPTX на диск
    pres.save("AnimImage_AfterAnimation.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Анимировать текст

Aspose.Slides предоставляет следующие свойства для работы с блоком Animate text анимационного эффекта:

setAnimateTextType(int value) определяет тип анимированного текста эффекта. Текст фигуры может анимироваться:
- Все сразу (AnimateTextType.AllAtOnce тип)
- По словам (AnimateTextType.ByWord тип)
- По буквам (AnimateTextType.ByLetter тип)
setDelayBetweenTextParts(float value) задаёт задержку между анимированными частями текста (словами или буквами). Положительное значение указывает процент от длительности эффекта. Отрицательное значение указывает задержку в секундах.

Как изменить свойства Animate text эффекта:

Apply или получите анимационный эффект.
Установите метод setBuildType(int value) в значение BuildType.AsOneObject, чтобы отключить режим анимации By Paragraphs.
Установите новые значения для свойств setAnimateTextType(int value) и setDelayBetweenTextParts(float value).
Сохраните изменённый файл PPTX.

Этот код Javascript демонстрирует операцию:

// Создает экземпляр класса презентации, представляющего файл презентации.
var pres = new aspose.slides.Presentation("AnimTextBox_out.pptx");
try {
    var firstSlide = pres.getSlides().get_Item(0);
    // Получает первый эффект основной последовательности
    var firstEffect = firstSlide.getTimeline().getMainSequence().get_Item(0);
    // Изменяет тип анимации текста эффекта на "As One Object"
    firstEffect.getTextAnimation().setBuildType(aspose.slides.BuildType.AsOneObject);
    // Изменяет тип анимации текста эффекта на "By word"
    firstEffect.setAnimateTextType(aspose.slides.AnimateTextType.ByWord);
    // Устанавливает задержку между словами в 20% от длительности эффекта
    firstEffect.setDelayBetweenTextParts(20.0);
    // Записывает файл PPTX на диск
    pres.save("AnimTextBox_AnimateText.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

Как убедиться, что анимации сохраняются при публикации презентации в веб?

Export to HTML5 и включите options для анимаций shape и transition. Обычный HTML не воспроизводит анимацию слайдов, тогда как HTML5 — воспроизводит.

Как изменение порядка слоёв (z-order) фигур влияет на анимацию?

Анимация и порядок отрисовки независимы: эффект управляет таймингом и типом появления/исчезновения, а z-order определяет, что покрывает что. Видимый результат формируется их комбинацией. (Это общее поведение PowerPoint; модель Aspose.Slides effects‑and‑shapes следует той же логике.)

Есть ли ограничения при конвертации анимаций в видео для некоторых эффектов?

В общем случае animations are supported, но редкие случаи или специфические эффекты могут отображаться иначе. Рекомендуется протестировать используемые эффекты и версию библиотеки.

Просмотрщик презентаций Свойства презентации