420 lines
16 KiB
QML
420 lines
16 KiB
QML
// SPDX-License-Identifier: GPL-3.0-or-later
|
|
//
|
|
// The face: four corner brackets around two eyes, a nose and a smile, the
|
|
// shape everybody knows from a phone. Drawn with shapes rather than played
|
|
// from a video, so it is sharp at any size and every part can move on its own.
|
|
//
|
|
// idle still
|
|
// scanning the face turns its head around inside the brackets, the
|
|
// brackets breathe
|
|
// tracking a face is in view: it looks straight ahead, brackets close in
|
|
// success the rings (below), then a tick in the one that is left
|
|
// failure it turns red and shakes its head, as on iOS
|
|
// lockout a lock instead of a face
|
|
//
|
|
// The rings are Face ID's in the Dynamic Island: the face gives way to two
|
|
// crossed rings that tumble in 3D with a soft glow, slow down, and land flat
|
|
// facing forward; one fades, the other sharpens, and the tick draws inside it.
|
|
|
|
import QtQuick
|
|
import QtQuick.Effects
|
|
import QtQuick.Shapes
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property string mode: "idle"
|
|
property color color: Theme.textPrimary
|
|
property real lineWidth: width * 0.055
|
|
|
|
// The verdict is showing: after the rings on success, at once on failure.
|
|
signal settled(bool success)
|
|
|
|
readonly property real u: width / 100
|
|
readonly property bool looking: mode === "scanning"
|
|
readonly property color bracketColor: mode === "success" ? Theme.success
|
|
: mode === "failure" ? Theme.failure
|
|
: root.color
|
|
|
|
// -- the head turning round while it looks, as Face ID's does. The
|
|
// features sit on a head at different depths (the nose in front, the
|
|
// mouth further back) and turn with it, so the nose swings further than
|
|
// the eyes and the face narrows on the side it turns away from.
|
|
property real lookAngle: 0
|
|
NumberAnimation on lookAngle {
|
|
running: root.looking
|
|
from: 0
|
|
to: 2 * Math.PI
|
|
duration: 2000
|
|
loops: Animation.Infinite
|
|
}
|
|
property real lookAmount: root.looking ? 1 : 0
|
|
Behavior on lookAmount { NumberAnimation { duration: 350; easing.type: Easing.InOutQuad } }
|
|
readonly property real yaw: 0.34 * Math.cos(lookAngle) * lookAmount
|
|
readonly property real pitch: 0.2 * Math.sin(lookAngle) * lookAmount
|
|
|
|
// A point of the face, x and y from the middle and z towards the viewer
|
|
// (all in hundredths of the glyph), turned with the head and drawn flat.
|
|
function faceX(x, y, z) {
|
|
return (50 + x * Math.cos(yaw) + z * Math.sin(yaw)) * u
|
|
}
|
|
function faceY(x, y, z) {
|
|
const depth = z * Math.cos(yaw) - x * Math.sin(yaw)
|
|
return (50 + y * Math.cos(pitch) - depth * Math.sin(pitch)) * u
|
|
}
|
|
|
|
// -- the smile, flat on failure
|
|
property real smile: mode === "failure" ? 0 : 1
|
|
Behavior on smile { NumberAnimation { duration: 220; easing.type: Easing.OutQuad } }
|
|
|
|
// -- the brackets breathe while scanning and close in on a face
|
|
property real breathe: 0
|
|
SequentialAnimation on breathe {
|
|
running: root.looking
|
|
loops: Animation.Infinite
|
|
NumberAnimation { from: 0; to: 1; duration: 700; easing.type: Easing.InOutSine }
|
|
NumberAnimation { from: 1; to: 0; duration: 700; easing.type: Easing.InOutSine }
|
|
onRunningChanged: if (!running) root.breathe = 0
|
|
}
|
|
readonly property real bracketScale: mode === "tracking" ? 0.9 : 1 - 0.04 * breathe
|
|
|
|
// -- the rings, on one timeline
|
|
// Through the success, 0 to 1.
|
|
property real t: 0
|
|
property real tick: 0
|
|
|
|
function smooth(from, to, p) {
|
|
const x = Math.max(0, Math.min(1, (p - from) / (to - from)))
|
|
return x * x * (3 - 2 * x)
|
|
}
|
|
// How far the rings have turned at p: speeding up from rest, fastest a
|
|
// quarter of the way in, then settling softly, facing forward.
|
|
function turned(p) {
|
|
return p * p * (10 - p * (20 - p * (15 - 4 * p)))
|
|
}
|
|
|
|
readonly property real faceGone: smooth(0, 0.22, t)
|
|
readonly property real ringsIn: smooth(0.04, 0.26, t)
|
|
readonly property real turn: turned(Math.min(1, t / 0.7))
|
|
readonly property real ringSize: 40 * (0.7 + 0.3 * ringsIn)
|
|
// One ring turns over once and round a quarter, ending flat; the other
|
|
// crosses it, tilted, and fades as they land.
|
|
readonly property var ringA: ring(0, -360 * turn, 90 * turn, ringSize)
|
|
readonly property var ringB: ring(70 + 360 * turn, 30 + 360 * turn, -90 * turn, ringSize)
|
|
// Gone by the time the tick starts, so it draws in a clean ring.
|
|
readonly property real ringBShown: 1 - smooth(0.36, 0.58, t)
|
|
// How dim the far half is: more the more a ring is tilted, none flat.
|
|
readonly property real ringABack: 1 - 0.6 * tilt(ringA)
|
|
readonly property real ringBBack: 1 - 0.6 * tilt(ringB)
|
|
// Sharpens as it settles and on while the tick draws, not in one go.
|
|
readonly property real glow: 1 - smooth(0.42, 0.75, t)
|
|
|
|
onModeChanged: {
|
|
succeed.stop()
|
|
drawTick.stop()
|
|
t = 0
|
|
tick = 0
|
|
// From mode itself: bindings on it may not have caught up yet.
|
|
if (mode === "failure") {
|
|
shakeAnimation.restart()
|
|
settled(false)
|
|
} else if (mode === "success") {
|
|
succeed.start()
|
|
}
|
|
}
|
|
|
|
SequentialAnimation {
|
|
id: succeed
|
|
ParallelAnimation {
|
|
NumberAnimation { target: root; property: "t"; from: 0; to: 1; duration: 850 }
|
|
// The tick starts as the ring comes to rest, so the one motion
|
|
// runs on into the other.
|
|
SequentialAnimation {
|
|
PauseAnimation { duration: 470 }
|
|
ScriptAction { script: drawTick.start() }
|
|
}
|
|
}
|
|
ScriptAction { script: root.settled(true) }
|
|
}
|
|
NumberAnimation {
|
|
id: drawTick
|
|
target: root
|
|
property: "tick"
|
|
to: 1
|
|
duration: 260
|
|
easing.type: Easing.OutQuad
|
|
}
|
|
|
|
// A ring of the given size turned in 3D (degrees about x, then y, then
|
|
// z), as points x and y from the middle and z towards the viewer.
|
|
function ring(ax, ay, az, radius) {
|
|
const d = Math.PI / 180
|
|
const ca = Math.cos(ax * d), sa = Math.sin(ax * d)
|
|
const cb = Math.cos(ay * d), sb = Math.sin(ay * d)
|
|
const cg = Math.cos(az * d), sg = Math.sin(az * d)
|
|
const points = []
|
|
for (let i = 0; i < 64; ++i) {
|
|
const phi = 2 * Math.PI * i / 64
|
|
let x = radius * Math.cos(phi)
|
|
let y = radius * Math.sin(phi) * ca
|
|
let z = radius * Math.sin(phi) * sa
|
|
const x1 = x * cb + z * sb
|
|
z = z * cb - x * sb
|
|
x = x1
|
|
const x2 = x * cg - y * sg
|
|
y = x * sg + y * cg
|
|
x = x2
|
|
points.push([x, y, z])
|
|
}
|
|
return points
|
|
}
|
|
// How far a ring leans out of the screen, 0 flat to 1 edge on.
|
|
function tilt(points) {
|
|
let most = 0
|
|
for (let i = 0; i < points.length; ++i) {
|
|
most = Math.max(most, Math.abs(points[i][2]))
|
|
}
|
|
return points.length ? most / Math.max(1, Math.hypot(points[0][0], points[0][1], points[0][2])) : 0
|
|
}
|
|
function onScreen(p) {
|
|
return Qt.point((50 + p[0]) * u, (50 + p[1]) * u)
|
|
}
|
|
// The half of a ring in front of the middle, or behind it, in one piece
|
|
// and reaching one point into the other half so the two meet.
|
|
function half(points, front) {
|
|
const n = points.length
|
|
const inFront = i => points[(i + n) % n][2] >= -1e-6
|
|
let start = -1
|
|
for (let i = 0; i < n; ++i) {
|
|
if (inFront(i) === front && inFront(i - 1) !== front) {
|
|
start = i
|
|
break
|
|
}
|
|
}
|
|
const out = []
|
|
if (start < 0) {
|
|
if (inFront(0) === front) {
|
|
for (let i = 0; i <= n; ++i) {
|
|
out.push(onScreen(points[i % n]))
|
|
}
|
|
}
|
|
return out
|
|
}
|
|
out.push(onScreen(points[(start + n - 1) % n]))
|
|
let i = start
|
|
while (inFront(i) === front && i < start + n) {
|
|
out.push(onScreen(points[i % n]))
|
|
++i
|
|
}
|
|
out.push(onScreen(points[i % n]))
|
|
return out
|
|
}
|
|
function whole(points) {
|
|
const out = points.map(onScreen)
|
|
out.push(out[0])
|
|
return out
|
|
}
|
|
function faded(c, alpha) {
|
|
return Qt.rgba(c.r, c.g, c.b, alpha)
|
|
}
|
|
|
|
// -- a shake of the head
|
|
property real shake: 0
|
|
SequentialAnimation {
|
|
id: shakeAnimation
|
|
NumberAnimation { target: root; property: "shake"; to: -9; duration: 55; easing.type: Easing.OutQuad }
|
|
NumberAnimation { target: root; property: "shake"; to: 8; duration: 70; easing.type: Easing.InOutQuad }
|
|
NumberAnimation { target: root; property: "shake"; to: -6; duration: 65; easing.type: Easing.InOutQuad }
|
|
NumberAnimation { target: root; property: "shake"; to: 4; duration: 60; easing.type: Easing.InOutQuad }
|
|
NumberAnimation { target: root; property: "shake"; to: -2; duration: 55; easing.type: Easing.InOutQuad }
|
|
NumberAnimation { target: root; property: "shake"; to: 0; duration: 50; easing.type: Easing.OutQuad }
|
|
}
|
|
|
|
Item {
|
|
id: glyph
|
|
anchors.fill: parent
|
|
transform: Translate { x: root.shake * root.u }
|
|
|
|
// Brackets, giving way to the rings
|
|
Item {
|
|
anchors.fill: parent
|
|
opacity: 1 - root.faceGone
|
|
scale: 1 - 0.15 * root.faceGone
|
|
|
|
Shape {
|
|
id: brackets
|
|
anchors.fill: parent
|
|
preferredRendererType: Shape.CurveRenderer
|
|
scale: root.bracketScale
|
|
Behavior on scale { NumberAnimation { duration: 260; easing.type: Easing.OutBack } }
|
|
|
|
component Bracket: ShapePath {
|
|
strokeColor: root.bracketColor
|
|
strokeWidth: root.lineWidth
|
|
fillColor: "transparent"
|
|
capStyle: ShapePath.RoundCap
|
|
joinStyle: ShapePath.RoundJoin
|
|
Behavior on strokeColor { ColorAnimation { duration: 220 } }
|
|
}
|
|
|
|
Bracket {
|
|
startX: 6 * root.u; startY: 30 * root.u
|
|
PathLine { x: 6 * root.u; y: 19 * root.u }
|
|
PathQuad { x: 19 * root.u; y: 6 * root.u; controlX: 6 * root.u; controlY: 6 * root.u }
|
|
PathLine { x: 30 * root.u; y: 6 * root.u }
|
|
}
|
|
Bracket {
|
|
startX: 70 * root.u; startY: 6 * root.u
|
|
PathLine { x: 81 * root.u; y: 6 * root.u }
|
|
PathQuad { x: 94 * root.u; y: 19 * root.u; controlX: 94 * root.u; controlY: 6 * root.u }
|
|
PathLine { x: 94 * root.u; y: 30 * root.u }
|
|
}
|
|
Bracket {
|
|
startX: 94 * root.u; startY: 70 * root.u
|
|
PathLine { x: 94 * root.u; y: 81 * root.u }
|
|
PathQuad { x: 81 * root.u; y: 94 * root.u; controlX: 94 * root.u; controlY: 94 * root.u }
|
|
PathLine { x: 70 * root.u; y: 94 * root.u }
|
|
}
|
|
Bracket {
|
|
startX: 30 * root.u; startY: 94 * root.u
|
|
PathLine { x: 19 * root.u; y: 94 * root.u }
|
|
PathQuad { x: 6 * root.u; y: 81 * root.u; controlX: 6 * root.u; controlY: 94 * root.u }
|
|
PathLine { x: 6 * root.u; y: 70 * root.u }
|
|
}
|
|
}
|
|
}
|
|
|
|
// The rings: a soft glow under them, their far halves dimmed, the near
|
|
// halves on top.
|
|
Item {
|
|
anchors.fill: parent
|
|
visible: root.t > 0
|
|
opacity: root.ringsIn
|
|
|
|
Shape {
|
|
anchors.fill: parent
|
|
opacity: 0.8 * root.glow
|
|
layer.enabled: parent.visible && root.glow > 0
|
|
layer.effect: MultiEffect {
|
|
blurEnabled: true
|
|
blur: 1
|
|
blurMax: 20
|
|
}
|
|
|
|
ShapePath {
|
|
strokeColor: root.bracketColor
|
|
strokeWidth: root.lineWidth * 1.6
|
|
fillColor: "transparent"
|
|
PathPolyline { path: root.whole(root.ringA) }
|
|
}
|
|
ShapePath {
|
|
strokeColor: root.faded(root.bracketColor, root.ringBShown)
|
|
strokeWidth: root.lineWidth * 1.6
|
|
fillColor: "transparent"
|
|
PathPolyline { path: root.whole(root.ringB) }
|
|
}
|
|
}
|
|
|
|
Shape {
|
|
anchors.fill: parent
|
|
preferredRendererType: Shape.CurveRenderer
|
|
|
|
component RingPath: ShapePath {
|
|
fillColor: "transparent"
|
|
strokeWidth: root.lineWidth
|
|
capStyle: ShapePath.RoundCap
|
|
joinStyle: ShapePath.RoundJoin
|
|
}
|
|
|
|
RingPath {
|
|
strokeColor: root.faded(root.bracketColor, root.ringABack)
|
|
PathPolyline { path: root.half(root.ringA, false) }
|
|
}
|
|
RingPath {
|
|
strokeColor: root.faded(root.bracketColor, root.ringBBack * root.ringBShown)
|
|
PathPolyline { path: root.half(root.ringB, false) }
|
|
}
|
|
RingPath {
|
|
strokeColor: root.faded(root.bracketColor, root.ringBShown)
|
|
PathPolyline { path: root.half(root.ringB, true) }
|
|
}
|
|
RingPath {
|
|
strokeColor: root.bracketColor
|
|
PathPolyline { path: root.half(root.ringA, true) }
|
|
}
|
|
}
|
|
}
|
|
|
|
// The face itself
|
|
Shape {
|
|
id: face
|
|
anchors.fill: parent
|
|
preferredRendererType: Shape.CurveRenderer
|
|
// Gives way to the rings, and to the lock.
|
|
property real shown: root.mode === "lockout" ? 0 : 1
|
|
Behavior on shown { NumberAnimation { duration: 180 } }
|
|
opacity: shown * (1 - root.faceGone)
|
|
scale: 1 - 0.2 * root.faceGone
|
|
|
|
component Feature: ShapePath {
|
|
strokeColor: root.bracketColor
|
|
strokeWidth: root.lineWidth
|
|
fillColor: "transparent"
|
|
capStyle: ShapePath.RoundCap
|
|
joinStyle: ShapePath.RoundJoin
|
|
Behavior on strokeColor { ColorAnimation { duration: 220 } }
|
|
}
|
|
|
|
// Eyes
|
|
Feature {
|
|
startX: root.faceX(-16, -14, 26); startY: root.faceY(-16, -14, 26)
|
|
PathLine { x: root.faceX(-16, -5, 26); y: root.faceY(-16, -5, 26) }
|
|
}
|
|
Feature {
|
|
startX: root.faceX(16, -14, 26); startY: root.faceY(16, -14, 26)
|
|
PathLine { x: root.faceX(16, -5, 26); y: root.faceY(16, -5, 26) }
|
|
}
|
|
// Nose, with its little hook
|
|
Feature {
|
|
startX: root.faceX(0, -13, 29); startY: root.faceY(0, -13, 29)
|
|
PathLine { x: root.faceX(0, 6, 37); y: root.faceY(0, 6, 37) }
|
|
PathQuad {
|
|
x: root.faceX(-5, 11, 31); y: root.faceY(-5, 11, 31)
|
|
controlX: root.faceX(0, 11, 35); controlY: root.faceY(0, 11, 35)
|
|
}
|
|
}
|
|
// Mouth
|
|
Feature {
|
|
startX: root.faceX(-15, 20, 21); startY: root.faceY(-15, 20, 21)
|
|
PathQuad {
|
|
x: root.faceX(15, 20, 21); y: root.faceY(15, 20, 21)
|
|
controlX: root.faceX(0, 20 + 11 * root.smile, 24); controlY: root.faceY(0, 20 + 11 * root.smile, 24)
|
|
}
|
|
}
|
|
}
|
|
|
|
// The tick, drawn inside the ring as it comes to rest
|
|
Checkmark {
|
|
anchors.fill: parent
|
|
scale: 0.75
|
|
transform: Translate { x: 1.5 * root.u }
|
|
color: Theme.success
|
|
lineWidth: root.lineWidth / 0.75
|
|
progress: root.tick
|
|
// Its first dot fades in rather than popping up.
|
|
opacity: Math.min(1, root.tick * 8)
|
|
}
|
|
|
|
LockGlyph {
|
|
anchors.centerIn: parent
|
|
width: parent.width * 0.42
|
|
height: width
|
|
color: root.color
|
|
opacity: root.mode === "lockout" ? 1 : 0
|
|
scale: root.mode === "lockout" ? 1 : 0.7
|
|
Behavior on opacity { NumberAnimation { duration: 200 } }
|
|
Behavior on scale { NumberAnimation { duration: 260; easing.type: Easing.OutBack } }
|
|
}
|
|
}
|
|
}
|