mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-21 07:41:51 +00:00
Examples: Update fancy-switch with new rotation / scale properties (#9637)
This commit is contained in:
Nigel Breslaw
GitHub
parent
a2b4764b05
commit
640d25d53a
3 changed files with 39 additions and 47 deletions
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
component RayThick {
|
||||
in-out property colorize <=> i.colorize;
|
||||
in-out property rotation <=> i.rotation-angle;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
|
||||
|
|
@ -18,7 +17,6 @@ component RayThick {
|
|||
|
||||
component RayThin {
|
||||
in-out property colorize <=> i.colorize;
|
||||
in-out property rotation <=> i.rotation-angle;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
|
||||
|
|
@ -37,14 +35,13 @@ component SunIcon {
|
|||
property <length> sun-size: 28px;
|
||||
property <length> gap: 8px;
|
||||
in property <brush> color: black;
|
||||
in property <float> scale: 1;
|
||||
width: 80px;
|
||||
height: self.width;
|
||||
Rectangle {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
Rectangle {
|
||||
width: sun-size * scale;
|
||||
width: sun-size;
|
||||
height: self.width;
|
||||
border-radius: self.width / 2;
|
||||
background: transparent;
|
||||
|
|
@ -52,19 +49,16 @@ component SunIcon {
|
|||
border-width: 5px;
|
||||
}
|
||||
for i in rays: RayThick {
|
||||
property <angle> angle: i * 360deg / rays;
|
||||
x: (sun-size / 2 + gap) * self.rotation-angle.cos();
|
||||
y: (sun-size / 2 + gap) * self.rotation-angle.sin();
|
||||
colorize: root.color;
|
||||
x: (sun-size / 2 + gap) * scale * angle.cos();
|
||||
y: (sun-size / 2 + gap) * scale * angle.sin();
|
||||
|
||||
rotation: angle;
|
||||
rotation-angle: i * 360deg / rays;
|
||||
}
|
||||
for i in rays: RayThin {
|
||||
property <angle> angle: i * (360deg / rays) + 45deg;
|
||||
x: (sun-size / 2 + gap) * self.rotation-angle.cos();
|
||||
y: (sun-size / 2 + gap) * self.rotation-angle.sin();
|
||||
colorize: root.color;
|
||||
x: (sun-size / 2 + gap) * angle.cos();
|
||||
y: (sun-size / 2 + gap) * angle.sin();
|
||||
rotation: angle;
|
||||
rotation-angle: i * (360deg / rays) + 45deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,13 +123,14 @@ export component DarkModeSwitch {
|
|||
frameBacker.background: #2A2A2A;
|
||||
moon.rotation-angle: -20deg;
|
||||
sun.color: #fc7a10;
|
||||
sun.scale: 0.8;
|
||||
sun.scale-x: 0.8;
|
||||
sun.scale-y: 0.8;
|
||||
in {
|
||||
animate thumb.x, thumb.background, frameBacker.background, sun.color {
|
||||
duration: 200ms;
|
||||
easing: ease-out-sine;
|
||||
}
|
||||
animate moon.rotation-angle, sun.scale {
|
||||
animate moon.rotation-angle, sun.scale-x, sun.scale-y {
|
||||
duration: 1200ms;
|
||||
easing: ease-out-elastic;
|
||||
}
|
||||
|
|
@ -148,13 +143,14 @@ export component DarkModeSwitch {
|
|||
frameBacker.background: transparent;
|
||||
moon.rotation-angle: 20deg;
|
||||
sun.color: #2A2A2A;
|
||||
sun.scale: 1;
|
||||
sun.scale-x: 1;
|
||||
sun.scale-y: 1;
|
||||
in {
|
||||
animate thumb.x, thumb.background, frameBacker.background, moon.rotation-angle {
|
||||
duration: 200ms;
|
||||
easing: ease-out-sine;
|
||||
}
|
||||
animate sun.scale {
|
||||
animate sun.scale-x, sun.scale-y {
|
||||
duration: 1200ms;
|
||||
easing: ease-out-elastic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,12 @@ global Utils {
|
|||
}
|
||||
}
|
||||
component SunMoonThumb {
|
||||
in property <float> scale: 1;
|
||||
in property <length> thumb-position: 50px * scale;
|
||||
in property <length> thumb-position: 50px;
|
||||
|
||||
|
||||
Rectangle {
|
||||
width: 200px * scale;
|
||||
height: 100px * scale;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: self.height / 2;
|
||||
clip: true;
|
||||
Rectangle {
|
||||
|
|
@ -21,21 +20,21 @@ component SunMoonThumb {
|
|||
height: 0px;
|
||||
x: root.thumb-position;
|
||||
Rectangle {
|
||||
width: 260px * scale;
|
||||
width: 260px;
|
||||
height: self.width;
|
||||
background: white;
|
||||
border-radius: self.width / 2;
|
||||
opacity: 0.05;
|
||||
}
|
||||
Rectangle {
|
||||
width: 200px * scale;
|
||||
width: 200px;
|
||||
height: self.width;
|
||||
background: white;
|
||||
border-radius: self.width / 2;
|
||||
opacity: 0.05;
|
||||
}
|
||||
Rectangle {
|
||||
width: 140px * scale;
|
||||
width: 140px;
|
||||
height: self.width;
|
||||
background: white;
|
||||
border-radius: self.width / 2;
|
||||
|
|
@ -43,21 +42,21 @@ component SunMoonThumb {
|
|||
}
|
||||
|
||||
clipper :=Rectangle {
|
||||
width: 85px * scale;
|
||||
width: 85px;
|
||||
height: self.width;
|
||||
border-radius: self.width / 2;
|
||||
clip: true;
|
||||
|
||||
sun := Rectangle {
|
||||
width: 85px * scale;
|
||||
width: 85px;
|
||||
height: self.width;
|
||||
background: @radial-gradient(circle,#ffce08 0%, #fdd224 80%, #fce37f 100%);
|
||||
border-radius: self.width / 2;
|
||||
}
|
||||
|
||||
moon := Rectangle {
|
||||
x: Utils.MapRange(root.thumb-position, 50px * scale, 100px * scale, 85px * scale, 0px);
|
||||
width: 85px * scale;
|
||||
x: Utils.MapRange(root.thumb-position, 50px, 100px, 85px, 0px);
|
||||
width: 85px;
|
||||
height: self.width;
|
||||
background: @radial-gradient(circle,#bcbcbc 0%, #e7e7e7 80%, #ffffff 100%);
|
||||
border-radius: self.width / 2;
|
||||
|
|
@ -72,9 +71,8 @@ component SunMoonThumb {
|
|||
enum Theme { day, night }
|
||||
export component SunMoonSwitch {
|
||||
property <Theme> theme: Theme.night;
|
||||
in property <float> scale: 1;
|
||||
width: 200px * scale;
|
||||
height: 100px * scale;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
|
||||
frameBacker := Rectangle {
|
||||
width: parent.width;
|
||||
|
|
@ -91,22 +89,22 @@ export component SunMoonSwitch {
|
|||
border-radius: self.height / 2;
|
||||
|
||||
clouds-background :=Image {
|
||||
x: 14px * scale;
|
||||
y: -6px * scale;
|
||||
width: 202px * scale;
|
||||
x: 14px;
|
||||
y: -6px;
|
||||
width: 202px;
|
||||
source: @image-url("images/clouds-background.png");
|
||||
}
|
||||
clouds-foreground := Image {
|
||||
x: 30px * scale;
|
||||
y: 5px * scale;
|
||||
width: 202px * scale;
|
||||
x: 30px;
|
||||
y: 5px;
|
||||
width: 202px;
|
||||
source: @image-url("images/clouds-front.png");
|
||||
}
|
||||
|
||||
stars := Image {
|
||||
x: 15px * scale;
|
||||
y: 15px * scale;
|
||||
width: 80px * scale;
|
||||
x: 15px;
|
||||
y: 15px;
|
||||
width: 80px;
|
||||
source: @image-url("images/stars.png");
|
||||
}
|
||||
}
|
||||
|
|
@ -114,13 +112,12 @@ export component SunMoonSwitch {
|
|||
|
||||
|
||||
Image {
|
||||
x: -1px * scale;
|
||||
width: 202px * scale;
|
||||
x: -1px;
|
||||
width: 202px;
|
||||
source: @image-url("images/shadow-frame.png");
|
||||
}
|
||||
|
||||
thumb := SunMoonThumb {
|
||||
scale: root.scale;
|
||||
}
|
||||
|
||||
TouchArea {
|
||||
|
|
@ -135,7 +132,7 @@ export component SunMoonSwitch {
|
|||
|
||||
states [
|
||||
nightMode when root.theme == Theme.night: {
|
||||
thumb.thumb-position: root.width - thumb.width - 50px * scale;
|
||||
thumb.thumb-position: root.width - thumb.width - 50px;
|
||||
frameBacker.background: #1e2232;
|
||||
clouds-background.y: 120px;
|
||||
clouds-foreground.y: 120px;
|
||||
|
|
@ -155,9 +152,9 @@ export component SunMoonSwitch {
|
|||
}
|
||||
}
|
||||
dayMode when root.theme == Theme.day: {
|
||||
thumb.thumb-position: 50px * scale;
|
||||
thumb.thumb-position: 50px;
|
||||
frameBacker.background: #3d85ba;
|
||||
stars.y: - 60px * scale;
|
||||
stars.y: - 60px;
|
||||
stars.opacity: 0.4;
|
||||
in {
|
||||
animate frameBacker.background, stars.y, stars.opacity {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,5 @@ export component AppWindow inherits Window {
|
|||
SunMoonSwitch {
|
||||
x: 200px;
|
||||
y: 250px;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue