PyQt/PySide中实现可代码交互矢量动画的可行方案有哪些？

问题背景 #

用After Effects制作了动画，需要在PyQt/PySide中展示并通过代码交互（比如修改图层填充色），已尝试：

• QSvgRenderer：仅支持静态SVG，无法处理动画
• Qt.labs.lottieqt的QML实现：未能成功运行

以下是几种可行方案：

方案1：修复Qt.labs.lottieqt的QML使用问题 #

你的QML代码本身没问题，大概率是路径或PyQt/PySide加载方式出错，按以下步骤调整：

1. 修正路径问题 #

Windows路径需用双反斜杠或file:///前缀，比如：

source: "file:///C:/Users/name/Downloads/test_lottie.json"

或转义反斜杠：

source: "C:\\Users\\name\\Downloads\\test_lottie.json"

2. 用PyQt/PySide正确加载QML #

确保使用对应版本（Qt.labs.lottieqt要求Qt 5.15+），示例PySide6加载代码：

from PySide6.QtWidgets import QApplication
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QUrl
import sys

if __name__ == "__main__":
    app = QApplication(sys.argv)
    view = QQuickView()
    view.setSource(QUrl.fromLocalFile("your_animation.qml"))
    view.show()
    sys.exit(app.exec())

3. 实现属性交互 #

给LottieAnimation添加id，通过setProperty修改图层属性：

import QtQuick
import Qt.labs.lottieqt

Rectangle {
    width: 400
    height: 400
    color: "sky blue"

    LottieAnimation {
        id: lottieAnim
        anchors.fill: parent
        loops: 10
        quality: LottieAnimation.MediumQuality
        source: "file:///C:/Users/name/Downloads/test_lottie.json"
        autoPlay: true
    }

    Button {
        anchors.bottom: parent.bottom
        text: "切换为红色"
        onClicked: lottieAnim.setProperty("Shape Layer 1.Fill.Color", "#ff0000")
    }
}

注：需替换为你实际的图层名称和属性路径。

方案2：使用lottie-python库结合PyQt/PySide #

lottie-python可直接解析Lottie JSON，通过Qt渲染系统展示，支持属性修改：

1. 安装依赖 #

pip install lottie

2. 示例代码 #

from lottie import Animation
from lottie.exporters.qtexporter import QtExporter
from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
import sys

class LottieDisplayWidget(QWidget):
    def __init__(self, anim_path, parent=None):
        super().__init__(parent)
        self.animation = Animation.load(anim_path)
        self.exporter = QtExporter(self.animation)
        self.exporter.set_widget(self)
        self.exporter.start()

    def update_layer_color(self, layer_name, rgb_color):
        # 遍历图层找到目标，修改填充色
        for layer in self.animation.layers:
            if layer.name == layer_name:
                # 需根据你的AE图层结构调整路径
                fill_prop = layer.shapes[0].items[0]
                fill_prop.value = rgb_color  # 传入(1,0,0)代表红色
                break

if __name__ == "__main__":
    app = QApplication(sys.argv)
    main_window = QWidget()
    layout = QVBoxLayout(main_window)

    lottie_widget = LottieDisplayWidget("test_lottie.json")
    layout.addWidget(lottie_widget)

    color_btn = QPushButton("改为绿色")
    color_btn.clicked.connect(lambda: lottie_widget.update_layer_color("Shape Layer 1", (0,1,0)))
    layout.addWidget(color_btn)

    main_window.show()
    sys.exit(app.exec())

方案3：用WebEngineView加载lottie-web #

通过Qt WebEngine加载HTML页面，利用成熟的lottie-web库渲染并交互：

1. 编写HTML页面（lottie_anim.html） #

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/lottie-web@5.12.0/build/player/lottie.min.js"></script>
</head>
<body style="margin:0;">
    <div id="anim-container" style="width:400px;height:400px;"></div>
    <script>
        const animInstance = lottie.loadAnimation({
            container: document.getElementById('anim-container'),
            renderer: 'svg',
            loop: 10,
            autoplay: true,
            path: 'test_lottie.json'
        });

        // 供Qt调用的全局函数
        window.changeLayerColor = function(layerName, rgba) {
            animInstance.setSubproperty(`${layerName}.Fill.Color`, rgba);
        }
    </script>
</body>
</html>

2. PySide6加载代码 #

from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtCore import QUrl
import sys

if __name__ == "__main__":
    app = QApplication(sys.argv)
    main_window = QWidget()
    layout = QVBoxLayout(main_window)

    web_view = QWebEngineView()
    web_view.load(QUrl.fromLocalFile("lottie_anim.html"))
    layout.addWidget(web_view)

    color_btn = QPushButton("改为蓝色")
    color_btn.clicked.connect(lambda: web_view.page().runJavaScript('changeLayerColor("Shape Layer 1", [0,0,1,1])'))
    layout.addWidget(color_btn)

    main_window.show()
    sys.exit(app.exec())

内容的提问来源于stack exchange，提问作者Edward