详解微信小程序动画Animation执行过程

更新时间：2020年09月23日 16:09:11 作者：王佳斌

这篇文章主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言

因官方文档描述不清晰，本文主要介绍微信小程序动画 实现过程 / 实现方式。

实现过程

推荐你对照官方文档来看本文章，这样更有利于理解。

简单来说，整个动画实现过程就三步：

创建一个动画实例 animation。
调用实例的方法来描述动画。
最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

在这里插入图片描述

前两步是定义一个动画并设置都要干什么，然后把这个设置好的 “规则” 扔给界面上的某个元素，让它按照这个规则执行。

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

实现过程

上面是理论，接下来进入实操环节，我们通过一个例子来验证。

在这里插入图片描述

index.wxml

<!-- 动画容器(执行动画) -->
<view animation="{{ ani }}" class="content"></view>
<!-- END -->

<!-- 触发按钮 -->
<button bindtap="go">动起来</button>
<!-- END -->

index.js

Page({

 /*
 * 事件处理
 */
 data: {},

 /*
 * 事件处理
 */
 go: function() {
 
 // 1.创建动画实例(animation)
 var animation = wx.createAnimation({
  duration: 1500,//动画持续时间
  timingFunction: 'ease-in',//动画以低速开始
  //具体配置项请查看文档
 })

 // 2.通过实例描述对象()
 /*
 * 链式(类似JQuery)
 * 用 . 拼接动画
 * 最后step()结尾表动画结束
 */
 animation.translate(100, 100).rotate(180).rotate(360).step()

 // 3.导出动画
 this.setData({
  ani: animation.export()
 })
 }
})

index.css

.content {/*为了能看清效果*/
 width: 200rpx;
 height: 200rpx;
 border: 3px solid red;
}

总结

到此这篇关于微信小程序动画Animation执行过程 / 实现过程 / 实现方式详解的文章就介绍到这了,更多相关微信小程序动画Animation内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript数据结构之二叉树的查找算法示例
这篇文章主要介绍了JavaScript数据结构之二叉树的查找算法,结合具体实例形式分析了javascript针对二叉树节点最小值、最大值的相关查找操作实现技巧,需要的朋友可以参考下
2017-04-04
window.onresize 多次触发的解决方法
用了window.onresize但是发现每次 onresize 后页面中状态总是不对，下面与大家分享下onresize 事件多次触发的解决方法
2013-11-11
基于JavaScript实现网红太空人表盘的完整代码
这篇文章主要介绍了基于JavaScript实现网红太空人表盘的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
微信内置浏览器图片查看器的代码实例
这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
JavaScript 检测浏览器和操作系统的脚本
代码转自《Professional JavaScript™ for Web Developers》一书。
2008-12-12
JavaScript 中 this 关键字的作用及改变其上下文的方法
这篇文章主要介绍了JavaScript 中 this 关键字的作用和如何改变其上下文,通过使用 call, apply, bind 方法，可以改变函数中的 this 指向，从而在不同的上下文中使用同一个函数，需要的朋友可以参考下
2023-01-01
小程序实现上下切换位置
这篇文章主要为大家详细介绍了小程序实现上下切换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
灵活的理解JavaScript中的this指向
this是JavaScript中的关键字之一，在编写程序的时候经常会用到，正确的理解和使用关键字this尤为重要。接下来通过本文给大家介绍javascript中的this，需要的朋友参考下吧
2016-02-02
6种JavaScript判断对象自身为空的方法小结
这篇文章主要为大家详细介绍了6种JavaScript判断对象自身为空的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
JavaScript常用代码书写规范的超全面总结
这篇文章给大家全面总结了JavaScript常用代码的书写规范，分别利用推荐和不推荐的两种示例代码让大家更能直接的了解书写规范，其实关于javascript代码规范我们应该遵循古老的原则：“能做并不意味着应该做”，好了，下面我们就来一起看看吧。
2016-09-09