在Vue中如何实现打字机的效果

目录 最终效果 以上四句话循环重复 具体代码如下

前一段时间找工作做网页简历，想实现打字机的效果。

按理说像打字机这种动画效果的实现首选是jquery，毕竟jquery还是以操作dom为主，而vue是数据驱动，但是jquery并没有能狗满足我设想的功能的插件，又偷懒不想自己实现双向绑定，只好自己用vue实现。

代码写的不是很漂亮，希望大家不喜勿喷，这里只是提供一个思路。

最终效果

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

以上四句话循环重复

以打字机的效果显示输入和删除，因为前面的I‘m是相同的，所以只对后面的内容加以修改。

1.事先定义好字符串str：str='By Punk!'，使用数组的splite方法将str分解成由字母组成的数组。

2.利用for循环，每100毫秒向数组里push一个新的字母，利用vue的双向绑定，数据更新带动视图更新。

3.在容纳字母的div后写一个竖杠[|]并加上不断闪烁的动画，模拟打字机光标。

4.在每次push的时候，判断当前的索引i是否是数组的最后一个元素，如果是，则在2秒后开始清除。

5.[删除]具体实现跟[输入]刚好相反，每200毫秒从数组从pop出最后一项。

6.使用watch钩子函数实现四句话的循环重复。

具体代码如下

<template>
? ? <div class="typer">
? ? ? <div class="typer-content">
? ? ? ? <p class="typer-static">I'm&nbsp;</p>
? ? ? ? <!-- 动态变化的内容-->
? ? ? ? <p class="typer-dynamic">
? ? ? ? ? <span class="cut">
? ? ? ? ? ? <span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
? ? ? ? ? </span>
? ? ? ? ? <!-- 模拟光标-->
? ? ? ? ? <span class="typer-cursor"></span>
? ? ? ? </p>
? ? ? </div>
? ? </div>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? words:[], ? ? ? ? ? ? ? //字母数组push，pop的载体
? ? ? str:"By Punk", ? ? ? ? ?//str初始化
? ? ? letters:[], ? ? ? ? ? ? //str分解后的字母数组
? ? ? order:1, ? ? ? ? ? ? ? ?//表示当前是第几句话
? ? }
? },
? watch:{ ? ? ? ? ? ? ? ? ? ? //监听order值的变化，改变str的内容
? ? 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(){ ? ? ? ? ? ?//页面初次加载后调用begin()开始动画
? ? this.begin()
? },
? methods:{
? //开始输入的效果动画
? ? begin(){ ? ? ? ? ? ?
? ? ? this.letters=this.str.split("")
? ? ? for(var i=0;i<this.letters.length;i++){
? ? ? ? setTimeout(this.write(i),i*100);
? ? ? }
? ? },
? //开始删除的效果动画
? ? 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于在Vue中如何实现打字机的效果的详细内容...