当前位置：首页 > news >正文

微信小程序一款不错的文字动画

news 2025/6/18 11:41:03

效果图

请添加图片描述

.js

Page({data: {list:[],animation:['text-left','text-right','text-top','text-bottom'],text:[['春眠不觉晓，处处闻啼鸟。','夜来风雨声，花落知多少。'  ],['床前明月光，疑是地上霜。','举头望明月，低头思故乡。'],['千山鸟飞绝，万径人踪灭。','孤舟蓑笠翁，独钓寒江雪。']],number:-1,},randomNum(){return Math.floor(Math.random() * 4);	},createText(){this.setData({list:[]})const text = this.data.textthis.data.number++if(this.data.number >= text.length){this.data.number = 0}const o = text[this.data.number]const arr = []for(let i = 0;i < o.length;i++){arr[i] = []for(let k in o[i]){arr[i].push({random:this.randomNum(),text:o[i][k]})}}this.setData({list:arr})},onLoad(){this.createText()}
})

.wxml

<view class="container"><view wx:for="{{list}}" wx:key="index" class="box">{{item.text}}<view wx:for="{{item}}" wx:key="*this" class="text-animated-word list"style="--name:{{animation[item.random]}};" >{{item.text}}</view></view>
</view>
<button bind:tap="createText">下一首</button>

.wxss

.container{width: 70%;margin: 200rpx 15%;font-size: 32rpx;color: red;
}
.box{display: flex;flex-wrap:wrap;width: max-content;margin: 0 auto;
}
.list{margin: 4rpx;
}
.text-animated-word{animation-name: var(--name);animation-duration: 0.8s;
}
@keyframes text-top{from{opacity:0;transform:translate3d(0,-100vh,0);}to{opacity:1;transform:translateZ(0);}
}
@keyframes text-bottom{from{opacity:0;transform:translate3d(0,100vh,0);}to{opacity:1;transform:translateZ(0);}
}
@keyframes text-left{from{opacity:0;transform:translate3d(-100vw,0,0);}to{opacity:1;transform:translateZ(0);}
}
@keyframes text-right{from{opacity:0;transform:translate3d(100vw,0,0);}to{opacity:1;transform:translateZ(0);}
}