快捷導(dǎo)航

在Vue中如何實(shí)現(xiàn)打字機(jī)的效果

更新時(shí)間：2022年07月02日 15:00:33 作者：但心情怎會(huì)無恙

這篇文章主要介紹了在Vue中如何實(shí)現(xiàn)打字機(jī)的效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

按理說像打字機(jī)這種動(dòng)畫效果的實(shí)現(xiàn)首選是jquery，畢竟jquery還是以操作dom為主，而vue是數(shù)據(jù)驅(qū)動(dòng)，但是jquery并沒有能狗滿足我設(shè)想的功能的插件，又偷懶不想自己實(shí)現(xiàn)雙向綁定，只好自己用vue實(shí)現(xiàn)。

代碼寫的不是很漂亮，希望大家不喜勿噴，這里只是提供一個(gè)思路。

最終效果

I‘m ByPunk!
I‘m looking for a job.
I‘m a front-end programmer.
I‘m coding the web…

以上四句話循環(huán)重復(fù)

以打字機(jī)的效果顯示輸入和刪除，因?yàn)榍懊娴腎‘m是相同的，所以只對(duì)后面的內(nèi)容加以修改。

1.事先定義好字符串str：str='By Punk!'，使用數(shù)組的splite方法將str分解成由字母組成的數(shù)組。

2.利用for循環(huán)，每100毫秒向數(shù)組里push一個(gè)新的字母，利用vue的雙向綁定，數(shù)據(jù)更新帶動(dòng)視圖更新。

3.在容納字母的div后寫一個(gè)豎杠“|”并加上不斷閃爍的動(dòng)畫，模擬打字機(jī)光標(biāo)。

4.在每次push的時(shí)候，判斷當(dāng)前的索引i是否是數(shù)組的最后一個(gè)元素，如果是，則在2秒后開始清除。

5.“刪除”具體實(shí)現(xiàn)跟“輸入”剛好相反，每200毫秒從數(shù)組從pop出最后一項(xiàng)。

6.使用watch鉤子函數(shù)實(shí)現(xiàn)四句話的循環(huán)重復(fù)。

具體代碼如下

<template>
? ? <div class="typer">
? ? ? <div class="typer-content">
? ? ? ? <p class="typer-static">I'm&nbsp;</p>
? ? ? ? <!-- 動(dòng)態(tài)變化的內(nèi)容-->
? ? ? ? <p class="typer-dynamic">
? ? ? ? ? <span class="cut">
? ? ? ? ? ? <span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
? ? ? ? ? </span>
? ? ? ? ? <!-- 模擬光標(biāo)-->
? ? ? ? ? <span class="typer-cursor"></span>
? ? ? ? </p>
? ? ? </div>
? ? </div>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? words:[], ? ? ? ? ? ? ? //字母數(shù)組push，pop的載體
? ? ? str:"By Punk", ? ? ? ? ?//str初始化
? ? ? letters:[], ? ? ? ? ? ? //str分解后的字母數(shù)組
? ? ? order:1, ? ? ? ? ? ? ? ?//表示當(dāng)前是第幾句話
? ? }
? },
? watch:{ ? ? ? ? ? ? ? ? ? ? //監(jiān)聽order值的變化，改變str的內(nèi)容
? ? order(old,newV){
? ? ? if(this.order%4==1){
? ? ? ? this.str="By Punk!"
? ? ? }
? ? ? else if(this.order%4==2){
? ? ? ? this.str="looking for a job. "
? ? ? }
? ? ? else if(this.order%4==3){
? ? ? ? this.str="a front-end programmer."
? ? ? }
? ? ? else{
? ? ? ? this.str="coding the web..."
? ? ? }
? ? }
? },
? mounted(){ ? ? ? ? ? ?//頁面初次加載后調(diào)用begin()開始動(dòng)畫
? ? this.begin()
? },
? methods:{
? //開始輸入的效果動(dòng)畫
? ? begin(){ ? ? ? ? ? ?
? ? ? this.letters=this.str.split("")
? ? ? for(var i=0;i<this.letters.length;i++){
? ? ? ? setTimeout(this.write(i),i*100);
? ? ? }
? ? },
? //開始刪除的效果動(dòng)畫
? ? back(){
? ? ? let L=this.letters.length;
? ? ? for(var i=0;i<L;i++){
? ? ? ? setTimeout(this.wipe(i),i*50);
? ? ? }
? ? },
? //輸入字母
? ? write(i){
? ? ? return ()=>{
? ? ? ? ? let L=this.letters.length;
? ? ? ? ? this.words.push(this.letters[i]);
? ? ? ? ? let that=this;
? ? ? ? ? ?/*如果輸入完畢，在2s后開始刪除*/
? ? ? ? ? if(i==L-1){?
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? that.back();
? ? ? ? ? ? },2000);
? ? ? ? ? }
? ? ? }
? ? },
? //擦掉(刪除)字母
? ? wipe(i){
? ? ? return ()=>{
? ? ? ? ? this.words.pop(this.letters[i]);
? ? ? ? ? /*如果刪除完畢，在300ms后開始輸入*/
? ? ? ? ? if(this.words.length==0){
? ? ? ? ? ? ?this.order++;
? ? ? ? ? ? ?let that=this;
? ? ? ? ? ? ?setTimeout(function(){
? ? ? ? ? ? ? ?that.begin();
? ? ? ? ? ? ?},300);
? ? ? ? ? }
? ? ? }
? ? },
? },
}
</script>

<style scoped lang="less">
@thePink:#e84d49;
.typer{
? margin-top: 2%;
? box-sizing: border-box;
}
.typer .typer-content{
? font-weight: bold;
? font-size: 50px;
? display: flex;
? flex-direction: row;
? letter-spacing: 2px }
.typer-dynamic{
? position: relative;
}
.cut{
? color: @thePink;
}
.typer-cursor{
? position: absolute;
? height: 100%;
? width: 3px;
? top: 0;
? right: -10px;
? background-color: @thePink;
? animation: flash 1.5s linear infinite;
}
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: