微信小程序动画锚点案例

时间：2023-07-01 14:05 阅读数：114人阅读

　　微信小程序动画锚点案例，有时候一些简单的小程序动画都是需要复杂的锚点，下面小编给大家介绍一下微信小程序动画锚点案例，这里的案例以绕圆锚点为例。

　　微信小程序动画锚点案例

　　首先用 wx.cretrAnimation 创建一个动画实例，OBJECT 里的参数是设置动画 duration、timingFunction、delay、transformOrigin;然后通过 export 方法将动画实例输出并 setData 给组件 data{} 里的 animation 属*。

　　在开始说下面的小动画之前需要注意以下几点：

　　1、程序官方动画 API 文档的最下面的 bug&tip：

　　bug: IOS/Android 6.3.30 通过step()分隔动画，只有第一步动画能生效。

　　2、小程序动画文档里的 wx.cretrAnimation 这个方法提供的参数没有类似css3 animation-iteration-count 这样的参数。

　　接来就说说下面的小动画案例：

　　如上图我们要实现小圆点沿着圆圈轨迹运动的小动画。

　　小程序WXML:

　　两个view标签，一个是路径圆圈，圆圈可以用背景图来做也可以用 border-radius 来实现;一个是圆点。

　　小程序WXSS:

　　基本设置定位，这里只放宽高。

　　小程序JS:

　　transformOrigin 这个参数所设置的是小圆点旋转时的原点，默认是元素中心，下面设置的就是路径圆圈的中心，具体参数需要根据路径圆圈不来算。

　　从上面的小程序代码可以看出是使用 setInterval() 解决了文章开头的两项注意事项。

　　那么为什么不执行 rotate(360) 或者 rotate(180) ?

　　这就要注意官方文档的 rotate(deg) 的 deg 的取值范围 -180 ~ 180，从原点顺时针旋转一个 deg。还有就是 rotate animation 在运动角度幅度较大的情况下轨迹会有偏离，就是说在正常设置的 transformOrigin 的情况下圆点运动轨迹会有偏离。

　　微信小程序动画锚点案例介绍完了，不知道大家看懂没，如果没看懂就多看几遍，相信大家没问题的，这里抛砖引玉，以后大家在小程序动画锚点中就没有问题了。欢迎关注微小乔，感谢大家的支持。