Jsは累積的な上向きのフローティングアニメーションをどのように実装しますか

序文

少し前に、木魚のオンラインノック、木魚の自動ノック、ハンドディッシュビーズ、瞑想シンギングボウルを実現できる比較的興味深い小さなプログラム、Jingshen Muyuを見ました。

アプレット全体の機能は比較的小さくシンプルで、以前から人気があり、アプリアプリケーション市場でもアプレットでも、現代の若者の不安を解消するために大金を稼いだ開発者もいます。仏教の減圧は娯楽であり、この種のアプリケーションは役に立たず、ビジネスとはかけ離れていると思われるかもしれませんが、逆に、ビジネスの拡大と拡張の観点から、それでも喜んでお金を払う人もいます。

この小さなプログラムで木の魚をノックする例の実装を明らかにしましょう

具体例

具体的な例は、アニメーションを浮かせて見ることができます

特定のコード

Vue例としてのコードは次のとおりです

<template><div class="leijia-wrap"><div class="leijia-content"> <h2>静神木鱼</h2> <div class="text">{
   
   {count}}<span class="animatetip" v-show="isTip">功德+1</span></div> <div class="btn"> <el-button type="primary" size="mini" @click="handleClick" ref="btnClick">敲击</el-button> <el-button type="primary" size="mini" @click="handleVoince" ref="btnJinYin">{
   
   {isVoince == true?'非静音':'静音'}}</el-button> <el-button type="danger" size="mini" @click="handleAuto">{
   
   {onOff == true?'自动':'非自动'}}</el-button> <el-button type="info" size="mini" @click="handleClear">清除</el-button> </div></div><!--敲击音频---> <audio id="myaudio" src="../images/js-article-imgs/video/qiaoji.mp3"style="display:none"> Your browser does not support the audio element.</audio></div>
</template>

<script> export default {data() {return { count: 0,  timer: null, onOff: true, isVoince: true, isTip: false}},mounted(){this.count = localStorage.getItem('count') || 0; // 获取本地存储localStorage},methods: {// 敲击handleClick() {this.count = parseInt(this.count)+1;localStorage.setItem('count',this.count);// 设置本地存储localStoragethis.isTip = true;setTimeout(()=> {
			this.isTip = false;
		}, 300);let music = document.getElementById("myaudio");if(this.isVoince) {music.play();}else {music.pause();}},// 控制静音还是非静音handleVoince() { let music = document.getElementById("myaudio"); if(this.isVoince) {music.play(); }else { music.pause(); } this.isVoince = !this.isVoince;}, // 重置数据,清除localStoragehandleClear(){localStorage.removeItem('count');this.count = 0;},// 自动敲打,累加handleAuto() {let music = document.getElementById("myaudio");if(this.onOff) {this.timer = setInterval(() => {this.count = parseInt(this.count)+1;this.isTip = true; setTimeout(()=> {
			this.isTip = false;
		}, 300);music.play();},1000)}else {clearInterval(this.timer); // 清除定时器music.pause();}this.onOff = !this.onOff;},}
} </script>
<style lang="scss" scoped> .leijia-wrap {text-align: center;margin-top: 10px;.btn {margin-top: 20px;}.text {position:relative;}.animatetip {opacity: 0;animation: showtip 1s;position:absolute;right: 320px;top: 0px;}/* 关键帧动画 */@keyframes showtip {0% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(-15px);}}} </style>

上記の小さな例は小さいですが、ある程度の知識が含まれています. この効果を達成するには、

分析する

1. 管理番号の累積を実現する方法、およびストリングス+プライシングの問題を解決する方法 (具体的には問題を解決するparseInt()) 2. 自動累積を実現する方法、タイマーの設定方法とタイマーのクリア
方法を知る必要がある3. コントロールコントロール要素の状態の変更、スイッチの設定4. ページを更新するとき、次にアクセスして最後の状態を保持するときは、ローカルキャッシュを使用し、指定されたローカルキャッシュをクリアする必要があります 5. 方法オーディオ要素の再生 ( ) と一時停止 ( )を制御します。setIntervalclearInterval

localStoragelocalStorage.removeItem('key')
audioplaypause
css3

上記のコントロール功德加+1は、vue組み合わせたv-showアニメーションcss3キーフレームと透明度の組み合わせを使用して制御します

v-show単純な借用を完全に制御することはできないことに注意してください. また、借用setTimeoutして最初に非表示にしてから表示し、最後に要素を非表示にするのにどれくらいの時間がかかりますか?

WeChat アプレットも実装のロジックは同様で、WeChat のローカルストレージ機能を利用し、アニメーションはアプレットに付属のアニメーション API を利用することで実現できます。

例は比較的単純ですが、基本的に目的の機能を実現しています。わからないことがあれば、もっとコミュニケーションできます

やっと

最近、VUE のさまざまな知識ポイントをまとめ、「Vue 開発が知っておくべき 36 のスキル」にまとめた VUE ドキュメントを見つけました。内容は比較的詳しく、各知識ポイントの解説も整っています。

困っている友達は、下のカードをクリックして無料で受け取り、共有できます