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

效果图

.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,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
Dignity_呱12 小时前
如何在不发版时,实现小程序的 AB 测试?
前端·面试·微信小程序
咸虾米_1 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
微信小程序·小程序·uniapp开发·小程序地图api
不如摸鱼去2 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
意会2 天前
微信闪照小程序实现
前端·css·微信小程序
小白_ysf3 天前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
是一碗螺丝粉3 天前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
我叫黑大帅4 天前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
两个月菜鸟4 天前
vue+微信小程序 五角星
前端·vue.js·微信小程序
熬耶5 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
誰在花里胡哨5 天前
微信小程序实现陀螺仪卡片景深效果
前端·微信小程序·动效