| 1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
| 2 | // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 |
| 3 | |
| 4 | component Slider { |
| 5 | in-out property <int> value; |
| 6 | TouchArea { |
| 7 | clicked => { value += 1; } |
| 8 | } |
| 9 | } |
| 10 | |
| 11 | export global Glob { in-out property <bool> cond; } |
| 12 | |
| 13 | component Animated { |
| 14 | public function animate() { |
| 15 | r.x += 500px; |
| 16 | } |
| 17 | |
| 18 | in property <easing> ease; |
| 19 | in property <int> duration; |
| 20 | in property <duration> delay; |
| 21 | r := Rectangle { |
| 22 | background: Glob.cond ? blue : red; |
| 23 | animate background { easing: ease; duration: duration * 1ms; } |
| 24 | animate x { easing: ease; duration: 260ms; delay: delay; } |
| 25 | } |
| 26 | } |
| 27 | |
| 28 | export component Main { |
| 29 | slider1 := Slider {} |
| 30 | slider2 := Slider {} |
| 31 | property <int> value1: slider1.value; |
| 32 | property <int> value2: slider2.value; |
| 33 | public function anunimate() { a1.animate(); } |
| 34 | HorizontalLayout { |
| 35 | a1 := Animated { ease: ease-out; duration: value1; delay: value2 * 2ms; } |
| 36 | Animated { ease: ease-in; duration: value1; delay: value2 * 2ms; } |
| 37 | } |
| 38 | } |
| 39 | |