很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：
在开发者工具中预览效果
我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。
css3实现：
先看最基本的.wxml布局：
从图中可以看到，当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢？就是红圈部分，用translateX位移来移动，而transitions实现一个过渡效果。
curtab就是当前点击tab的index，点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足，就是tab的宽度是固定的，但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现：
有些喜欢折腾的同学说想要js来实现呢？当然也是可以的，用js来实现的思路也是一样，用控制line元素的translateX值。那么怎么知道应为位移多少呢？就是动态的去获取该位移的值，然后赋给translateX。
说到动态的去获取元素额left值，可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。（这里不细说api的用户，不清楚的同学请自行查看文档哈哈哈）
那是不是可以:
来看看具体的实现：
emmm最后说一下，前端时间看到过一个很骚的操作，同样是用纯css实现这种跟随动画，先看看效果图：
.css
在制作CSS动画的时候，经常会有这样的需求，
让一个方块 沿着给定的路径 运动。
如果运动路径是不规则的，通过设置 top ， left 的属性值，就显得非常困难了。
这时候可以借助svg来实现。
path 元素的形状是通过它的 d 属性 定义的，
d 属性的值，是一个“命令+参数”的序列。
其中， M 20 30 L 160 180 ，包含了2个命令序列，
M 20 30 ，表示将画笔移动到坐标 20,30 处，
L 160 180 ，表示从画笔当前位置，到 160,180 位置画直线。
path元素支持多种命令，可以参考这里， curve commands
html元素的CSS样式属性 offset-path ，表示 偏移路径 。
通过指定 offset-path 的值为path元素的 d 属性值，我们可以实现元素沿着给定的 path 路径运动。
其中， offset-distance 指定了元素偏移初始位置的百分比。
通过在 @keyframes 中逐帧更改 offset-distance ，可以实现动画效果。
我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ，
相应的也修改小方块的 offset-path 属性。
就可以实现小方块沿着path运动的效果了。
MDN: paths
MDN: offset-path
MDN: offset-distance
A How-to Guide to SVG Animation
Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths
可以x和y分开写动画，速度不一样，就形成曲率了@keyframes anix {
0% {top: 0}
100% {top: 200px}
}
@keyframes aniy {
0% {left: 0}
100% {left: 100px}
}
