微信小程序对号动画怎么弄

官方文档是这样说的：①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

因为小程序是数据驱动的，给这句话加上数字标注分为三步：

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

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

二、用例子说话

新建一个小程序，把没用的删掉修改一下，做个简单例子，上图

代码如下：

index.wxml，一个helloworld，一个按钮

<view class="container">

<view class="usermotto" animation="{{ani}}">

<text class="user-motto">{{motto}}</text>

</view>

<button bindtap='start'>动画</button>

</view>

复制

index.wxss， 为盯数了看着方便加了个边框

.usermotto {

margin-top: 100px

border: solid

}

复制

index.js

Page({

data: {

motto: 'Hello World',

},

start:function(){

var animation = wx.createAnimation({

duration: 4000,

timingFunction: 'ease',

delay: 1000

})

animation.opacity(0.2).translate(100, -100).step()

this.setData({

ani: animation.export()

})

}

})

复制

三、相关参数及方法

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

duration: 动画持续多少毫秒

timingFunction: “运动”的方式，例子中凯派首的 'ease'代表动画以低速开始，然后加快，在结束前变慢

delay: 多久后动画开始运行

opacity(0.2) 慢慢变透明

translate(100, -100) 向X轴移动100的同时向Y轴移动-100

step(): 一组动画完成，例如想让上例中的HelloWorld向右上方移动并变透明后，再次向左移羡雹动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行， 这两种变化完成之后才会进行向左运行的一步。

例子：Github

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后郑旦贺进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这喊派里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，event.detail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不迟告建议这么使用

小程序开发者文档

SwiperTab

---