【QCustomPlot实战系列】QCPGraph缓动函数可视化

利用QCustomPlot来展示Qt动画曲线效果

struct EasingFunctions
{
    QString name;
    QColor color;
};

static QMap<QEasingCurve::Type, EasingFunctions> GetFunctions()
{
    static QMap<QEasingCurve::Type, EasingFunctions> Functions;

    if (Functions.isEmpty()) {
        Functions.insert(QEasingCurve::Linear, { "Linear", QColor(84, 112, 198) });
        Functions.insert(QEasingCurve::InQuad, { "InQuad", QColor(145, 204, 117) });
        Functions.insert(QEasingCurve::OutQuad, { "OutQuad", QColor(250, 200, 88) });
        Functions.insert(QEasingCurve::InOutQuad, { "InOutQuad", QColor(238, 102, 102) });
        Functions.insert(QEasingCurve::InCubic, { "InCubic", QColor(115, 192, 222) });
        Functions.insert(QEasingCurve::OutCubic, { "OutCubic", QColor(59, 162, 114) });
        Functions.insert(QEasingCurve::InOutCubic, { "InOutCubic", QColor(252, 132, 82) });
        Functions.insert(QEasingCurve::InQuart, { "InQuart", QColor(168, 104, 197) });
        Functions.insert(QEasingCurve::OutQuart, { "OutQuart", QColor(234, 124, 204) });
        Functions.insert(QEasingCurve::InOutQuart, { "InOutQuart", QColor(84, 112, 198)});
        Functions.insert(QEasingCurve::InQuint, { "InQuint", QColor(145, 204, 117) });
        Functions.insert(QEasingCurve::OutQuint, { "OutQuint", QColor(250, 200, 88) });
        Functions.insert(QEasingCurve::InOutQuint, { "InOutQuint", QColor(238, 102, 102) });
        Functions.insert(QEasingCurve::InSine, { "InSine", QColor(115, 192, 222) });
        Functions.insert(QEasingCurve::OutSine, { "OutSine", QColor(59, 162, 114) });
        Functions.insert(QEasingCurve::InOutSine, { "InOutSine", QColor(252, 132, 82) });
        Functions.insert(QEasingCurve::InExpo, { "InExpo", QColor(154, 96, 180) });
        Functions.insert(QEasingCurve::OutExpo, { "OutExpo", QColor(234, 124, 204) });
        Functions.insert(QEasingCurve::InOutExpo, { "InOutExpo", QColor(84, 112, 198) });
        Functions.insert(QEasingCurve::InCirc, { "InCirc", QColor(145, 204, 117) });
        Functions.insert(QEasingCurve::OutCirc, { "OutCirc", QColor(250, 200, 88) });
        Functions.insert(QEasingCurve::InOutCirc, { "InOutCirc", QColor(238, 102, 102) });
        Functions.insert(QEasingCurve::InElastic, { "InElastic", QColor(115, 192, 222) });
        Functions.insert(QEasingCurve::OutElastic, { "OutElastic", QColor(59, 162, 114) });
        Functions.insert(QEasingCurve::InOutElastic, { "InOutElastic", QColor(252, 132, 82) });
        Functions.insert(QEasingCurve::InBack, { "InBack", QColor(154, 96, 180) });
        Functions.insert(QEasingCurve::OutBack, { "OutBack", QColor(234, 124, 204) });
        Functions.insert(QEasingCurve::InOutBack, { "InOutBack", QColor(84, 112, 198) });
        Functions.insert(QEasingCurve::InBounce, { "InBounce", QColor(145, 204, 117) });
        Functions.insert(QEasingCurve::OutBounce, { "OutBounce", QColor(250, 200, 88) });
        Functions.insert(QEasingCurve::InOutBounce, { "InOutBounce", QColor(240, 121, 121) });
        Functions.insert(QEasingCurve::OutInBounce, { "OutInBounce", QColor(240, 121, 121) });
        Functions.insert(QEasingCurve::InCurve, { "InCurve", QColor(240, 121, 121) });
        Functions.insert(QEasingCurve::OutCurve, { "OutCurve", QColor(240, 121, 121) });
        Functions.insert(QEasingCurve::SineCurve, { "SineCurve", QColor(240, 121, 121) });
        Functions.insert(QEasingCurve::CosineCurve, { "CosineCurve", QColor(240, 121, 121) });
    }

    return Functions;
}

static QAbstractAnimation* AddEasingGraph(
        QCustomPlot* parentPlot,
        int row, int column,
        QEasingCurve::Type type)
{
    static const int PointCount = 30;

    auto axisRect = new QCPAxisRect(parentPlot);
    axisRect->axis(QCPAxis::atBottom)->setVisible(false);
    axisRect->axis(QCPAxis::atLeft)->setVisible(false);

    auto easingFunction = GetFunctions().value(type);
    auto graph = new QCPGraph(axisRect->axis(QCPAxis::atBottom), axisRect->axis(QCPAxis::atLeft));
    auto animation = new QVariantAnimation(graph);
    animation->setDuration(1000);
    animation->setStartValue(0);
    animation->setEndValue(PointCount);
    animation->setEasingCurve(type);
    QEasingCurve curve(type);
    QObject::connect(animation, &QVariantAnimation::valueChanged, graph, [=](const QVariant& v) {
        auto index = v.toInt();
        auto key = index*1.0/PointCount;
        graph->addData(key, curve.valueForProgress(key));

        parentPlot->replot(QCustomPlot::rpQueuedReplot);
    });

    graph->addData(0, curve.valueForProgress(0));
    graph->keyAxis()->setRange(0, 1);
    graph->valueAxis()->setRange(-0.4, 1.4);
    graph->setPen(QPen(easingFunction.color, 2));

    auto title = new QCPTextElement(parentPlot, easingFunction.name);
    parentPlot->plotLayout()->addElement(row, column, title);
    parentPlot->plotLayout()->addElement(row+1, column, axisRect);
    return animation;
}

void LineEasingVisualizing::initCustomPlot(QCustomPlot *parentPlot)
{
    parentPlot->plotLayout()->clear();
    parentPlot->plotLayout()->setFillOrder(QCPLayoutGrid::foColumnsFirst);

    auto group = new QParallelAnimationGroup(parentPlot);
    auto functions = GetFunctions();

    int row=0, column=0;
    for (auto it = functions.begin(); it != functions.end(); ++it) {
        group->addAnimation(AddEasingGraph(parentPlot, row, column, it.key()));
        column++;

        if (column % 6 == 0) {
            row+=2;
            column=0;
        }
    }

    group->start();
}