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

效果图

.js

javascript 复制代码

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.text
    this.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

html 复制代码

<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

css 复制代码

.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);
  }
}

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。