Qt缓动曲线详解

发布于：2025-05-19 ⋅ 阅读:(27) ⋅ 点赞:(0) 
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtCore module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 3 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL3 included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 3 requirements
** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 2.0 or (at your option) the GNU General
** Public license version 3 or any later version approved by the KDE Free
** Qt Foundation. The licenses are as published by the Free Software
** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-2.0.html and
** https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
****************************************************************************/

#ifndef QEASINGCURVE_H
#define QEASINGCURVE_H

#include <QtCore/qglobal.h>
#include <QtCore/qobjectdefs.h>
#include <QtCore/qvector.h>
#if QT_DEPRECATED_SINCE(5, 0)
# include <QtCore/qlist.h>
# include <QtCore/qpoint.h>
#endif

QT_BEGIN_NAMESPACE


class QEasingCurvePrivate;
class QPointF;
class Q_CORE_EXPORT QEasingCurve
{
    Q_GADGET
public:
    enum Type {
        Linear,
        InQuad, OutQuad, InOutQuad, OutInQuad,
        InCubic, OutCubic, InOutCubic, OutInCubic,
        InQuart, OutQuart, InOutQuart, OutInQuart,
        InQuint, OutQuint, InOutQuint, OutInQuint,
        InSine, OutSine, InOutSine, OutInSine,
        InExpo, OutExpo, InOutExpo, OutInExpo,
        InCirc, OutCirc, InOutCirc, OutInCirc,
        InElastic, OutElastic, InOutElastic, OutInElastic,
        InBack, OutBack, InOutBack, OutInBack,
        InBounce, OutBounce, InOutBounce, OutInBounce,
        InCurve, OutCurve, SineCurve, CosineCurve,
        BezierSpline, TCBSpline, Custom, NCurveTypes
    };
    Q_ENUM(Type)

    QEasingCurve(Type type = Linear);
    QEasingCurve(const QEasingCurve &other);
    ~QEasingCurve();

    QEasingCurve &operator=(const QEasingCurve &other)
    { if ( this != &other ) { QEasingCurve copy(other); swap(copy); } return *this; }
#ifdef Q_COMPILER_RVALUE_REFS
    QEasingCurve(QEasingCurve &&other) Q_DECL_NOTHROW : d_ptr(other.d_ptr) { other.d_ptr = nullptr; }
    QEasingCurve &operator=(QEasingCurve &&other) Q_DECL_NOTHROW
    { qSwap(d_ptr, other.d_ptr); return *this; }
#endif

    void swap(QEasingCurve &other) Q_DECL_NOTHROW { qSwap(d_ptr, other.d_ptr); }

    bool operator==(const QEasingCurve &other) const;
    inline bool operator!=(const QEasingCurve &other) const
    { return !(this->operator==(other)); }

    qreal amplitude() const;
    void setAmplitude(qreal amplitude);

    qreal period() const;
    void setPeriod(qreal period);

    qreal overshoot() const;
    void setOvershoot(qreal overshoot);

    void addCubicBezierSegment(const QPointF & c1, const QPointF & c2, const QPointF & endPoint);
    void addTCBSegment(const QPointF &nextPoint, qreal t, qreal c, qreal b);
    QVector<QPointF> toCubicSpline() const;
#if QT_DEPRECATED_SINCE(5, 0)
    QT_DEPRECATED QList<QPointF> cubicBezierSpline() const { return toCubicSpline().toList(); }
#endif

    Type type() const;
    void setType(Type type);
    typedef qreal (*EasingFunction)(qreal progress);
    void setCustomType(EasingFunction func);
    EasingFunction customType() const;

    qreal valueForProgress(qreal progress) const;
private:
    QEasingCurvePrivate *d_ptr;
#ifndef QT_NO_DEBUG_STREAM
    friend Q_CORE_EXPORT QDebug operator<<(QDebug debug, const QEasingCurve &item);
#endif
#ifndef QT_NO_DATASTREAM
    friend Q_CORE_EXPORT QDataStream &operator<<(QDataStream &, const QEasingCurve&);
    friend Q_CORE_EXPORT QDataStream &operator>>(QDataStream &, QEasingCurve &);
#endif
};
Q_DECLARE_SHARED(QEasingCurve)

#ifndef QT_NO_DEBUG_STREAM
Q_CORE_EXPORT QDebug operator<<(QDebug debug, const QEasingCurve &item);
#endif

#ifndef QT_NO_DATASTREAM
Q_CORE_EXPORT QDataStream &operator<<(QDataStream &, const QEasingCurve&);
Q_CORE_EXPORT QDataStream &operator>>(QDataStream &, QEasingCurve &);
#endif

QT_END_NAMESPACE

#endif

Qt缓动曲线详解

Qt的缓动曲线(QEasingCurve)用于控制动画的速度变化，让动画更自然。以下是主要类型及其效果：

