如何使用QTimeLine类将Qt Design Studio创建的QML时间线改写为C++实现？

一、用QTimeLine实现QML Timeline的关键帧动画效果 #

QTimeLine本身没有直接的关键帧API，但我们可以通过监听它的frameChanged或valueChanged信号，手动根据当前帧计算对应的属性值，来模拟QML中的关键帧逻辑。

你的QML动画逻辑是：

• 总时长1000ms，无限循环
• 帧范围0-1000
• 0-100帧：scale从1线性过渡到1.25
• 100-1000帧：scale从1.25线性过渡回1

我们可以在Scaler类中添加一个处理帧变化的槽函数，根据当前帧计算scale值：

// 修改Scaler类，添加处理帧变化的槽函数
class Scaler: public QObject{
    Q_OBJECT
    Q_PROPERTY(QVariant scale READ scale WRITE setScale NOTIFY scaleChanged)
    QVariant m_scale;
public:
    using QObject::QObject;
    QVariant scale() const{
        return m_scale;
    }
public slots:
    void setScale(QVariant scale){
        if (m_scale == scale) return;
        m_scale = scale;
        emit scaleChanged(m_scale);
    }

    // 新增：根据当前帧计算scale值
    void onTimelineFrameChanged(int frame) {
        qreal targetScale;
        if (frame <= 100) {
            // 0-100帧：从1到1.25线性插值
            targetScale = 1.0 + (0.25 * frame / 100.0);
        } else {
            // 100-1000帧：从1.25回到1线性插值
            targetScale = 1.25 - (0.25 * (frame - 100) / 900.0);
        }
        setScale(targetScale);
    }
signals:
    void scaleChanged(QVariant scale);
};

然后在C++中创建并配置QTimeLine：

Scaler scaler;
QTimeLine* timeline = new QTimeLine(1000); // 总时长1000ms，对应QML的duration
timeline->setFrameRange(0, 1000); // 对应QML的startFrame和endFrame
timeline->setLoopCount(QTimeLine::Infinite); // 无限循环，对应QML的loops:0
timeline->setEasingCurve(QEasingCurve::Linear); // 线性插值，和QML默认一致

// 连接帧变化信号到我们的处理槽
connect(timeline, &QTimeLine::frameChanged, &scaler, &Scaler::onTimelineFrameChanged);

// 启动动画
timeline->start();

这样就能完全复现你原来QML Timeline的动画效果了。

二、触发QML中已创建好的Timeline #

当然可以直接控制QML里的Timeline对象，有两种常用方法：

方法1：直接获取QML Timeline对象并调用方法/设置属性

首先在QML中给Timeline设置objectName（方便C++查找）：

Timeline {
    id: timeline
    objectName: "imageScaleTimeline"
    // 你的原有QML代码...
}

然后在C++中找到这个对象，调用它的方法或修改属性：

// 假设engine是你的QQmlApplicationEngine实例
QObject* rootObj = engine.rootObjects().first();
if (rootObj) {
    // 通过objectName查找Timeline对象
    QObject* qmlTimeline = rootObj->findChild<QObject*>("imageScaleTimeline");
    if (qmlTimeline) {
        // 启动动画：调用Timeline的start()方法
        QMetaObject::invokeMethod(qmlTimeline, "start");
        
        // 或者设置running属性为true（效果一样）
        // qmlTimeline->setProperty("running", true);
        
        // 停止动画的话：
        // QMetaObject::invokeMethod(qmlTimeline, "stop");
        // qmlTimeline->setProperty("running", false);
    }
}

方法2：通过C++属性绑定控制Timeline

如果希望更优雅地绑定，可以在Scaler类中添加一个控制动画运行状态的属性，然后在QML中绑定到Timeline的running属性：

修改Scaler类：

class Scaler: public QObject{
    Q_OBJECT
    Q_PROPERTY(QVariant scale READ scale WRITE setScale NOTIFY scaleChanged)
    // 新增：控制动画运行状态的属性
    Q_PROPERTY(bool animationRunning READ animationRunning WRITE setAnimationRunning NOTIFY animationRunningChanged)
    QVariant m_scale;
    bool m_animationRunning = false;
public:
    using QObject::QObject;
    QVariant scale() const{
        return m_scale;
    }
    bool animationRunning() const {
        return m_animationRunning;
    }
public slots:
    void setScale(QVariant scale){
        if (m_scale == scale) return;
        m_scale = scale;
        emit scaleChanged(m_scale);
    }
    void setAnimationRunning(bool running) {
        if (m_animationRunning == running) return;
        m_animationRunning = running;
        emit animationRunningChanged(running);
    }
signals:
    void scaleChanged(QVariant scale);
    void animationRunningChanged(bool running);
};

然后在QML中绑定Timeline的running属性：

Timeline {
    id: timeline
    running: scaler.animationRunning
    // 你的原有QML代码...
}

现在在C++中只需调用scaler.setAnimationRunning(true)就能启动QML的Timeline，调用scaler.setAnimationRunning(false)就能停止它。

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