PathAnimation: анимация по произвольной траектории

Введение

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

Концепция

Траектория задаётся через объект Path, состоящий из последовательности сегментов — PathLine (прямая линия к точке), PathQuad/PathCubic (квадратичная/кубическая кривая Безье с одной или двумя контрольными точками), PathArc (дуга окружности) — PathAnimation затем анимирует движение элемента вдоль этого пути за заданное время, опционально также поворачивая элемент в соответствии с направлением движения по кривой (orientation).

Пример кода: PathAnimation

import QtQuick

Item {
    width: 400
    height: 400

    Rectangle {
        id: movingItem
        width: 30
        height: 30
        radius: 15
        color: "#dc2626"
    }

    // Описание дугообразной траектории "взлёта" уведомления —
    // от нижней части экрана к верхней с изгибом в сторону
    Path {
        id: flightPath
        startX: 50; startY: 350

        PathCubic {
            x: 350; y: 50
            control1X: 50; control1Y: 50    // первая контрольная точка тянет начало кривой вверх
            control2X: 350; control2Y: 350  // вторая контрольная точка тянет конец кривой влево-вниз
        }
    }

    PathAnimation {
        id: flightAnimation
        target: movingItem
        path: flightPath
        duration: 1200
        easing.type: Easing.InOutQuad
        orientationEntryDuration: 200 // плавный, а не мгновенный поворот в начале движения
    }

    MouseArea {
        anchors.fill: parent
        onClicked: flightAnimation.start()
    }
}

// Круговая траектория через PathArc — типичный паттерн для орбитального движения
Path {
    id: circularPath
    startX: 200; startY: 100

    PathArc {
        x: 200; y: 300
        radiusX: 100; radiusY: 100
        direction: PathArc.Clockwise
    }
    PathArc {
        x: 200; y: 100
        radiusX: 100; radiusY: 100
        direction: PathArc.Clockwise
    }
}

PathAnimation {
    target: orbitingItem
    path: circularPath
    duration: 3000
    loops: Animation.Infinite // непрерывное круговое движение без остановки
}

Пояснения к коду

flightPath определяет S-образную кубическую кривую Безье от нижнего левого угла к верхнему правому — две контрольные точки (control1X/Y, control2X/Y) определяют форму изгиба кривой, не являясь сами по себе точками, через которые кривая обязательно проходит, а скорее «магнитами», притягивающими траекторию в свою сторону — подбор этих точек требует некоторого экспериментирования для достижения визуально желаемой формы кривой. PathAnimation с orientationEntryDuration показывает дополнительную возможность — постепенный, а не мгновенный поворот анимируемого элемента в направлении движения по кривой в момент начала анимации, что выглядит более плавно, чем резкий мгновенный разворот.

Круговая траектория через два последовательных PathArc (каждый — полукруг) формирует полную окружность, по которой элемент движется бесконечно (loops: Animation.Infinite) — этот паттерн типичен для декоративных, постоянно повторяющихся орбитальных анимаций (вращающийся индикатор загрузки, орбитальное движение элемента вокруг центра).

Подводные камни

• Подбор контрольных точек кривой Безье для достижения конкретной визуально желаемой формы траектории требует экспериментирования методом проб, не существует прямого, аналитического способа вычислить «правильные» значения контрольных точек для произвольной желаемой формы — для сложных, специфичных траекторий разработчики часто используют визуальные инструменты редактирования кривых (например, Qt Design Studio) вместо ручного подбора координат напрямую в коде.
• PathAnimation определяет только саму траекторию движения, но не синхронизирует с ней независимо анимируемые другие свойства (например, прозрачность, появляющуюся и исчезающую по ходу движения) — для комбинированных эффектов (движение по дуге + изменение прозрачности) нужна отдельная параллельная анимация прозрачности через NumberAnimation внутри ParallelAnimation, синхронизированная по времени с PathAnimation, а не единый встроенный механизм.
• Бесконечно повторяющаяся PathAnimation (loops: Animation.Infinite), запущенная, но не остановленная при скрытии или удалении соответствующего экрана/компонента, продолжает выполняться в фоне, потребляя ресурсы на постоянный пересчёт позиции и перерисовку, даже когда анимируемый элемент не виден пользователю — стоит явно останавливать такие бесконечные анимации при скрытии содержащего их экрана (через Component.onDestruction или явную логику видимости), а не предполагать автоматическую остановку.
• Производительность сложных, многосегментных путей с большим количеством PathCubic/PathArc сегментов при частом запуске анимации (например, множественные одновременные летящие по сложной траектории элементы) может заметно нагружать вычисление позиции на каждом кадре — для большого числа одновременных анимаций по сложным путям стоит профилировать производительность отдельно от простых, линейных или эллиптических траекторий.