微信小程序动画（六）：矩阵变形

种一颗树，最好的时机是十年期，而后是现在。
The best time to plant a tree was twenty years ago. The second-best time is now.

在微信小程序中，提供了这样一个API——wx.createAnimation(Object object)。该API创建一个动画实例 animation。调用实例的方法来描述动画。

本文主要介绍animation实例的矩阵变形相关的方法及其使用。

假设我们创建了这样一个实例：

this.animationData = wx.createAnimation({duration: 1000
})

1. Animation.matrix()

matrix() 是一个含六个值的(a,b,c,d,tx, ty)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。这些值表示以下函数: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

核心代码：
this.animationData.matrix(1, 2, 2, 1, 20, 40).step()

效果如下

2. Animation.matrix3d()
CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3：描述线性变化效果
a4 b4 c4 d4：描述如何应用平移变换

核心代码：
this.animationData.matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1).step()

效果如下

matrix()和matrix3d()应用起来比较复杂，我在这里只是简单的说一下微信小程序有这么一个方法，如果需要深入了解，需要对数学矩阵有一定的知识。

注：以上效果均设置过渡时间为1000ms，即1s

微信小程序动画（六）：矩阵变形相关推荐

微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
微信小程序动画效果方法封装
微信小程序的动画如何实现?归纳起来主要有以下几步: 首先在wxml中为需要添加动画的元素绑定动画属性,如下所示: <image animation="{{animationData}} ...
微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...
微信小程序动画无限循环掉花
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 动画效果源码 <block wx:if="{{donghu ...

微信小程序动画（六）：矩阵变形

微信小程序动画（六）：矩阵变形相关推荐

最新文章

热门文章