前回のインターンシップでは、音声入力を実現し、入力中にアニメーションやジャンプボールを含めるために Android 側に H5 ページを埋め込む必要がありました。さまざまな資料を参照し、実際の需要シナリオに基づいて、その機能が最終的に実現されました。ここで見直して記録してみましょう。
まず、単一のボールの鼓動を認識します。
分析：ボールは上から始まり、中盤で下に到達し、最後に上に戻るという無限ループです。相対位置決めと CSS3 キーフレームを組み合わせることによって実現されます。
<div class="ball"></div>
。ボール {
幅: 20ピクセル;
高さ: 20ピクセル;
境界半径: 50%;
位置: 相対的;
anime-name: bouncing; // アニメーション名 anime-duration: 1.6s; // アニメーションの無限ループの背景: rgb(244, 7, 7);色}
//キーフレーム アニメーション @keyframes バウンス {
0% {
top: 0px; //最初は上部}
50% {
上: 100px; // 中央が下}
100% {
top: 0px; // 最後にトップに戻ります}
}分析: 複数のボールが同時にジャンプし、相対的な位置が異なる必要があります。次に、各ボールのアニメーションの開始に時間差があり、もう 1 つはボールの色です。
/** ボール = [1,2,3,4,5] 複数のボール*/
<div v-for="ボールの中のボール" :key="ボール" :class="['ボール', `ball${ball}`]"></div> //パブリック スタイル抽出.ball {
幅: 20ピクセル;
高さ: 20ピクセル;
境界半径: 50%;
位置: 相対的;
anime-name: bouncing; // アニメーション名 anime-duration: 1.6s; // アニメーションの無限ループ
.ball1 {
@extend .ball;
左: 0;
背景: rgb(244, 7, 7);
}
.ball2 {
@extend .ball;
アニメーション遅延: 0.25s; // アニメーション遅延左: 30px;
背景: rgb(16, 106, 241);
}
.ball3 {
@extend .ball;
アニメーション遅延: 0.5 秒; // アニメーション遅延左: 60px;
背景: rgb(251, 236, 13);
}
.ball4 {
@extend .ball;
アニメーション遅延: 0.75 秒; // アニメーション遅延左: 90px;
背景: rgb(233, 23, 233);
}
.ball5 {
@extend .ball;
アニメーション遅延: 1.0s; // アニメーション遅延左: 120px;
背景: rgb(6, 247, 6);
}
//キーフレーム アニメーション @keyframes バウンス {
0% {
top: 0px; //最初は上部}
50% {
上: 100px; // 中央が下}
100% {
top: 0px; // 最後にトップに戻ります}
}デモ
分析: バインドイベント監視、ボタン長押しアニメーションが表示され、ボタンリリースアニメーションが非表示になります。
最後に、それを使用して、達成される効果を確認します。
<el-button id="bouncingBallBtn">音声入力</el-button> <バウンスボール v-if="showバウンス" />
/** データ showBounce: false */
マウントされた() {
let theBouncingBtn = document.getElementById("bouncingBallBtn");
//モバイル端末 theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("タッチエンド", this.endBouncing, false);
// PC 側 theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
/** アニメーション表示*/
startBouncing(event) {
イベント.preventDefault();
this.showBouncing = true;
}、
/** アニメーションの非表示*/
endBouncing(event) {
イベント.preventDefault();
this.showBouncing = false;
}、これで、複数の跳ねるボールを実装するための CSS3 アニメーション (音声入力アニメーション) についての記事は終わりました。CSS3 の跳ねるボールの詳細については、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後ともcomをよろしくお願いします！