HarmonyOS ArkUI 属性アニメーションの詳細な紹介
序文
最近Hongmeng OSが非常に人気があるので、早くロールアップしてください。学習の過程で、公式の属性アニメーションの章がおざなりだという意見が多く、初めて読んでも理解できなかったので、 をもとに自分の理解を補うためにこの記事を作成しました。公式の紹介。
プロパティアニメーションとは何ですか?
正式な言葉を使いましょう
属性アニメーションは最も基本的なアニメーションであり、強力な機能、多くの使用シナリオ、幅広い用途を備えています。一般的に次のシナリオで使用されます。
1. ページレイアウトが変更されます。たとえば、いくつかのコンポーネント要素を追加または削除します。
2. ページ要素の表示と位置が変更されます。たとえば、一部の要素を表示または非表示にしたり、一部の要素を一方の端からもう一方の端に移動したりできます。
3. ページ上のグラフィック要素と画像要素を動かします。たとえば、ページ上の静止画像をアニメーション化します。
簡単に言えば、プロパティ アニメーションは、コンポーネントの一般的なプロパティが変化するときに発生するプロパティ グラデーション効果です。以下の図に示すように、コンポーネントの一般的なプロパティが変化すると、コンポーネントの状態が初期状態から終了状態に徐々に変化する過程で複数の連続した中間状態が作成されるという原理です。 、プロパティが形成され、アニメーションが生成されるグラデーション効果。
属性アニメーションの使用も非常に簡単で、次のコードに示すように、アニメーション属性をコンポーネント (基本コンポーネントやコンテナ コンポーネントを含む) に追加し、パラメータを設定するだけです。
Image($r('app.media.image1'))
.animation({
duration: 1000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: 1
})
上記のコードを貼り付けると、上記のサンプル コードにはアニメーションがないことがわかりますが、心配しないでください。
1. アニメーション属性のスコープ。アニメーション自体もコンポーネントのプロパティであり、そのスコープはアニメーションの前にあります。つまり、プロパティ アニメーションを生成するプロパティはアニメーションの前に宣言する必要があり、その後に宣言されたプロパティはプロパティ アニメーションを生成しません。例として 5 つのアイコン アニメーションを例に挙げると、アニメーションを生成すると予想される属性は Image コンポーネントの width 属性であるため、アニメーション属性の前に width 属性を宣言する必要があります。アニメーションの後に属性幅が宣言された場合、アニメーション効果は生成されません。
2. 属性アニメーションの属性が変更されたときに、UI ステータスの更新をトリガーする必要があります。上の例では、アニメーション化するプロパティがないため、アニメーションはありません。
3. 属性アニメーションを生成する属性自体は特定の要件を満たす必要があり、すべての属性が属性アニメーションを生成できるわけではありません。現在サポートされている属性には、幅、高さ、位置、不透明度、背景色、スケール、回転、移動などが含まれます。
自分なりに簡単にまとめてみましょう
プロパティアニメーション = プロパティ + アニメーション (プロパティスコープ) プロパティアニメーション = プロパティ + アニメーション (プロパティスコープ)プロパティアニメーション=属性+アニメーション(プロパティスコープ) _
この属性は現在、幅、高さ、位置、不透明度、背景色、スケール、回転、移動などをサポートしています。
パラメータの説明
| プロパティ名 | プロパティタイプ | デフォルト | 説明する |
|---|---|---|---|
| 間隔 | 番号 | 1000 | アニメーションの継続時間 (ミリ秒単位)。デフォルトの継続時間は 1000 ミリ秒です。 |
| テンポ | 番号 | 1.0 | アニメーションの再生速度。値が大きいほど、アニメーションの再生は速くなります。値が小さいほど、アニメーションの再生は遅くなります。0 の場合、アニメーション効果はありません。 |
| 曲線 | 曲線 | 曲線.線形 | アニメーション変更カーブ。デフォルトのカーブは直線です。 |
| 遅れ | 番号 | 0 | 遅延再生時間。単位はミリ秒です。デフォルトでは遅延再生はありません。 |
| 反復 | 番号 | 1 | 再生回数。デフォルトは 1 回です。-1 に設定すると、無制限に再生することになります。 |
| プレイモード | プレイモード | プレイモード.ノーマル | アニメーションの再生モードを設定し、デフォルトの再生が完了した後に再生を再開します。 |
| 終了時 | 関数 | - | この関数は、アニメーションが終了すると呼び戻されます。 |
変化曲線の列挙値は次のとおりです。
| 名前 | 説明する |
|---|---|
| 線形 | アニメーションの速度が最初から最後まで同じであることを示します。 |
| 容易に | アニメーションが低速で開始され、その後速度が上がり、終了する前に減速することを示します (CubicBezier(0.25, 0.1, 0.25, 1.0))。 |
| イーズイン | アニメーションが低速 CubicBezier(0.42, 0.0, 1.0, 1.0) で開始されることを示します。 |
| イーズアウト | アニメーションが低速で終了することを示します (CubicBezier(0.0, 0.0, 0.58, 1.0))。 |
| イーズインアウト | アニメーションが低速 CubicBezier(0.42, 0.0, 0.58, 1.0) で開始および終了することを示します。 |
| ファストアウトスローイン | 標準曲線、三次ベジェ(0.4、0.0、0.2、1.0)。 |
| リニアアウトスローイン | 減速曲線、3 次ベジェ(0.0, 0.0, 0.2, 1.0)。 |
| ファストアウトリニアイン | 加速曲線、3 次ベジェ (0.4、0.0、1.0、1.0)。 |
| 極端な減速 | 遅い曲線、3 次ベジェ(0.0, 0.0, 0.0, 1.0)。 |
| シャープ | 急峻な曲線、3 次ベジェ (0.33、0.0、0.67、1.0)。 |
| リズム | リズムカーブ、3次ベジェ(0.7、0.0、0.2、1.0)。 |
| スムーズ | 滑らかな曲線、3 次ベジェ (0.4、0.0、0.4、1.0)。 |
| 摩擦 | 減衰曲線、CubicBezier(0.2, 0.0, 0.2, 1.0)。 |
人間による説明: 同じ時間、同じ結果、異なるプロセス
再生モードの playMode 列挙値は次のとおりです。
| 名前 | 説明する |
|---|---|
| 普通 | アニメーションは通常どおり再生されます。 |
| 逆行する | アニメーションが逆再生されます。 |
| 代わりの | アニメーションは奇数 (1、3、5...) で順方向に再生され、偶数 (2、4、6...) で逆方向に再生されます。 |
| オルタネートリバース | アニメーションは、奇数の時間 (1、3、5...) では逆方向に再生され、偶数の時間 (2、4、6...) では順方向に再生されます。 |
onFinish コールバック関数はパラメーターの反復に関連していることに注意してください。パラメータの反復の再生が終了すると、後続のビジネス処理のために onFinish 関数が呼び出されます。iterations が -1 に設定されている場合、無制限の再生を意味し、onFinish コールバック関数は呼び出されません。
例えば
回転アニメーション
@State rotateAngle : number = 0
...
Text("旋转动画")
Row(){
Button("旋转动画开始",{
type: ButtonType.Capsule,stateEffect:true})
.onClick(()=>{
this.rotateAngle =360
})
Image($r('app.media.loading'))
.width(100)
.height(100)
.rotate({
x: 0, y: 0, z: 1, angle: this.rotateAngle })
.animation({
duration: 2000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1
})
}
.height("30%")
.width("100%")
.backgroundColor(Color.Green)
上記の例でわかるように、rotate 回転スコープとアニメーション スコープが追加され、rotateAngle 状態を変更することでアニメーションの開始が制御されます。
ディスプレイスメントアニメーション
@State xState : number = 0
@State yState : number = 0
...
Text("位移动画")
Row(){
Text('HarmonyOS')
.width(200)
.height(100)
.fontColor(Color.Blue)
.fontSize(30)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
.margin(100)
.position({
x: this.xState,y:this.yState})
.animation({
duration: 1000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: 1,
onFinish:()=>{
if ( this.xState == 0) {
this.xState =100
this.yState =100
}else {
this.xState =0
this.yState =0
}
}
})
}
.height("30%")
.width("100%")
.backgroundColor(Color.Yellow)
上の例では、位置とアニメーションを設定することによってディスプレイスメント アニメーションが実装され、指定されたパスに到達すると xState と yState が onFinish コールバックでリセットされ、代替の永続的なアニメーション効果が実現されることがわかります。運用効果は以下の通り
組み合わせアニメーション
一度に追加できる属性は 1 つだけではなく、複数の属性を同時に追加することもできます。
@State watermelonRotateAngle : number = 0
@State width : number = 50
@State height : number = 50
...
Text("组合动画")
Row(){
Button("组合动画开始",{
type: ButtonType.Capsule,stateEffect:true})
.onClick(()=>{
this.watermelonRotateAngle =360
this.width = 100
this.height = 100
})
Image($r('app.media.watermelon'))
.width(this.width)
.height(this.height)
.rotate({
x: 0, y: 0, z: 1, angle: this.watermelonRotateAngle })
.animation({
duration: 2000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1
})
}
.height("40%")
.width("100%")
.backgroundColor(Color.Orange)
上記には幅、高さ、回転という 3 つの属性アニメーションがあります。その効果は次のとおりです。
要約する
参考: HarmonyOS レッスン 1
チュートリアルは、以前よりもはるかに充実しており、体系的です。したがって、ブロガーは、現在の公式チュートリアルよりも一般的な場所、または理解しにくいと感じる場所に単一の記事を出力するだけであり、Compose を使用しながら学習して更新することはありません。Compose に興味がある場合は、Jetpack Compose の詳細な紹介をご覧ください(リアルタイムで更新されます)。
文句を言いましょう。公式ドキュメント属性のアニメーションドキュメントは本当におざなりで、私がすべてを話したのにあなたは理解しておらず、それはあなたの仕事であるという印象を人々に与えています（もちろん、私が悪い人かもしれません）