Qt 使用QPropertyAnimation动画效果的图片浏览器

news2025/1/12 23:31:17

文章目录

- - 效果图
  - 功能点
  - 代码解析
  - - 图片切换显示与动画效果
    - 图片缩放
  - 总结

效果图

在这里插入图片描述

功能点

加载指定路径下的所有图片并显示
滑动滑动条查看指定图片，也滚轮切换图片
滑动条缩略图加入动画效果
图片可以进行缩放移动查看

代码解析

整体来说相对，显示图片的是一个自定义的QLabel,缩略图是很多QLabel加入到一个QScrollArea滑动条中，使用QPropertyAnimation即可加入的动画效果。

图片切换显示与动画效果

展示指定图片时，将图片名传入，imageLabel重新加载指定图片。计算出图片在滑动条的中间位置，并使用QPropertyAnimation进行属性的设置从而达到一种动画效果。
QPropertyAnimation怎么用自行百度，简单来说就是可以给QT对象任意属性设置平滑的动画。

void ImageBrowser::showImage(const QString &filename)
{
    QPixmap pixmap(dirname + filename);
    imageLabel->resert();
    imageLabel->setPixmap(pixmap.scaled(400, 400, Qt::KeepAspectRatio));

    // 动画效果，使选中的缩略图居中
    QScrollBar *scrollBar = scrollArea->horizontalScrollBar();
    int targetValue = labels[currentImageIndex]->geometry().center().x() - (scrollArea->width() / 2);
    // 创建动画并执行
    QPropertyAnimation *animation = new QPropertyAnimation(scrollBar, "value");
    animation->setDuration(1000);
    animation->setStartValue(scrollBar->value());
    animation->setEndValue(targetValue);
    animation->start();

    // 移除之前选中的缩略图的边框
    for (auto label : labels)
    {
        label->setStyleSheet("");
    }
    // 为当前选中的缩略图添加边框
    auto currentThumbnail = labels[currentImageIndex];
    currentThumbnail->setStyleSheet("border: 4px solid lightskyblue;");
}