微信小程序动画的实现及执行步骤

简单总结一下微信动画的实现和执行步骤。

一、实施模式

官方文件是这样说的：创建动画示例动画。调用实例的方法描述动画。(3)最后，通过动画实例的导出方法导出传输到组件的动画数据的动画属性。

因为小程序是数据驱动的，所以给这个句子添加数字分为三个步骤：

前两个步骤是定义一个动画并设置要做什么，然后将设置好的“规则”抛出到接口上的一个元素，让它按照这个规则执行。

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

第二，用例子说话

创建一个新的小程序，删除并修改无用的程序，做一个简单的例子，如上

代码如下：

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

view class=' container ' view class=' user motional ' animation=' { { ani } } ' text class=' user-motional ' { { motional } }/text/view button bind tap=' start ' animation/button/view index . wxss，添加了边框以便于查看。用户座右铭{ margin-top : 100 px；border:固体；}index.js

page({ data : { motto : ' Hello World '，}，start : function(){ var animation=wx . createanimation({ duration : 4000，timingFunction: ' ease '，delay : 1000 })；动画。不透明度(0.2)。翻译(100，-100)。这一步。setdata ({ani:动画。export()})})III)。相关参数和方法

简单介绍一下例子中的几个参数和方法(详见官方文件):

时长：动画持续多少毫秒？timingfunctions :“Motion”表示示例中的“ease”表示动画以低速开始，然后加速，并在结束前减速。延迟：动画开始运行还有多长时间？

不透明度(0.2)慢慢变得透明

平移(100，-100)将x轴移动100，将y轴移动-100

步骤():一组动画完成。例如，如果您希望上面示例中的HelloWorld移动到右上角并变得透明，则可以继续编写animation.translateX(-50)。步骤()。功能是向右上方移动，同时变得透明。只有这两个改变完成后，你才会向左跑。

示例：Github

摘要

以上就是边肖介绍的微信小程序动画的实现和执行步骤，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！