背景色にグラデーションを使用する

タイマーの背景にグラデーションを使用して魅力的な表現を実現します

グラデーション機能は実験的な機能です。一部のスタイル機能が制限されます。

グラデーション表現は描画処理に負荷がかかるため、デバイスの能力によっては動作が重くなる可能性があります。動作が重い場合には、アニメーションを無効にするかグラデーションの使用をしない選択肢をご検討ください。

グラデーションを有効にする

Backgroundから「グラデーションを使用」にチェックすることでグラデーション機能を有効にできます。

グラデーションのプレビュー下のタイムカーソルを動かすことで、アニメーションの動きを確認できます。

アニメーションの半周期時間は、カーソル右下から設定できます。デフォルトは300秒です。

周期時間を短く設定(0秒以外)すると、グラデーション表現の描画処理に負荷がかかります。

半周期時間を0秒に設定することで、アニメーションを無効化できます。

グラデーションは3つの円形のエレメントで表現されます。

グラデーションのプレビュー右下の「ランダム生成」をクリックすると、グラデーションをランダムに生成します。

各エレメントの「色」と「位置(x,y)」と「グラデーションの開始及び終了位置(s,e)」を半周期時間の開始、中間、終了の3時点で個別にカスタマイズできます。

位置について

x座標は、画面の左端が0%、画面の右端が100%です。y座標は、画面の上端が0%、画面の下端が100%です。

グラデーションの開始及び終了位置について

グラデーションの開始位置(※)まで原色をつかい、終了位置(※)で透明色になるようなグラデーションを描きます。 ※ エレメントの中心から最も遠い画面の縁までの距離の百分率(%)

最終更新 11 日前