1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Page } from "page.slint";
5import { Button, HorizontalBox, Slider, ScrollView, Palette } from "std-widgets.slint";
6
7component EaseTest {
8 in property <string> label: "None";
9 in property <easing> easing: linear;
10 in property <int> duration: 1000;
11
12 public function animate() {
13 if (ball.x == 0) {
14 ball.x = container.width - 16px;
15 } else {
16 ball.x = 0;
17 }
18 }
19
20 HorizontalLayout {
21 padding: 10px;
22 spacing: 10px;
23
24 Button {
25 width: 140px;
26 horizontal-stretch: 0;
27 text: label; clicked => { root.animate(); }
28 }
29
30 VerticalLayout {
31 alignment: center;
32
33 container := Rectangle {
34 horizontal-stretch: 1;
35 height: 4px;
36 border-radius: 2px;
37 background: Palette.control-background;
38
39 ball := Rectangle {
40 x: 0px;
41 width: 16px;
42 height: 16px;
43 border-radius: 5px;
44 background: Palette.accent-background;
45
46 animate x { duration: duration * 1ms; easing: easing; }
47 }
48 }
49 }
50 }
51}
52
53export component EasingsPage inherits Page {
54 show-enable-switch: false;
55 title: @tr("Easings");
56 description: @tr("Easing demos");
57
58 private property <int> curr-duration: slider.value;
59
60 VerticalLayout {
61 padding: 10px;
62 spacing: 10px;
63
64 HorizontalBox {
65 Button {
66 text: @tr("Animate All");
67 clicked => {
68 linear-test.animate();
69 ease-in-quad-test.animate();
70 ease-out-quad-test.animate();
71 ease-in-out-quad-test.animate();
72 ease-test.animate();
73 ease-in-test.animate();
74 ease-out-test.animate();
75 ease-in-out-test.animate();
76 ease-in-quart-test.animate();
77 ease-out-quart-test.animate();
78 ease-in-out-quart-test.animate();
79 ease-in-quint-test.animate();
80 ease-out-quint-test.animate();
81 ease-in-out-quint-test.animate();
82 ease-in-expo-test.animate();
83 ease-out-expo-test.animate();
84 ease-in-out-expo-test.animate();
85 ease-in-sine-test.animate();
86 ease-out-sine-test.animate();
87 ease-in-out-sine-test.animate();
88 ease-in-back-test.animate();
89 ease-out-back-test.animate();
90 ease-in-out-back-test.animate();
91 ease-in-circ-test.animate();
92 ease-out-circ-test.animate();
93 ease-in-out-circ-test.animate();
94 ease-in-elastic-test.animate();
95 ease-out-elastic-test.animate();
96 ease-in-out-elastic-test.animate();
97 ease-in-bounce-test.animate();
98 ease-out-bounce-test.animate();
99 ease-in-out-bounce-test.animate();
100 }
101 }
102 Text { text: @tr("Duration:"); vertical-alignment: center ;}
103 slider := Slider { minimum: 100; maximum: 5000; value: 1000; }
104 Text { text: "" + round(slider.value) + "ms"; vertical-alignment: center; }
105 }
106 }
107
108 ScrollView {
109 VerticalLayout {
110 padding-right: 10px;
111
112 linear-test := EaseTest { label: "linear"; easing: linear; duration: curr-duration; }
113 ease-in-quad-test := EaseTest { label: "ease-in-quad"; easing: ease-in-quad; duration: curr-duration; }
114 ease-out-quad-test := EaseTest { label: "ease-out-quad"; easing: ease-out-quad; duration: curr-duration; }
115 ease-in-out-quad-test := EaseTest { label: "ease-in-out-quad"; easing: ease-in-out-quad; duration: curr-duration; }
116
117 ease-test := EaseTest { label: "ease"; easing: ease; duration: curr-duration; }
118 ease-in-test := EaseTest { label: "ease-in"; easing: ease-in; duration: curr-duration; }
119 ease-out-test := EaseTest { label: "ease-out"; easing: ease-out; duration: curr-duration; }
120 ease-in-out-test := EaseTest { label: "ease-in-out"; easing: ease-in-out; duration: curr-duration; }
121
122 ease-in-quart-test := EaseTest { label: "ease-in-quart"; easing: ease-in-quart; duration: curr-duration; }
123 ease-out-quart-test := EaseTest { label: "ease-out-quart"; easing: ease-out-quart; duration: curr-duration; }
124 ease-in-out-quart-test := EaseTest { label: "ease-in-out-quart"; easing: ease-in-out-quart; duration: curr-duration; }
125
126 ease-in-quint-test := EaseTest { label: "ease-in-quint"; easing: ease-in-quint; duration: curr-duration; }
127 ease-out-quint-test := EaseTest { label: "ease-out-quint"; easing: ease-out-quint; duration: curr-duration; }
128 ease-in-out-quint-test := EaseTest { label: "ease-in-out-quint"; easing: ease-in-out-quint; duration: curr-duration; }
129
130 ease-in-expo-test := EaseTest { label: "ease-in-expo"; easing: ease-in-expo; duration: curr-duration; }
131 ease-out-expo-test := EaseTest { label: "ease-out-expo"; easing: ease-out-expo; duration: curr-duration; }
132 ease-in-out-expo-test := EaseTest { label: "ease-in-out-expo"; easing: ease-in-out-expo; duration: curr-duration; }
133
134 ease-in-sine-test := EaseTest { label: "ease-in-sine"; easing: ease-in-sine; duration: curr-duration; }
135 ease-out-sine-test := EaseTest { label: "ease-out-sine"; easing: ease-out-sine; duration: curr-duration; }
136 ease-in-out-sine-test := EaseTest { label: "ease-in-out-sine"; easing: ease-in-out-sine; duration: curr-duration; }
137
138 ease-in-back-test := EaseTest { label: "ease-in-back"; easing: ease-in-back; duration: curr-duration; }
139 ease-out-back-test := EaseTest { label: "ease-out-back"; easing: ease-out-back; duration: curr-duration; }
140 ease-in-out-back-test := EaseTest { label: "ease-in-out-back"; easing: ease-in-out-back; duration: curr-duration; }
141
142 ease-in-circ-test := EaseTest { label: "ease-in-circ"; easing: ease-in-circ; duration: curr-duration; }
143 ease-out-circ-test := EaseTest { label: "ease-out-circ"; easing: ease-out-circ; duration: curr-duration; }
144 ease-in-out-circ-test := EaseTest { label: "ease-in-out-circ"; easing: ease-in-out-circ; duration: curr-duration; }
145
146 ease-in-elastic-test := EaseTest { label: "ease-in-elastic"; easing: ease-in-elastic; duration: curr-duration; }
147 ease-out-elastic-test := EaseTest { label: "ease-out-elastic"; easing: ease-out-elastic; duration: curr-duration; }
148 ease-in-out-elastic-test := EaseTest { label: "ease-in-out-elastic"; easing: ease-in-out-elastic; duration: curr-duration; }
149
150 ease-in-bounce-test := EaseTest { label: "ease-in-bounce"; easing: ease-in-bounce; duration: curr-duration; }
151 ease-out-bounce-test := EaseTest { label: "ease-out-bounce"; easing: ease-out-bounce; duration: curr-duration; }
152 ease-in-out-bounce-test := EaseTest { label: "ease-in-out-bounce"; easing: ease-in-out-bounce; duration: curr-duration; }
153 }
154 }
155}
156