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

效果图

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

相关推荐
qingyingWin3 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
韩召华4 小时前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
前端Hardy5 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
一只开心鸭!13 小时前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序
此心光明事上练17 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
gongzemin1 天前
微信第三方平台的配置
微信·微信小程序·资讯
一念杂记2 天前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
小白_ysf2 天前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid2 天前
微信小程序私密消息
微信小程序·小程序
kilito_012 天前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app