Slint の円錐グラデーションをローテーションしたい

はじめに

この記事は Slint Advent Calendar 2025 １６日目の記事です。

今日は Slint 1.15 に入る予定の「円錐グラデーションのローテーション」を紹介します。

おさらい

Slint 1.13 で 円錐グラデーションの対応 が行われました。

Slint 1.14 ではこの機能と 1.14 の新機能である「任意のアイテムのローテーション」を組み合わせたスピードメーターのデモが追加されました。

このデモの開発時に、開発者（本業はデザイナー）が「START」などのボタンが押されたときに、ボタンの外周のグラデーションをアニメーションしようとしたら動かなかったんだよね、と声をかけられました。

以下の SlintPad で、ボタンを押した際に、思ってたように動かなかったようです。

円錐グラデーションのローテーションに対応しました

PR はこちら

ローテーションの API

初期のパッチは、@conic-gradient に渡された角度を 0~360 の範囲に正規化して対応したのですが、「それって CSS の @conic-gradient と挙動違うよね」というフィードバックが来たので、CSS の @conic-gradient に合わせて from キーワードの対応を行うことになりました。

export component Demo {
    width: 300px;
    height: 300px;
    property <angle> angle: 0deg;
    Rectangle {
        border-radius: self.width / 2;
        background: @conic-gradient(from angle, red 0deg, yellow 60deg, green 120deg, cyan 180deg, blue 240deg, purple 300deg, red 360deg);
    }

    Timer {
        interval: 1s;
        running: true;
        triggered() => {
            angle += 1deg;
        }
    }
}

グラデーションをローテーションさせたい場合は、この from の後の角度を任意の角度に設定するだけで対応が可能になります。実装はしづらいけど、利用しやすい API でいいですね。

グラデーションの補間

円錐グラデーションの描画はバックエンド(Qt や FemtoVG など)の機能を使っているのですが、それらには回転に対応したものがなく、回転後のパラメーターをバックエンドに渡す形で実装をしています。
角度はどれも 0~1 での指定になっているので、

@conic-gradient(from 0deg, red 0deg, green 120deg, blue 240deg, red 360deg)

↓

[(red 0.00), (g 0.33), (b 0.66), (r 1.00)]

のような変換をしています。

@conic-gradient(from 90deg, red 0deg, green 120deg, blue 240deg, red 360deg)

の場合は、

[(X 0.00), (r 0.00 + 0.25), (g 0.33 + 0.25), (b 0.66 + 0.25), (X 1.00)]

のような計算をします。ここで、X の値は、r と b から補間した値になります。

グラデーションの補間は、CSS では premultiplied RGBA space での補間だと規定されています。

Slint の Rust の API には Color::mix という便利な関数が存在するのですが、こちらは Sass color mixing algorithm で実装されていて、残念ながら採用できませんでした。

おわりに

Slint 1.15 のリリースがまもなくありそうな気がしますが、今日はそこで対応予定の円錐グラデーションのローテーションについて紹介しました。

みなさんのかっこいい UI に是非ご利用ください！