使用Towify制作微信小程序时，如何配置旋转动画？

Towify 中的动画可以为组件设置多种动画效果，快来1秒Get如何配置！

效果展示

使用动画效果中的旋转动画，同时配置触发器行为：执行其它动画。实现点击播放动画的效果。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中音频组件

点击检查面板中的触发器

创建一个触发行为:执行其它动画的触发器

注意：在……时是一种监听行为的触发时机，在当前案例中，使用了监听音频的状态。

选中音频组件

点击检查面板中的触发器

创建触发行为:在……时的触发器

注意：激活有两种状态，分别为激活和非激活，激活对应了样式中的Selected状态，而非激活对应了样式中的Default状态

选中音频组件

点击检查面板中的触发器

创建触发行为:激活的触发器

这样就可以配置旋转动画了。

为了不让用户在使用小程序时造成困扰，微信小程序规定页面路径只能是五层，请尽量避免多层级的交互方式。

页面跳转的话就涉及到了多个页面层级

第一种：wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

OBJECT参数说明：

参数 类型 必填 说明

url String 是 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’

success Function 否 接口调用成功的回调函数

fail Function 否 接口调用失败的回调函数

complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

onLoad: function(options) {

wx.navigateTo({

url: '../index/index'

})

}

1

2

3

4

5

6

1

2

3

4

5

6

第二种：wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

参数 类型 必填 说明

url String 是 需要跳转的应用内页面的路径

success Function 否 接口调用成功的回调函数

fail Function 否 接口调用失败的回调函数

complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

onLoad: function(options) {

wx.redirectTo({

url: '../index/index'

})

}

1

2

3

4

5

1

2

3

4

5

第三种：wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明：

参数 类型 默认值 说明

delta Number 1 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

onLoad: function(options) {

var pages = getCurrentPages()

var num = pages.length

navigateBack:function(){

wx.navigateBack({

delta: num

})

}

}

---