d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-21 18:50:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

disable ripples when reduced motion is enabled

Browse source
This commit is contained in:
Karthik Nishanth 2024-06-23 18:08:22 -07:00
parent 03fcf6a661
commit 3b339a8007
3 changed files with 139 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CMakeLists.txt
View file

@ -798,6 +798,7 @@ set(QML_SOURCES
resources/qml/pages/WelcomePage.qml
resources/qml/ui/NhekoSlider.qml
resources/qml/ui/Ripple.qml
resources/qml/ui/RippleImpl.qml
resources/qml/ui/Snackbar.qml
resources/qml/ui/Spinner.qml
resources/qml/ui/animations/BlinkAnimation.qml

128
resources/qml/ui/Ripple.qml
View file

@ -2,128 +2,18 @@
//
// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick
import QtQuick 2.15
import im.nheko 1.0
Item {
id: ripple
id: wrapper
property color color
property color color: "#22000000"
property real maxRadius: Math.max(width, height)
readonly property real radiusAnimationRate: 0.05
readonly property real radiusTailAnimationRate: 0.5
readonly property real opacityAnimationDuration: 300
property var rippleTarget: parent
anchors.fill: parent
PointHandler {
id: ph
onGrabChanged: (_, point) => {
circle.centerX = point.position.x
circle.centerY = point.position.y
}
target: Rectangle {
id: backgroundLayer
parent: rippleTarget
anchors.fill: parent
color: "transparent"
clip: true
Rectangle {
id: circle
property real centerX
property real centerY
x: centerX - radius
y: centerY - radius
height: radius*2
width: radius*2
radius: 0
color: ripple.color
state: ph.active ? "ACTIVE" : "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"
SequentialAnimation {
//PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
//PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
PropertyAction { target: circle; property: "visible"; value: true }
PropertyAction { target: circle; property: "opacity"; value: 1 }
NumberAnimation {
id: radius_animation
target: circle
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate
easing {
type: Easing.OutQuad
}
}
}
},
Transition {
from: "ACTIVE"
to: "NORMAL"
SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation
target: circle
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
easing {
type: Easing.Linear
}
}
NumberAnimation {
id: opacity_animation
target: circle
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration
easing {
type: Easing.InQuad
}
}
}
PropertyAction { target: circle; property: "visible"; value: false }
}
}
]
}
Loader {
Component {
id: ripple
RippleImpl { color: color; parent: wrapper.parent; }
}
sourceComponent: !Settings.reducedMotion ? ripple : undefined
}
}

129
resources/qml/ui/RippleImpl.qml Normal file
View file

@ -0,0 +1,129 @@
// SPDX-FileCopyrightText: Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick 2.15
Item {
id: ripple
property color color: "#22000000"
property real maxRadius: Math.max(width, height)
readonly property real radiusAnimationRate: 0.05
readonly property real radiusTailAnimationRate: 0.5
readonly property real opacityAnimationDuration: 300
property var rippleTarget: parent
anchors.fill: parent
PointHandler {
id: ph
onGrabChanged: (_, point) => {
circle.centerX = point.position.x
circle.centerY = point.position.y
}
target: Rectangle {
id: backgroundLayer
parent: rippleTarget
anchors.fill: parent
color: "transparent"
clip: true
Rectangle {
id: circle
property real centerX
property real centerY
x: centerX - radius
y: centerY - radius
height: radius*2
width: radius*2
radius: 0
color: ripple.color
state: ph.active ? "ACTIVE" : "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"
SequentialAnimation {
//PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
//PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
PropertyAction { target: circle; property: "visible"; value: true }
PropertyAction { target: circle; property: "opacity"; value: 1 }
NumberAnimation {
id: radius_animation
target: circle
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate
easing {
type: Easing.OutQuad
}
}
}
},
Transition {
from: "ACTIVE"
to: "NORMAL"
SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation
target: circle
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate
easing {
type: Easing.Linear
}
}
NumberAnimation {
id: opacity_animation
target: circle
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration
easing {
type: Easing.InQuad
}
}
}
PropertyAction { target: circle; property: "visible"; value: false }
}
}
]
}
}
}
}