| | トランスフォーメーション | |
トランスフォーメーションを使用して、画面上のエレメントの形、サイズ、位置を実行時に変更することができます。
トランスフォーメーションはクラスを使用して UI のエレメントに適用されます。
トランスフォーメーションはクラスに関連付けられたテーマの中に作成され、そのクラスを使用するエレメントに自動的に適用されます。これにより、エレメントの変換を設計時および実行時の両方で行うことができます。クラスはこれらの任意のタイミングで割り当てることができるからです。
トランスフォーメーションは [ Transformations ] ノードの下にまとめられているテーマ内にあります。クラスと同様の方法で追加、変更されます。クラスは [ Transformation ] プロパティを参照します。
 
テーマクラスにトランスフォーメーションがあり、[ Animated ] プロパティが有効な場合は、プラットフォームがサポートする範囲内でトランスフォーメーションがアニメーションになります。また、トランスフォーメーションの継続時間を指定することもできます。
すべてのトランスフォーメーションには次のプロパティがあります。変更が適用される場合に変更する内容を定義することができます。
| プロパティ |
値 |
| Name |
トランスフォーメーションの名前 |
| Anchor Point X |
左 (left)、中央 (center)、右 (right)、xx %、xx dip |
| Anchor Point Y |
上部 (top)、中央 (middle)、下部 (bottom)、xx %、xx dip |
Anchor Point X と Anchor Point Y のプロパティ値はトランスフォーメーション関数が適用を開始する位置を示します。この方法では、{left, top} の位置は {0%, 0%} と同じであり、{center, middle} は {50%, 50%} または任意の値をパーセンテージで表したものと同じとなります。既定値は常に {center, middle} = {50%, 50%} です。
注: トランスフォーメーションを適用したときの xx % の値は、コントロールの初期サイズに対して相対的な値となります。
画面上のエレメントの位置を変更できます。
| プロパティ |
値 |
| Type |
TranslateBy / TranslateTo |
| Value X |
xx %、xx dip |
| Value Y |
xx %、xx dip |
| Relative To |
こちらを参照してください。 |
[ Type ] プロパティは次の値を解釈する参照フレームワークを示します。
- TranslateBy
コントロールが元のポイントから値によって計算された距離を移動することを示します。
- TranslateTo
移動先のポイントを絶対値 X/Y (および相対値) で表します。
例:
- TranslateBy X 20% relative to form では、コントロールフォームの幅の 20% の距離を、コントロールの元の位置から右に移動します。
- TranslateTo X 20% relative to form では、コントロールを左または右に移動して、コントロールの左端が画面サイズの 20% のポイントに位置するようにします。
- TranslateTo コントロールと TranslateBy relative to コントロールは同じです。
- [ Translate ] プロパティの値 X や値 Y は、パーセンテージまたは dip 値です。移動が 1 つの座標のみで行われる場合、もう 1 つの値はゼロに設定する必要があります。
コントロールが拡大縮小されると、コントロールとコンテンツの両方のサイズが比率を維持したまま変更されます。
| プロパティ |
値 |
| Value X |
xx %、xx dip |
| Value Y |
xx %、xx dip |
| Relative To |
こちらを参照してください。 |
値 X および値 Y は、パーセンテージまたは dip 値です。拡大縮小が 1 つの座標のみで行われる場合、もう 1 つの値は 100% に設定する必要があります。
コントロールのサイズが変更されると、コントロールのサイズが比率を維持したまま変更されます。拡大縮小とは異なり、コントロールのコンテンツは変化しません (コントロールのサイズだけが変化します)。
コントロールのサイズはコントロールレベルのみで変更してください ( [ Scale ] プロパティグループとは異なります)。
| プロパティ |
値 |
| Value X |
xx %、xx dip |
| Value Y |
xx %、xx dip |
| Relative To |
こちらを参照してください。 |
値 X および値 Y は、パーセンテージまたは dip 値です。拡大縮小が 1 つの座標のみで行われる場合、もう 1 つの値は 100% に設定する必要があります。
注:
- コントロールのサイズを変更すると、コントロールが表示されなくなる場合があります。また、コントロールを拡大縮小すると、コントロールが不正確になったり、定義が外れたりする場合があります。
- Angular は [ Resize ] プロパティグループをサポートしません。CSS では、コンテンツを拡大縮小せずにエレメントを拡大縮小するネイティブな方法はありません。
回転する角度を示します。
このプロパティは、トランスフォーメーションを適用する際に考慮すべきサイズを示します。
このパラメーターが使用する値は次のとおりです:
- Current control (既定)
- Parent control
- Form
この値はサイズに対して適用されます。角度には適用できません。
たとえば、テーブルのサイズが 400x300 で、その中に 100x100 の画像があるレイアウトでは、画像を拡大縮小 (100%、100%) すると、最終的なサイズは次のようになります:
- [ Relative To ] プロパティが Current control の場合は 100x100
- [ Relative To ] プロパティが Parent control の場合は 400x300
Angular での注意事項:「Current control」のみをサポートします。CSS がネイティブにサポートするのはこの値のみです。
ジェネレーター: Android、Angular、Apple
参考情報
|
|
|
|
|