基础曲线类型

  1. Linear - 线性变化，匀速运动，无加速减速

    • 效果：机械感强，缺乏自然感

  2. Quad族 - 二次方曲线

    • InQuad: 开始慢，逐渐加速
    • OutQuad: 开始快，逐渐减速
    • InOutQuad: 开始慢，中间快，结束慢
    • OutInQuad: 开始快，中间慢，结束快

  3. Cubic/Quart/Quint族 - 三/四/五次方曲线

    • 变化比Quad更剧烈，加减速更明显

  4. Sine族 - 基于正弦函数

    • 变化平滑，有轻微的加减速
    • 较为自然，模拟自然运动

  5. Expo族 - 指数曲线

    • 变化极为剧烈，开始或结束时速度变化非常明显

  6. Circ族 - 圆形曲线

    • 基于圆形方程，变化圆滑

特殊效果曲线

  1. Elastic族 - 弹性曲线

    • OutElastic: 结束时有弹跳效果，像橡皮筋
    • 特点：物体似乎越过目标后反弹回来

  2. Back族 - 回弹曲线

    • 运动略微超出目标后返回
    • 比Elastic更克制，弹性更小

  3. Bounce族 - 弹跳曲线

    • 模拟物体弹跳效果
    • 特点：像球落地后反弹几次

对于图标缩放动画的最佳选择

对于图标缩小后放大并打开界面的效果，我推荐以下组合：

  1. 缩小阶段: OutQuad 或 OutCubic

    • 快速开始缩小，然后平滑减速
    • 给用户即时反馈，表明点击已被识别

  2. 放大阶段: OutElastic 或 OutBack

    • OutElastic: 添加轻微的弹性效果，图标会略微超过原始大小再恢复
    • 效果更自然，模拟真实物理世界中的弹性物体

这种组合模拟现实中的"按压弹起"物理效果：

  • 按下时图标迅速缩小(OutQuad)
  • 释放时有弹性回弹(OutElastic)

最佳推荐: 缩小用OutQuad + 放大用OutElastic，这也是我们在代码中已经使用的组合，它提供了:

  1. 良好的视觉反馈
  2. 自然的物理感
  3. 流畅而不过分夸张的动画效果

如果想更保守一些，可以用OutBack替代OutElastic获得更克制的弹性效果。

InSine、OutSine、InOutSine 和 OutInSine 是常见的缓动函数（Easing Functions），它们用于控制动画或其他动态效果的速度变化。这些函数基于正弦函数的特性，提供了不同的加速和减速效果。以下是它们的区别和特点：

1. InSine（正弦进入）

  • 特点：开始时速度较慢，逐渐加速到结束。
  • 数学表达：f(t) = 1 - cos(t * π / 2)，其中 t 是时间参数，范围在 [0, 1]。
  • 应用场景：适合用于需要缓慢启动的动画，例如一个物体从静止开始加速移动。
  • 效果示例：物体开始时几乎不动，然后逐渐加速到最终速度。

2. OutSine（正弦退出）

  • 特点：开始时速度较快，逐渐减速到结束。
  • 数学表达：f(t) = sin(t * π / 2)，其中 t 是时间参数，范围在 [0, 1]。
  • 应用场景：适合用于需要逐渐停止的动画，例如一个物体快速移动后逐渐减速停下。
  • 效果示例：物体开始时快速移动，然后逐渐减速到停止。

3. InOutSine（正弦进出）

  • 特点：开始时速度较慢，中间加速，最后再减速到结束。
  • 数学表达：f(t) = -0.5 * (cos(π * t) - 1)，其中 t 是时间参数，范围在 [0, 1]。
  • 应用场景：适合用于需要平滑过渡的动画，例如一个物体先加速后减速，整体效果更加自然。
  • 效果示例：物体开始时缓慢移动，中间加速，最后再减速到停止。

4. OutInSine（正弦出进）

  • 特点：先快速减速到中间点，然后再快速加速到结束。
  • 数学表达：f(t) = t < 0.5 ? sin((t * 2) * π / 2) * 0.5 : 0.5 + (1 - cos((t * 2 - 1) * π / 2)) * 0.5，其中 t 是时间参数，范围在 [0, 1]。
  • 应用场景：适合用于需要先减速后加速的动画，例如一个物体先快速减速，然后快速加速离开。
  • 效果示例：物体开始时快速减速到中间位置，然后快速加速到最终位置。

图形对比

以下是这些缓动函数的图形对比（假设时间 t 从 0 到 1）：

  • InSine：从 0 开始，缓慢上升，到 1 时达到最大值。
  • OutSine：从 0 开始，快速上升，到 1 时逐渐平缓。
  • InOutSine：从 0 开始，缓慢上升，中间加速，最后再缓慢上升到 1。
  • OutInSine：从 0 开始，快速上升到中间位置，然后快速下降到 0.5，再快速上升到 1。

总结

  • InSine：适合需要缓慢启动的动画。
  • OutSine：适合需要逐渐停止的动画。
  • InOutSine：适合需要平滑过渡的动画。
  • OutInSine：适合需要先减速后加速的动画。

这些缓动函数在动画设计中非常常用，可以根据具体需求选择合适的函数来实现理想的动画效果。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布