如何实现小程序动画点赞特效？

　　最近大家又开始关注微信小程序了，全因为小程序新推出了小程序动画点赞特效，这个对于年轻一代的人来说的确很新奇很有意思。那么如何实现小程序动画点赞特效呢?一起来了解下吧。

　　除了使用CSS3的动画，MINA框架也提供了一组动画API。我们不使用CSS3动画，而是使用wx.createAnimation来实现点赞动画效果。当我们使用wx.createAnimation创建一个动画实例animation后，可以对这个实例设置多个动画组，而每个动画组中会有若干个动画方法;组与组之间使用step()方法来分隔，多个组形成一个链式的调用队列，这个链式队列就是我们所说的动画队列。看一下下面的演示代码会比较清楚地理解以上几个概念。

　　首先我们创建了一个动画实例animation，并设置这个animation的特效为ease-in-out。接着我们对这个动画实例设置了两个动画组，它们之间使用step()作为分隔。第一组动画包含两个动画方法scale和rotate(缩放和旋转);第二组动画包含一个动画方法translate(偏移)。我们在这里提出一个问题，以上两个动画组以及每个动画组里的动画方法执行顺序是什么?scale与rotate是同时执行还是先执行scale后执行rotate?rotate和traslate又是谁先执行?毕竟是动画，每个动画的执行先后顺序是非常重要的。同一组中的动画方法会同时执行，但动画组必须是先后执行。也就是说，一组动画先执行完成后，后面的动画才能执行，它们是one by one地执行。用以上理论来解释以下示例代码中动画执行的先后顺序：scale和rotate会同时执行，而translate必须等scale和rotate执行完成后才会执行。还有一个问题，可不可以在不同的动画组中设置不同的动画效果参数?答案是可以的。每个step方法都可以接受一个object对象：可以传入一个跟wx.createAnimation()一样的配置参数，用于指定当前组动画的小程序配置。

　　注意红框里部分的小程序代码，这将改变第二组动画translate的执行效果。我们的项目中示例来学习如何定义和使用动画。还记不记得在post-detail页面中有一个点赞的按钮时，心形图标会有一个渐渐放大随后又缩小的效果。下面我们来实践一下。在post-detail.js中新增一个方法。

　　以上代码定义了一个setAniation方法，接着我们在post-detail.js的onLoad方法中使用setAniation方法。

　　红框里部分为新增代码。接着我们修改onUpTap这个点赞小程序按钮的事件响应函数。

　　红框里部分代码是新增代码。使用动画的关键有以下两点：1、必须调用动画实例animationUp的export方法导出动画。2、将export方法导出的动画绑定到动画需要作用的wxml组件上。注意，当调用动画实例animationUp的export方法后，animationUp上所设置的动画方法将被清空。以上代码中，我们对动画实例animationUp做了两次设置和调用：第一次设置scale动画方法让图标先放大，随后调用step方法表示这组动画完成。接着调用export方法导出动画，并做数据绑定更新，这将导致点赞图标被放大。第二次设置scale方法让图标恢复到原装，同样再次调用step和export并做数据绑定更新，这将导致点赞的小程序图标还原。

　　注意，第一次调用export后，animationUp动画实例会被清空，所以第二次设置animationUp时不会受第一次动画方法的影响。在执行第二次动画时，我们使用setTimeOut让缩小的动画效果延迟300秒再执行。既然我们在代码中使用了数据绑定，就必须在wxml中绑定这个动画，这样点赞动画才能够正常执行。修改post-detail.wxml中设置点赞图标的image组件代码。

　　红框里部分是我们新增加的代码，作用很简单——接受动画的数据绑定。注意，需要同时绑定已点赞和未点赞两种状态的图标。编写完以上代码后，保存代码并运行，点击点赞图标将出现先放大再缩小的动画效果。

　　关于如何实现小程序动画点赞特效大家都明白了吗?其实过程也不是特别复杂，大家按照文中介绍的步骤仔细操作就好了，如果还有不懂的地方可以在微信小程序商店搜索相关资料。

　　微信小程序动画弹出框怎么开发?

　　微信小程序动画锚点案例

　　微信小程序动画解析