一、前言
在探索 HarmonyOS 的过程中,我们发现了许多有趣且实用的功能和特性。有些总是在不经意间或者触类旁通的找到。或者是某些开发痛点。其中,早上群友对Rotate有点疑惑,干脆把这玩意整一整,分享给大家。
该系列将着重分享、介绍HarmonyOS API11+的新版本特性或者奇奇怪怪的解决方案、BUG。(弃用API非必要不提及)
如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法,欢迎在评论、私信或邮件中提出,非常感谢您的支持。🙏
二、translate
translate变换主要包含以下几个参数:x
、y
、z
。
x、y两个参数用于指定平移的方向和距离。在2D平移中,x
代表横向移动的距离,y
代表纵向移动的距离。通过调整这两个坐标,我们可以实现物体在二维空间中的移动。
只移动X、Y轴效果如下:
z
参数用于指定在垂直方向上的移动距离,也可以理解为深度。在3D空间中,通过调整z
值,我们可以实现物体在垂直方向上的移动,从而产生立体效果。
移动X轴:
在z轴从0趋向于-∞的时候,你会发现z 轴在<0时是缩小,但是<-250时会放大,并反向。
因为存在观察点(我猜就是-250),所以离观察点越近组件越大,反之。
如果组件的z
值超过了观察点(z
> -250
),会进入观察点的后方视野,导致物体变得反向。此时,物体会变得很大且反转。
三、rotate
旋转香蕉而言多了角度、旋转中心、视距
名称 | 类型 | 说明 | |
---|---|---|---|
x | number | 旋转轴向量x坐标。 | |
y | number | 旋转轴向量y坐标。 | |
z | number | 旋转轴向量z坐标。 | |
angle | number | string | 旋转角度。取值为正时相对于旋转轴方向顺时针转动,取值为负时相对于旋转轴方向逆时针转动。取值可为string类型,如'90deg'。 |
centerX | number | string | 变换中心点x轴坐标。 |
centerY | number | string | 变换中心点y轴坐标。 |
centerZ | number | z轴锚点,即3D旋转中心点的z轴分量。 | |
perspective | number | 视距,即视点到z=0平面的距离。旋转轴和旋转中心点都基于坐标系设定,组件发生位移时,坐标系不会随之移动。 |
在旋转中,x、
y、
z这三个参数用于指定旋转轴。在3D旋转中,
x轴、
y轴和
z`轴分别代表水平、垂直和深度方向。
当x、
y、
z均为单独设置时,其大小只影响相对方向,全靠angle影响
1、绕Z轴:这是中心旋转
{
"x": 0,
"y": 0,
"z": 1,
"angle": 45,
"centerX": "50%",
"centerY": "50%",
}
2、绕Y轴:这也是左右翻转
{
"x": 0,
"y": 1,
"z": 0,
"angle": 45,
"centerX": "50%",
"centerY": "50%",
}
3、绕X轴:这也是上下翻转
{
"x": 1,
"y": 0,
"z": 0,
"angle": 45,
"centerX": "50%",
"centerY": "50%",
}
三者如果合并的话,就是空间向量的合了,需要空间想象力。
4、centerX、centerY、centerZ
默认情况下,旋转是围绕图形的中心进行的。通过调整centerX、centerY、centerZ,可以改变旋转的中心点,使得变换效果更灵活。而centerZ就是在三维中的点了。
我们可以看到GIF中的红点。
5、perspective
perspective是透视参数,它可以模拟物体在远近不同的位置看起来大小不同的效果。有点类似平行于z轴的角度 rotate默认是z轴旋转,需要设置旋转参数中 x 或者y轴的参数。
想象你在看一条笔直的公路,这条公路会在远处逐渐变窄,直到消失在视线尽头。这就是透视效果。
无透视效果:当perspective
为0时,图形在旋转时不会有任何深度变化,看起来像是平面的旋转。
有透视效果:当perspective
值较大时,图形在旋转时会产生明显的深度变化,产生3D效果。
(实际操作中并不明显)
四、Scale
scale参数如下:
名称 | 类型 | 说明 | |
---|---|---|---|
x | number | x轴的缩放倍数。x>1时以x轴方向放大,0<x<1时以x轴方向缩小,x<0时沿x轴反向并缩放。 | |
y | number | y轴的缩放倍数。y>1时以y轴方向放大,0<y<1时以y轴方向缩小,y<0时沿y轴反向并缩放。 | |
z | number | z轴的缩放倍数。z>1时以z轴方向放大,0<z<1时以z轴方向缩小,z<0时沿z轴反向并缩放。 | |
centerX | number | string | 变换中心点x轴坐标。 |
centerY | number | string | 变换中心点y轴坐标。 |
在二维平面中,Z轴的缩放通常没有直接的视觉效果~
五、预告
下篇分享矩阵变换(可能)
六、结尾
没了。
如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法,欢迎在评论、私信或邮件中提出,非常感谢您的支持。🙏