wx-wow(微信小程序动效库)

作者：Five

2022 年 8 月 02 日
本文字数：2242 字
阅读完需：约 7 分钟

wx-wow

该项目为提供微信小程序一套便捷好用动画执行方案，通过添加简单的动画类名和一些简单的参数，即可实现想要的动画效果。灵感来源 WOW.js

wx-wow 需要调试小程序基础库 >2.5

仓库地址： @Five-great/wx-wow

下载

直接通过 git 下载 wx-wow 源代码，并将 src 目录拷贝到自己的项目中

git clone https://github.com/Five-great/wx-wow.git

复制代码

通过 npm 或 cnpm 下载

 npm install --save wx-wow

复制代码

下载后目录结构为


+-- src|   |-- wxWOW.js|   |-- wxWOW.wxs|   |-- wxWOW.wxss|   |-- wxWOW.min.js|   |-- wxWOW.min.wxs|   |-- wxWOW.min.wxss|-- package-lock.json|-- package.json+-- README.md

复制代码

使用

将 src 目录中所有文件复制到微信小程序目录utils中（wxWOW.js，wxWOW.wxss，wxWOW.wxss）

1. 在 app.js 中引入 wxWOW.js

  Page = require('./utils/wxWOW')  App({     ...  })

复制代码

2. 在 app.wxss 引入wxWOW.wxss ( 动效样式来源自 animate.css(点击查看动效名与效果) )

 /**app.wxss**/ @import "./utils/wxWOW.wxss";

复制代码

3. 在需要的页面引入 wxWOW.wxs 并导出模块命名为 "wx" 同时监听绑定 {{ wxwow }} 改变时触发 WOWChange 函数执行动画渲染。


  <wxs src="../../utils/wxWOW.wxs" module="wx" />  <view change:prop="{{wx.WOWChange}}" prop="{{wxwow}}" >       ... </view>

复制代码

4. 在需要加入动效的地方的 class 加入 " {{wx.WOW()}} <动效名称>"，例如 " {{wx.WOW()}} bounceInUp "，同时需要给该动效分配一个 id 具体通过 {{wx.WOWId()}} 去自动分配到 data-wx-wow-id 上，并且确保添加动画的 display 属性为块状或行块状，不能为行类样式如下面的例子 1。

 //例子1： <view class=" {{wx.WOW()}} bounceInUp"  data-wx-wow-id="{{wx.WOWId()}}" > ... </view>

复制代码

额外参数

此外还可以控制动效的一些过程例如:

动效名称: data-wx-wow-name (bounceInUp , fadeInLeft,…)

动效延时： data-wx-wow-delay （ 300ms , 0.3s, 4s …）

动效持续时间：data-wx-wow-duration （ 300ms , 0.3s, 4s …）

距离可视区域多少开始执行动效: data-wx-wow-offset (整数) （ 0 , 100, 50 …）

动效执行次数: data-wx-wow-iteration ( 1, 5, infinite, …)

 <view class="{{wx.WOW()}} bounceInUp"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s" data-wx-wow-offset="500" > ... </view>  <image src="xxxx.png" class="{{wx.WOW()}} swing"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s" data-wx-wow-offset="500" data-wx-wow-iteration="5" />
<view class="{{wx.WOW()}} fadeOut"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s"  data-wx-wow-duration="3s" > ... </view>

复制代码

升阶配置

若需升阶配置则需改变设置方式，在 class 加入 " {{wx.WOW()}}" ,同时加入 data-wx-wow-name=“<动效名>” 同时需要给该动效分配一个 id 具体通过 {{wx.WOWId()}} 去自动分配到 data-wx-wow-id 上，并且确保添加动画的 display 属性为块状或行块状，不能为行类样式如下面的例子 2

//例2： <view class=" {{wx.WOW()}} " data-wx-wow-name="bounceInUp" data-wx-wow-id="{{wx.WOWId()}}" > ... </view>

复制代码

触发实现离场动效

通过触发 wx.WOWOut() 函数，来触发离场动效，需保证 data-wx-wow-name有值，默认为 data-wx-wow-name中相反的动效名（例如 bounceInUp 相反动效为 bounceOutUp）。触发回调对应逻辑层 wxWOWTap（可以执行跳转页面或其他处理）

 <view class=" {{wx.WOW()}} " data-wx-wow-name="bounceInUp" data-wx-wow-id="{{wx.WOWId()}}"  catchtap="{{wx.WOWOut}}" > ... </view>

复制代码

Page({  ...  wxWOWTap: function(event){      console.log(event)     setTimeout(()=>{      event.target.dataset.idx?wx.navigateTo({url: '/pages/xxx/xxx?idx='+event.target.dataset.idx}):''     },600)  }  ...})

复制代码

可选配置

此外还可以控制动效的一些过程例如:

动效名称: data-wx-wow-outName [默认data-wx-wow-name取相反动效 ] (bounceOutUp , fadeOutLeft,…)

动效延时： data-wx-wow-outDelay [默认与 data-wx-wow-delay 相同 ] （ 300ms , 0.3s, 4s …）

动效持续时间：data-wx-wow-outDuration [默认与 data-wx-wow-duration 相同 ] （ 300ms , 0.3s, 4s …）

动效执行次数: data-wx-wow-outIteration [默认与 data-wx-wow-iteration 相同 ] ( 1, 5, infinite, …)

设置页面重复动效（进入页面重新刷新执行动效）

Page({   data: {      wxwowConfig: {          repeat: true //是否重复刷新开启动画 默认 true , 当设为 false，则该页面未销毁前，只会执行一次动效      }   }})

复制代码

其他设置

设置某单个动效，重复执行（优先级高于设置页面重复动效），给类名 class 加入 wxwow-repeat

  <view class=" {{wx.WOW()}} wxwow-repeat " data-wx-wow-name="bounceInUp" data-wx-wow-id="{{wx.WOWId()}}"  catchtap="{{wx.WOWOut}}" > ... </view>

复制代码

设置某单个动效，仅仅执行一次（优先级高于设置页面重复动效），给类名 class 加入 wxwow-once

  <view class=" {{wx.WOW()}} wxwow-once" data-wx-wow-name="bounceInUp" data-wx-wow-id="{{wx.WOWId()}}"  catchtap="{{wx.WOWOut}}" > ... </view>

复制代码

Demo

https://developers.weixin.qq.com/s/llE4M7m67rnC

应用实列

欢迎点赞，Fork , 提 Issues

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/7fedc9ac1ba6d3d846fd588d6】。

Five

关注

有事多研究，没事瞎琢磨 2022.08.02 加入

退役ACMer, IT技术狂热爱好者，CSDN 前端领域优质创作者,博客专家认证。擅长领域，web前端，算法, 业务架构，可视化，富文本编辑器等。github: https://github.com/Five-great

发布

暂无评论

创作场景

wx-wow(微信小程序动效库)

wx-wow

下载

使用

额外参数

升阶配置

触发实现离场动效

可选配置

设置页面重复动效 （进入页面重新刷新执行动效）

其他设置

Demo

应用实列

欢迎 点赞 ，Fork , 提 Issues

Five

评论

设置页面重复动效（进入页面重新刷新执行动效）

欢迎点赞，Fork , 提 Issues