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

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

效果展示

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

触发器配置

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

选中音频组件

点击检查面板中的触发器

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

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

选中音频组件

点击检查面板中的渣耐触发器

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

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

选中音频组件

点击检查面板中的触发器

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

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

        小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种改孝察方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”{{动画名称}}”。具体步骤：

1）创建动画对象并设置有效参数==>wx:createAnimation({参核茄数：有效值})

2）创建一组动画，调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意慎瞎命名)，用该对象开启动画==>this.setData({vip_animal: animation.export()})

4）在页面上调用动画对象==>animation="{{vip_animal}}"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="{{style_img}}"来显示

简单总结一下微信动画的实现指答及执行步骤。

实现方备拦式官方文档是这样说的：

①创建一个动画实例 animation。

②调用实例的方法来描述动画。

③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 ...

注意:

前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。

当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。

简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：

首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：

然后，在需要设置动画的相应的标签里，调用动画就可以了

比如需要给div添加动画效果：

div{

animation：1s 2s 动画名称 运动方式 动画执行的次数

}

详细分析：

首先 wxml 中 pupContent 初始化信息为高度为0 display: 为 noneclick 为 false

， click 这个来判断 display: 为 block 还是为 none （即： block 为换行显示， none 为不显示，把视图隐藏了） option 用来判断是否调用打开的动画，或者关闭的动画

第一次点击 click 变为 true option 变为 true 这时候 pupContent 的 display: 为 block 高度由动画变为 800rpx

第二次唯滚慧点击阴影部分 首先设置了 option 为 false option 为 false 的话先走的动画是 pupContent 由 800 的高度变为 0 .然后在设置click为false就隐藏掉了

---