[[419734]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com

背景

これはHarmonyOSベースの絵文字パックの非常にコンパクトな実装です。WeChatで「Happy Birthday」や「Mwah」といった単語を送信した際に発生するアニメーションに似た効果が得られます。

機能デモンストレーション

EmojiRain コンポーネントは、HarmonyOS システムをベースに、コントロール プロパティをカスタマイズして実装されており、Java コード設定もサポートしています。

原理分析

図に示すように、絵文字コントロール Image の初期位置は画面の上部にあり、EmojiRainLayout が画面全体を埋め尽くします。

絵文字が落ち始める前に、指定された絵文字セットから対応する要素を取得し、落ちたときの要素の開始位置、終了位置、幅、高さを計算します。

次に、位置座標と高さに基づいて対応するアニメーション オブジェクトを作成し、Animator.CurveType.ACCELERATE_DECELERATE アニメーション インターポレータを設定します。

ドロップする絵文字の数に基づいて Image 要素を準備した後、addComponent() を呼び出して EmojiRainLayout に Image を追加し、画面を覆う効果を実現します。

最後に、加速と減速のアニメーション効果が実行され、絵文字の雨モードが起動します。

 //RxJava を使用してアニメーションの実行間隔、実行順序、実行対象を制御します。
サブスクリプション subscription = Observable.interval(mDropFrequency, TimeUnit.MILLISECONDS)
 .take(mDuration / mDropFrequency)
 .flatMap(フロー -> Observable.range(0, mEmojiPer))
 .map(画像 -> mEmojiPool.acquire())
 .filter(ep -> ep != null )
 .observeOn(OhosSchedulers.mainThread())
 .subscribe(this::startDropAnimationForSingleEmoji、Throwable::printStackTrace);
 mSubscriptions.add (サブスクリプション); 
 
 // 画像のアニメーションオブジェクトを作成する
アニメータープロパティ animatorProperty = emoji.createAnimatorProperty();
 //アニメーションの継続時間を設定する
アニメータープロパティ.setDuration(( int )
 (mDropAverageDuration * Randoms.floatAround(1, RELATIVE_DROP_DURATION_OFFSET)));
フロートstartX = Randoms.getStartX();
フロートのendX = Randoms.getStopX();
 //アニメーションの開始座標と終了座標を指定する
animatorProperty.moveFromX(startX).moveToX(endX).moveFromY(-imageHeight).moveToY(mWindowHeight);
 animatorProperty.setCurveType(Animator.CurveType.ACCELERATE_DECELERATE);
アニメータープロパティの開始(); 
 
 // 画像を初期化し、比例スケールされた高さと幅をランダムに割り当て、画像読み込みモードを指定します。
画像 emoji = new Image(getContext());
 emoji.setImageElement(emojiDrawable);
 emoji.setScaleMode(Image.ScaleMode.CENTER);
ダブルポジティブ = Randoms.positiveGaussian() * 0.6;
最終的な int幅 = ( int ) (emoji_standard_size * (1.0 + positive));
最終的なint の高さ = ( int ) (emoji_standard_size * (1.0 + positive));
最終的なLayoutConfigパラメータ = 新しいLayoutConfig(幅、高さ);
 params.setMarginTop(-height);
 params.setMarginLeft(( int ) (-0.5F * 幅));
 emoji.setLayoutConfig(パラメータ);

使用方法

パラメータ設定

あたり

• 各ウェーブでドロップされる絵文字のデフォルトの数は 6 です。

間隔

• 落下アニメーションの合計継続時間は、デフォルトでは 8000 ミリ秒です。

ドロップ期間

• 各絵文字の平均ドロップ時間、デフォルトは2400ミリ秒

ドロップ頻度

• ドロップ頻度、つまり 2 回のドロップ間の時間間隔は、デフォルトで 500 ミリ秒に設定されます。

レイアウトでは、EmojiRainLayout は StackLayout を継承しており、ネイティブの StackLayout と同じように使用できます。

 <com.luolc.emojirain.EmojiRainLayout
 xmlns:ohos= "http://schemas.huawei.com/res/ohos"  
 xmlns:app= "http://schemas.huawei.com/res/ohos-auto"  
 xmlns:tools= "http://schemas.android.com/tools"  
 ohos:height= "match_parent"  
 ohos:width= "match_parent"  
 app:dropDuration= "2400"  
 app:dropFrequency= "500"  
 app:duration= "7200"  
 app:per= "10" > 
 
 <テキスト
ohos:height= "match_content"  
 ohos:width= "match_content"  
 ohos:text= "こんにちは世界！" /> 
 
 </com.luolc.emojirain.EmojiRainLayout>

パブリッククラス MainAbilitySlice は AbilitySlice を拡張します { 
 
プライベート EmojiRainLayout mContainer; 
 
 @オーバーライド
保護されたvoid onStart(インテントインテント) {
 super.onStart(インテント);
 super.setUIContent(ResourceTable.Layout_ability_main); 
 
 //ビューをバインドする 
 mContainer = (EmojiRainLayout) findComponentById(ResourceTable.Id_group_emoji_container); 
 
 //絵文字ソースを追加する
mContainer.addEmoji(ResourceTable.Media_emoji_1_3);
 mContainer.addEmoji(ResourceTable.Media_emoji_2_3);
 mContainer.addEmoji(ResourceTable.Media_emoji_3_3);
 mContainer.addEmoji(ResourceTable.Media_emoji_4_3);
 mContainer.addEmoji(ResourceTable.Media_emoji_5_3); 
 
 //フローごとに絵文字を設定します。デフォルトは6です。
        mContainer.setPer(10); 
 
 //合計継続時間をミリ秒単位で設定します。デフォルトは8000 です。
 mContainer.setDuration(7200); 
 
 //平均ドロップ期間をミリ秒単位で設定します。デフォルトは2400 です。
 mContainer.setDropDuration(2400); 
 
 //セット ドロップ頻度（ミリ秒）、デフォルトは500
 mContainer.setDropFrequency(500);
 }
 }

落ち始める

mContainer.startDropping();

落ちるのをやめる

mContainer.stopDropping();

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com