transforms(形变)

transforms对应iOS中的CATransform3D,可以对layer进行形变。当前GIC提供了三种变换方式:

  1. rotate:旋转变形
  2. scale：缩放变形
  3. translate:位移

上述的三种形变方式，都是封装自iOS本身的CATransform3D。并且在实际的开发过程中，可以将多个方式组合在一起使用。

属性

x Float x轴旋转的角度 是 是
sub Bool 是否提供给subView的变换，如果设为true，那么将会应用于所有子元素 是 是

rotate

x Float x轴旋转的角度 是 是
y Float y轴旋转的角度 是 是
名称 数据类型 介绍 是否支持绑定 是否支持动画
z Float z轴旋转的角度 是 是

scale

名称 数据类型 介绍 是否支持绑定 是否支持动画
x Float x轴缩放的倍数。默认1 是 是
y Float y轴缩放的倍数。默认1 是 是
z Float z轴缩放的倍数。默认1 是 是

translate

名称 数据类型 介绍 是否支持绑定 是否支持动画
x Float x轴移动的距离。 是 是
y Float y轴移动的距离。 是 是
z Float z轴移动的距离。 是 是

示例

  1. rotate: 沿Z轴旋转45度

    1
    2
    3
    4
    5
    <panel size="60" background-color="black">
        <transforms>
            <rotate z="45"/>
        </transforms>
    </panel>

  2. scale： X方向和Y方向缩小为0.5倍

    1
    2
    3
    4
    5
    <panel size="60" background-color="black">
        <transforms>
            <scale x="0.5" y="0.5"/>
        </transforms>
    </panel>

  3. translate：沿X轴方向位移20像素

    1
    2
    3
    4
    5
    <panel size="60" background-color="black">
        <transforms>
            <translate x="20"/>
        </transforms>
    </panel>

  4. 综合多个形变：

    1
    2
    3
    4
    5
    6
    7
    <panel size="60" background-color="black">
        <transforms>
            <rotate z="45"/>
            <translate x="20"/>
            <scale x="0.5" y="0.5"/>
        </transforms>
    </panel>