From 7622db2c0439f8dc5d831b57ee44ff2852148c9a Mon Sep 17 00:00:00 2001 From: houchengqiu Date: Wed, 31 Jul 2024 14:58:15 +0800 Subject: [PATCH] feat: [UI] Add collection animation effects Add collection animation effects Log: [UI] Add collection animation effects Bug: https://pms.uniontech.com/bug-view-168549.html --- src/deepin-album.qrc | 1 + src/qml/AlbumTitle.qml | 10 +- .../Control/Animation/SwitchViewAnimation.qml | 43 ++++++++ src/qml/Control/DeleteDialog.qml | 2 +- .../ListView/ThumbnailListDelegate.qml | 4 +- .../ListView/ThumbnailListDelegate2.qml | 4 +- .../Control/ListView/ThumbnailListView.qml | 15 +-- .../Control/ListView/ThumbnailListView2.qml | 2 +- src/qml/SideBar/SideBarItem.qml | 1 + src/qml/SideBar/SideBarItemDelegate.qml | 1 + .../CollecttionView/AllCollection.qml | 4 +- .../CollecttionView/CollecttionView.qml | 104 +++++++++++------- .../CollecttionView/DayCollection.qml | 20 ++-- .../CollecttionView/MonthCollection.qml | 3 +- .../CollecttionView/YearCollection.qml | 3 +- src/src/globalstatus.cpp | 13 +++ src/src/globalstatus.h | 8 +- 17 files changed, 166 insertions(+), 72 deletions(-) create mode 100644 src/qml/Control/Animation/SwitchViewAnimation.qml diff --git a/src/deepin-album.qrc b/src/deepin-album.qrc index 249e07d6..f830769a 100644 --- a/src/deepin-album.qrc +++ b/src/deepin-album.qrc @@ -66,5 +66,6 @@ qml/Control/BaseView.qml qml/Control/BorderImageEx.qml qml/Control/MonthImage.qml + qml/Control/Animation/SwitchViewAnimation.qml diff --git a/src/qml/AlbumTitle.qml b/src/qml/AlbumTitle.qml index e188880f..23e37ff4 100644 --- a/src/qml/AlbumTitle.qml +++ b/src/qml/AlbumTitle.qml @@ -252,7 +252,7 @@ TitleBar { checked: true onClicked: { collectionBtnClicked(0) - collectionCombo.setCurrentIndex() + collectionCombo.setCurrentIndex(0) } } ToolButton { @@ -303,10 +303,6 @@ TitleBar { break } } - - Component.onCompleted: { - GStatus.sigCollectionViewIndexChanged.connect(setChecked) - } } // 年月日下拉框 @@ -338,10 +334,6 @@ TitleBar { collectionBtnClicked(currentIndex) collectionBtnBox.setChecked(currentIndex) } - - Component.onCompleted: { - GStatus.sigCollectionViewIndexChanged.connect(setCurrentIndex) - } } } diff --git a/src/qml/Control/Animation/SwitchViewAnimation.qml b/src/qml/Control/Animation/SwitchViewAnimation.qml new file mode 100644 index 00000000..cf26216d --- /dev/null +++ b/src/qml/Control/Animation/SwitchViewAnimation.qml @@ -0,0 +1,43 @@ +// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd. +// +// SPDX-License-Identifier: GPL-3.0-or-later + +import QtQuick 2.11 +import QtQuick.Controls 2.4 + +Item { + id: switchViewAnimation + + property bool show: false + property real showOpacity: 1 + property real showX: 0 + + property real hideOpacity: 0 + property real hideX: -width - 20 + + state: "hide" + states: [ + State { + name: "show" + PropertyChanges { + target: switchViewAnimation + opacity: showOpacity + x: showX + } + when: show + }, + State { + name: "hide" + PropertyChanges { + target: switchViewAnimation + opacity: hideOpacity + x: hideX + } + when: !show + } + ] + + transitions: Transition { + NumberAnimation{properties: "x,opacity"; easing.type: Easing.OutExpo; duration: 400} + } +} diff --git a/src/qml/Control/DeleteDialog.qml b/src/qml/Control/DeleteDialog.qml index 6ce85e37..793b8ef2 100644 --- a/src/qml/Control/DeleteDialog.qml +++ b/src/qml/Control/DeleteDialog.qml @@ -83,7 +83,7 @@ DialogWindow { font: DTK.fontManager.t5 verticalAlignment: Text.AlignBottom horizontalAlignment: Text.AlignHCenter - elide: Text.elideRight + elide: Text.ElideRight text: textMetics.elidedText TextMetrics { id: textMetics diff --git a/src/qml/Control/ListView/ThumbnailListDelegate.qml b/src/qml/Control/ListView/ThumbnailListDelegate.qml index 30084896..23890a76 100644 --- a/src/qml/Control/ListView/ThumbnailListDelegate.qml +++ b/src/qml/Control/ListView/ThumbnailListDelegate.qml @@ -81,7 +81,7 @@ Item { // 图片保存完成，缩略图区域重新加载当前图片 Connections { target: fileControl - onCallSavePicDone: { + function onCallSavePicDone() { if (path === m_url) { m_displayFlushHelper = Math.random() } @@ -463,7 +463,7 @@ Item { Connections { target: albumControl - onSigRefreashVideoTime: { + function onSigRefreashVideoTime(url, videoTimeStr) { if (url === m_url) { videoLabel.displayStr = videoTimeStr } diff --git a/src/qml/Control/ListView/ThumbnailListDelegate2.qml b/src/qml/Control/ListView/ThumbnailListDelegate2.qml index d69061d6..a06ca173 100644 --- a/src/qml/Control/ListView/ThumbnailListDelegate2.qml +++ b/src/qml/Control/ListView/ThumbnailListDelegate2.qml @@ -59,7 +59,7 @@ Item { // 图片保存完成，缩略图区域重新加载当前图片 Connections { target: fileControl - onCallSavePicDone: { + function onCallSavePicDone() { if (path === model.url) { model.reloadThumbnail } @@ -404,7 +404,7 @@ Item { Connections { target: albumControl - onSigRefreashVideoTime: { + function onSigRefreashVideoTime(url, videoTimeStr) { if (url === model.url) { videoLabel.displayStr = videoTimeStr } diff --git a/src/qml/Control/ListView/ThumbnailListView.qml b/src/qml/Control/ListView/ThumbnailListView.qml index 610ce0ae..01a8b087 100644 --- a/src/qml/Control/ListView/ThumbnailListView.qml +++ b/src/qml/Control/ListView/ThumbnailListView.qml @@ -130,7 +130,7 @@ Item { function totalTimeScope() { if(thumnailListType === Album.Types.ThumbnailAllCollection && GStatus.currentViewType === Album.Types.ViewCollecttion && - collecttionView.currentViewIndex === 3) { //仅在合集模式的时候激活计算，以此节省性能 + GStatus.currentCollecttionViewIndex === 3) { //仅在合集模式的时候激活计算，以此节省性能 var visilbeIndexs = theView.flushRectSel(0, theView.contentY, theView.width, theView.height) if (visilbeIndexs.length > 0 && visilbeIndexs[0] !== "-1") { var url1 = thumbnailListModel.get(visilbeIndexs[0]).url @@ -242,7 +242,7 @@ Item { // 提供给合集日视图和已导入视图使用，用来刷新 function flushRectSel(x,y,w,h,ctrl,mousePress, inPress) { - if (theView.contains(x,y) && theView.contains(x+w, y+h) && w !== 0 && h !== 0) { + if (theView.contains(Qt.point(x,y)) && theView.contains(Qt.point(x+w, y+h)) && w !== 0 && h !== 0) { // 按住Ctrl，鼠标点击事件释放时，处理点选逻辑 if (ctrl && mousePress) { if (!inPress) { @@ -287,7 +287,7 @@ Item { Connections { target: thumbnailImage - onEscKeyPressed: { + function onEscKeyPressed() { if (haveSelect) { selectAll(false) } @@ -668,18 +668,19 @@ Item { Connections { target: GStatus - onSigSelectAll: { - if (theView.visible) + function onSigSelectAll(bSel) { + if (theView.visible) { selectAll(bSel) + } } - onSigPageUp: { + function onSigPageUp() { if (theView.visible) { theView.executeScrollBar(theView.scrollDelta) } } - onSigPageDown: { + function onSigPageDown() { if (theView.visible) { theView.executeScrollBar(-theView.scrollDelta) } diff --git a/src/qml/Control/ListView/ThumbnailListView2.qml b/src/qml/Control/ListView/ThumbnailListView2.qml index 0c5646fe..59895286 100644 --- a/src/qml/Control/ListView/ThumbnailListView2.qml +++ b/src/qml/Control/ListView/ThumbnailListView2.qml @@ -100,7 +100,7 @@ FocusScope { function totalTimeScope() { if(thumnailListType === Album.Types.ThumbnailAllCollection && GStatus.currentViewType === Album.Types.ViewCollecttion && - collecttionView.currentViewIndex === 3) { //仅在合集模式的时候激活计算，以此节省性能 + GStatus.currentCollecttionViewIndex === 3) { //仅在合集模式的时候激活计算，以此节省性能 var visilbeIndexs = gridView.rectIndexes(0, 0, gridView.width, gridView.height) if (visilbeIndexs.length > 0) { var url1 = thumbnailModel.data(visilbeIndexs[0], "url") diff --git a/src/qml/SideBar/SideBarItem.qml b/src/qml/SideBar/SideBarItem.qml index 3aab5e85..6a92b1aa 100644 --- a/src/qml/SideBar/SideBarItem.qml +++ b/src/qml/SideBar/SideBarItem.qml @@ -45,6 +45,7 @@ ColumnLayout { id: viewLabel width: 42; height: 20 text: title + font: DTK.fontManager.t6 Layout.alignment: Qt.AlignLeft; Layout.leftMargin: 20 horizontalAlignment: Qt.AlignLeft diff --git a/src/qml/SideBar/SideBarItemDelegate.qml b/src/qml/SideBar/SideBarItemDelegate.qml index 4be41c1e..6ea05109 100644 --- a/src/qml/SideBar/SideBarItemDelegate.qml +++ b/src/qml/SideBar/SideBarItemDelegate.qml @@ -48,6 +48,7 @@ ItemDelegate { leftMargin: 10 verticalCenter: item.verticalCenter } + font: DTK.fontManager.t6 text: "%1".arg(model.displayName) elide: Text.ElideRight } diff --git a/src/qml/ThumbnailImageView/CollecttionView/AllCollection.qml b/src/qml/ThumbnailImageView/CollecttionView/AllCollection.qml index 25faabfe..0652ee9e 100644 --- a/src/qml/ThumbnailImageView/CollecttionView/AllCollection.qml +++ b/src/qml/ThumbnailImageView/CollecttionView/AllCollection.qml @@ -13,9 +13,11 @@ import org.deepin.album 1.0 as Album import "../../Control" import "../../Control/ListView" +import "../../Control/Animation" import "../../" -Item { +SwitchViewAnimation { + property int filterType: filterCombo.currentIndex // 筛选类型，默认所有 property string numLabelText:"" property string selectedText: getSelectedNum(selectedPaths) diff --git a/src/qml/ThumbnailImageView/CollecttionView/CollecttionView.qml b/src/qml/ThumbnailImageView/CollecttionView/CollecttionView.qml index c535cc8d..f3f90d33 100644 --- a/src/qml/ThumbnailImageView/CollecttionView/CollecttionView.qml +++ b/src/qml/ThumbnailImageView/CollecttionView/CollecttionView.qml @@ -15,24 +15,57 @@ BaseView { id: collecttView property int currentViewIndex: 3 + property int rollingWidth: collecttView.width + 20 // 通知日视图刷新状态栏提示信息 signal flushDayViewStatusText() function setIndex(index) { - if (currentViewIndex === index) return - currentViewIndex = index - if (currentViewIndex === 0) + if (index === 0) { yearCollection.flushModel() - else if (currentViewIndex === 1) + if (yearCollection.x < 0) + yearCollection.x = rollingWidth + } else if (index === 1) { monthCollection.flushModel() - else if (currentViewIndex === 2) { + if (monthCollection.x < 0) + monthCollection.x = rollingWidth + } else if (index === 2) { dayCollection.flushModel() + if (dayCollection.x < 0) + dayCollection.x = rollingWidth + if (dayCollection.x !== 0) { + dayCollection.visible = true + } + + GStatus.selectedPaths = [] flushDayViewStatusText() + } else if (index === 3) { + if (allCollection.x < 0) + allCollection.x = rollingWidth + allCollection.clearSelecteds() } + + currentViewIndex = index + GStatus.currentCollecttionViewIndex = index + + //年月视图不显示底栏数量 + if (currentViewIndex === 0 || currentViewIndex ===1) { + GStatus.statusBarNumText = "" + } + } + + onWidthChanged: { + if (yearCollection.x < 0) + yearCollection.x = -rollingWidth + if (monthCollection.x < 0) + monthCollection.x = -rollingWidth + if (dayCollection.x < 0) + dayCollection.x = -rollingWidth + if (allCollection.x < 0) + allCollection.x = -rollingWidth } onVisibleChanged: { @@ -48,42 +81,37 @@ BaseView { } } - SwipeView { - id: swipeView - anchors.fill: parent - currentIndex: currentViewIndex - interactive: false - - YearCollection { - id: yearCollection - } - - MonthCollection { - id: monthCollection - } - - DayCollection { - id: dayCollection - } - - AllCollection { - id: allCollection - } + YearCollection { + id: yearCollection + x: rollingWidth + width: collecttView.width + height: collecttView.height + show: currentViewIndex === 0 + } - onCurrentIndexChanged: { - currentViewIndex = currentIndex - GStatus.sigCollectionViewIndexChanged(currentIndex) + MonthCollection { + id: monthCollection + x: rollingWidth + width: collecttView.width + height: collecttView.height + show: currentViewIndex === 1 + } - // 保证日聚合和所有照片视图互斥显示，以便列表控件全选逻辑只在显示的视图中生效 - dayCollection.visible = currentViewIndex === 2 - allCollection.clearSelecteds() - allCollection.visible = currentViewIndex === 3 + DayCollection { + id: dayCollection + visible: false + x: rollingWidth + width: collecttView.width + height: collecttView.height + show: currentViewIndex === 2 + } - //年月视图不显示底栏数量 - if (currentViewIndex === 0 || currentViewIndex ===1) { - GStatus.statusBarNumText = "" - } - } + AllCollection { + id: allCollection + x: 0 + width: collecttView.width + height: collecttView.height + show: currentViewIndex === 3 } // 若没有数据，显示导入图片视图 diff --git a/src/qml/ThumbnailImageView/CollecttionView/DayCollection.qml b/src/qml/ThumbnailImageView/CollecttionView/DayCollection.qml index a552e50b..0504989d 100644 --- a/src/qml/ThumbnailImageView/CollecttionView/DayCollection.qml +++ b/src/qml/ThumbnailImageView/CollecttionView/DayCollection.qml @@ -13,9 +13,10 @@ import org.deepin.album 1.0 as Album import "../../Control" import "../../Control/ListView" +import "../../Control/Animation" import "../../" -Item { +SwitchViewAnimation { id: dayView signal sigListViewPressed(int x, int y) @@ -134,6 +135,7 @@ Item { //0.清理 theModel.clear() theModel.selectedPathObjs = [] + selectedPaths = [] dayHeights = [] //1.获取日期 var days = [] @@ -464,7 +466,7 @@ Item { Connections { target: dayView - onSigListViewPressed: { + function onSigListViewPressed(x, y) { var object = selectAllBox.mapFromGlobal(x,y) if (selectAllBox.contains(object)) { checkBoxClicked = true @@ -478,7 +480,7 @@ Item { } } - onSigListViewReleased: { + function onSigListViewReleased(x, y) { checkBoxClicked = false } } @@ -510,7 +512,7 @@ Item { Connections { target: rubberBand - onRectSelChanged: { + function onRectSelChanged() { var pos1 = theMouseArea.mapToItem(theSubView, rubberBand.left(), rubberBand.top()) var pos2 = theMouseArea.mapToItem(theSubView, rubberBand.right(), rubberBand.bottom()) var rectsel = albumControl.rect(pos1, pos2) @@ -524,22 +526,24 @@ Item { // 监听缩略图子控件选中状态，一旦改变，更新日视图所有选中路径 Connections { target: theSubView - onSelectedChanged: { - theModel.selectedPathObjs[index].paths = theSubView.selectedPaths + function onSelectedChanged() { + if (index > -1) { + theModel.selectedPathObjs[index].paths = theSubView.selectedPaths + } updateSelectedPaths() } } Connections { target: theView - onSigUnSelectAll: { + function onSigUnSelectAll() { theSubView.selectAll(false) } } Connections { target: theView - onDbClicked: { + function onDbClicked(url) { var openPaths = theSubView.allOriginUrls() if (openPaths.indexOf(url) !== -1) theSubView.executeViewImage() diff --git a/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml b/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml index a1a6c14a..6c2809f8 100644 --- a/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml +++ b/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml @@ -11,11 +11,12 @@ import QtGraphicalEffects 1.0 import org.deepin.dtk 1.0 import "../../Control" import "../../Control/ListView" +import "../../Control/Animation" import "../../" import org.deepin.album 1.0 as Album -Item { +SwitchViewAnimation { id: monthView signal monthClicked(string year, string month) diff --git a/src/qml/ThumbnailImageView/CollecttionView/YearCollection.qml b/src/qml/ThumbnailImageView/CollecttionView/YearCollection.qml index a14e9ff7..0b18a479 100644 --- a/src/qml/ThumbnailImageView/CollecttionView/YearCollection.qml +++ b/src/qml/ThumbnailImageView/CollecttionView/YearCollection.qml @@ -11,9 +11,10 @@ import QtGraphicalEffects 1.0 import org.deepin.dtk 1.0 import "../../Control" import "../../Control/ListView" +import "../../Control/Animation" import "../../" -Item { +SwitchViewAnimation { id: yearView signal yearClicked(string year) diff --git a/src/src/globalstatus.cpp b/src/src/globalstatus.cpp index d179ab5a..c272b5a0 100644 --- a/src/src/globalstatus.cpp +++ b/src/src/globalstatus.cpp @@ -432,6 +432,19 @@ void GlobalStatus::setCurrentViewType(const Types::ThumbnailViewType &value) } } +int GlobalStatus::currentCollecttionViewIndex() const +{ + return m_currentCollecttionViewIndex; +} + +void GlobalStatus::setCurrentCollecttionViewIndex(const int &value) +{ + if (m_currentCollecttionViewIndex != value) { + m_currentCollecttionViewIndex = value; + Q_EMIT currentCollecttionViewIndexChanged(); + } +} + int GlobalStatus::currentCustomAlbumUId() const { return m_currentCustomAlbumUId; diff --git a/src/src/globalstatus.h b/src/src/globalstatus.h index 5bea5d73..cddb89d3 100644 --- a/src/src/globalstatus.h +++ b/src/src/globalstatus.h @@ -139,6 +139,12 @@ class GlobalStatus : public QObject void setCurrentViewType(const Types::ThumbnailViewType& value); Q_SIGNAL void currentViewTypeChanged(); + // 合集当前索引 + Q_PROPERTY(int currentCollecttionViewIndex READ currentCollecttionViewIndex WRITE setCurrentCollecttionViewIndex NOTIFY currentCollecttionViewIndexChanged) + int currentCollecttionViewIndex() const; + void setCurrentCollecttionViewIndex(const int& value); + Q_SIGNAL void currentCollecttionViewIndexChanged(); + // 当前自定义相册Id Q_PROPERTY(int currentCustomAlbumUId READ currentCustomAlbumUId WRITE setCurrentCustomAlbumUId NOTIFY currentCustomAlbumUIdChanged) int currentCustomAlbumUId() const; @@ -257,7 +263,6 @@ class GlobalStatus : public QObject void sigFlushHaveImportedView(); // 刷新已导入视图内容 void sigFlushRecentDelView(); // 刷新最近删除视图内容 void sigFlushCustomAlbumView(int UID); // 刷新我的收藏/自定义相册视图内容 UID: >= 0 刷新指定视图，-1: 默认刷新所有视图 - void sigCollectionViewIndexChanged(int index); // 合集页面发生改变 void sigFlushSearchView(); // 刷新搜索结果视图内容 void sigCustomAlbumNameChaged(int UID, QString name); // 刷新自定义相册视图的相册名称 void sigSelectAll(bool bSel); @@ -288,6 +293,7 @@ class GlobalStatus : public QObject bool m_bRefreshFavoriteIconFlag = false; // 刷新收藏图标标记，翻转一次，前端图标就刷新一次 bool m_bRefreshRangeBtnState = false; // 刷新显示比例图标激活状态标记，翻转一次，前端图标就刷新一次 Types::ThumbnailViewType m_currentViewType = Types::ViewImport; // 当前显示的视图类型 + int m_currentCollecttionViewIndex = 3; // 合集当前索引 0:年 1:月 2:日 3:所有图片 int m_currentCustomAlbumUId = -1; // 当前自定义相册所在UId，-1：照片库(非我的收藏) 0:我的收藏 1:截图录屏 2:相机 3:画板 其他:自定义相册 int m_stackControlCurrent = 0; // 0:相册界面 1:看图界面 2:幻灯片 int m_stackControlLastCurrent = -1; // 记录上一次显示的主界面索引 0:相册界面 1:看图界面 2:幻灯片