feat: thumbnail view fade in/out animation

* Enable thumbnail view position change animation;
* Add fade in/out animation.

Log: Add thumbnail view fade in/out animation.
Influence: Animation

src/qml/ThumbnailDelegate/BaseThumbnailDelegate.qml

@@ -7,42 +7,44 @@ import QtQuick
 Item {
  id: thumbnailDelegate
 
- property var source
  property int imgRadius: 3
  property bool isCurrentItem: parent.ListView.isCurrentItem
  property alias shader: enterShader
+ property var source
 
- width: 30
  height: 40
+ width: 30
  y: 20
 
+ transitions: Transition {
+ reversible: true
+
+ // 保留最明显的宽度变更动画，其它属性变更忽略
+ NumberAnimation {
+ // 调整不同宽度下的动画时间，最多310ms
+ duration: Math.max(width / 2, 366)
+ easing.type: Easing.OutExpo
+ properties: "width, height, x, y"
+ }
+ }
+
  Rectangle {
  id: enterShader
 
+ // 如需改为匹配高亮色 palette.highlight
+ border.color: "#0081FF"
+ border.width: imgRadius
+ color: "transparent"
  height: parent.height + (2 * imgRadius)
+ radius: imgRadius * 2
+ visible: false
  width: parent.width + (2 * imgRadius)
+
  anchors {
- top: parent.top
- topMargin: -imgRadius
  left: parent.left
  leftMargin: -imgRadius
- }
- radius: imgRadius * 2
- color: "transparent"
- border.color: "#0081FF"
- border.width: imgRadius
- visible: false
- }
-
- transitions: Transition {
- reversible: true
-
- // 保留最明显的宽度变更动画，其它属性变更忽略
- NumberAnimation {
- properties: "width"
- // 调整不同宽度下的动画时间，最多310ms
- duration: width < 200 ? 100 : width / 2
- easing.type: Easing.OutInQuad
+ top: parent.top
+ topMargin: -imgRadius
  }
  }
 }

src/qml/ThumbnailListView.qml

@@ -230,11 +230,12 @@ Control {
  property bool lastIsMultiImage: false
 
  // 重新定位图片位置
- function rePositionView() {
+ function rePositionView(force) {
  // 特殊处理，防止默认显示首个缩略图时采用Center的策略会被遮挡部分
  if (0 === currentIndex) {
  positionViewAtBeginning();
- } else {
+ } else if (force) {
+ // 不再默认居中，允许在范围内切换
  // 尽可能将高亮缩略图显示在列表中
  positionViewAtIndex(currentIndex, ListView.Center);
  }
@@ -249,11 +250,44 @@ Control {
  highlightRangeMode: ListView.ApplyRange
  model: IV.GControl.globalModel
  orientation: Qt.Horizontal
- preferredHighlightBegin: width / 2 - 25
- preferredHighlightEnd: width / 2 + 25
+ preferredHighlightBegin: width / 4
+ preferredHighlightEnd: width / 4 * 3
  spacing: 4
  width: thumbnailView.width - thumbnailView.btnContentWidth
 
+ Behavior on currentIndex {
+ ParallelAnimation {
+ onRunningChanged: {
+ // 进入退出时均捕获当前列表显示状态
+ fadeOutEffect.scheduleUpdate();
+ if (running) {
+ fadeOutEffect.visible = true;
+ } else {
+ fadeOutEffect.visible = false;
+ }
+ }
+
+ // 淡出
+ NumberAnimation {
+ duration: 366
+ easing.type: Easing.OutExpo
+ from: 1
+ property: "opacity"
+ target: fadeOutEffect
+ to: 0
+ }
+
+ // 淡入
+ NumberAnimation {
+ duration: 366
+ easing.type: Easing.OutExpo
+ from: 0
+ property: "opacity"
+ target: bottomthumbnaillistView
+ to: 1
+ }
+ }
+ }
  delegate: Loader {
  id: thumbnailItemLoader
 
@@ -335,7 +369,7 @@ Control {
  Component.onCompleted: {
  bottomthumbnaillistView.currentIndex = IV.GControl.currentIndex;
  forceLayout();
- rePositionView();
+ rePositionView(true);
  }
 
  //滑动联动主视图
@@ -344,9 +378,6 @@ Control {
  currentItem.forceActiveFocus();
  }
 
- // 直接定位，屏蔽动画效果
- rePositionView();
-
  // 仅在边缘缩略图时进行二次定位
  if (0 === currentIndex || currentIndex === (count - 1)) {
  delayUpdateTimer.start();
@@ -392,11 +423,25 @@ Control {
 
  onTriggered: {
  bottomthumbnaillistView.forceLayout();
- bottomthumbnaillistView.rePositionView();
+ bottomthumbnaillistView.rePositionView(false);
  }
  }
  }
 
+ // 捕获列表Item，用于切换图片时淡入淡出效果
+ ShaderEffectSource {
+ id: fadeOutEffect
+
+ anchors.fill: bottomthumbnaillistView
+ hideSource: false
+ // 不自动刷新，使用 scheduleUpdate() 刷新显示状态
+ live: false
+ recursive: false
+ sourceItem: bottomthumbnaillistView
+ visible: true
+ z: 1
+ }
+
  Row {
  id: rightRowLayout