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

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=&quot;../../utils/wxWOW.wxs&quot; module=&quot;wx&quot; />
 <view change:prop=&quot;{{wx.WOWChange}}&quot; prop=&quot;{{wxwow}}&quot; >
 ...
 </view>



4. 在需要加入动效的地方的 

class

 加入 

&quot; {{wx.WOW()}} <动效名称>&quot;

， 例如 

" {{wx.WOW()}} bounceInUp "

， 同时需要给该动效分配一个 

id 

具体通过 

{{wx.WOWId()}}

 去自动分配到 

data-wx-wow-id

 上 ，并且确保添加动画的display 属性为 块状 或行块状，不能为行类样式 如下面的例子1。

 //例子1：
 <view class=&quot; {{wx.WOW()}} bounceInUp&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; > ... </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=&quot;{{wx.WOW()}} bounceInUp&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; data-wx-wow-delay=&quot;0.8s&quot; data-wx-wow-offset=&quot;500&quot; > ... </view>
 
 <image src=&quot;xxxx.png&quot; class=&quot;{{wx.WOW()}} swing&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; data-wx-wow-delay=&quot;0.8s&quot; data-wx-wow-offset=&quot;500&quot; data-wx-wow-iteration=&quot;5&quot; />

<view class=&quot;{{wx.WOW()}} fadeOut&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; data-wx-wow-delay=&quot;0.8s&quot; data-wx-wow-duration=&quot;3s&quot; > ... </view>


升阶配置

若需升阶配置 则需改变设置方式，在 

class

 加入 

" {{wx.WOW()}}"

 ,同时加入 data-wx-wow-name=“

<动效名>

” 同时需要给该动效分配一个 

id 

具体通过 

{{wx.WOWId()}}

 去自动分配到 

data-wx-wow-id

 上 ，并且确保添加动画的display 属性为 块状 或行块状，不能为行类样式 如下面的例子2

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


触发实现离场动效

通过触发 

wx.WOWOut()

 函数，来触发离场动效，需保证 

data-wx-wow-name

有值，默认为 

data-wx-wow-name

中相反的动效名（例如 bounceInUp 相反动效为 bounceOutUp）。触发回调对应逻辑层 

wxWOWTap

（可以执行跳转页面或其他处理）

 <view class=&quot; {{wx.WOW()}} &quot; data-wx-wow-name=&quot;bounceInUp&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; catchtap=&quot;{{wx.WOWOut}}&quot; > ... </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=&quot; {{wx.WOW()}} wxwow-repeat &quot; data-wx-wow-name=&quot;bounceInUp&quot; data-wx-wow-id=&quot;{{wx.WOWId()}}&quot; catchtap=&quot;{{wx.WOWOut}}&quot; > ... </view>


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

class

 加入 

wxwow-once

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


Demo

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

应用实列

 

欢迎 点赞 ，Fork , 提 Issues