在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验。通过微信小程序的原生API，实现小程序中控件的各种动画效果。首先，看看这篇论文的最终效果：

上图中的动画“关注微信官方账号”就是我们想要达到的效果。

为了达到以上效果，我们先来看看微信小程序关于动画的官方API

微信官方API学习

创建动画(对象)

描述：创建动画实例动画。调用动画操作方法后，应该调用step()来指示一组动画的完成。您可以在一组动画中调用任意数量的动画方法。一组动画中的所有动画将同时开始，下一组动画将在一组动画完成后开始。最后，利用动画实例的导出方法，导出传输到组件的动画数据的动画属性。

属性方法：

主要说明：定时功能

动画执行效果可以通过上面的timingFunction值来设置。

动画和动画方法

注：旋转、缩放、偏移、倾斜、矩阵变形等API。本文中没有介绍，但请参考官方API。

效果实现

通过以上介绍，结合官方的API文档，我们对动画的创作方法有了一个基本的了解。接下来，我们开始在渲染中实现动画效果。

1.将动画属性添加到1.wxml文件

在wxml中创建布局并添加动画属性：

view class=' pro-attention ' bind tap=' to attention ' animation=' { { attention anim } } ' text关注微信官方账号中动画效果的实现/text/view2.js。

页面({data: {attention anim: ' '，//.其他配置)，/* * *生命周期函数-监控页面第一次渲染的完成情况*/onready:函数(){ var attention anim=wx . create animation({ duration 3360 150，timing function 3360' ease '，delay : 0 0 })//设置循环动画this。attention anim=attention anim var next=true；setinterval(function(){ if(next){//根据要求，实现相应的动画本。注意anim.rotate (3)。step () next=！接下来；} else { this . attention nim . rotate(-3)。step() next=！接下来；} this.setData({ //将动画导出到指定控件的animation属性，attention anim : attention anim。export ()})}。bind (this)，150)}，//.通过wx.createAnimation创建动画，setInterval()方法执行循环调用。此时，可以实现渲染中的显示效果。

摘要

以上是边肖介绍的微信小程序循环动画效果的实现。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！