「连载100篇」AXURE-019-关于组合元件的旋转

封面

hi，大家好，我是18岁fantasy，axure组件和实例100篇连载。本期小组件为大家分析组合元件旋转先关的内容。

有时候当我们需要摇摆(转一个角度再转回来)一个组合元件时，虽然设置了都按照左上角旋转，但却总是不按照我们的旋转方式转动，最终偏离轨道。比如如下设置：

旋转设置

旋转结果却是是螺旋旋转。

螺旋旋转

而不是正常单个矩形的左右摇摆。

单个矩形的旋转

分析旋转轨迹，如下：

旋转轨迹

经过观察上边的旋转动画分析得知，当矩形组合元件旋转到非水平位置时，它的左上角变为能包含整个矩形的外正方形的左上角。

左上角变化

当矩形组合元件旋转到水平位置是，它的左上角又恢复到矩形的左上角。

有一个非常简单的解释原因就是，axure最终生成的是html，而每个元件都是一个div，而div就是一个具有行特征的块对象，也就是一个水平的矩形，任何对象都得以矩形来处理，也就是任何对象必须有“四至”。对一个不规则元件，它的边界就是它的四至形成的矩形。

四至

分析源码，axure对组合的旋转，记录了data-width和data-height两个属性，通过这两个属性来定位左上角（锚点）的位置。然后将组合元件的里的每个元件都围绕这个锚点来旋转。

源码分析

但对于单个矩形的旋转，axure却能每次旋转时都记住左上角（锚点）的位置。而对于单个矩形的组合元件却非如此。具体为什么这么做还未知，各位可以补充。

那么如何才能像旋转单个元件一个旋转组合元件呢，那么就是设置锚点的偏移量。只要通过计算得到偏移量，就可达到旋转单个元件的效果。当然这里需要用到三角函数。具体如下：

计算偏移量

通过设置偏移量来达到想要的效果。

设置偏移量

~以上便是本次小组件的全部内容~

18岁提示：以上文件完成于axure 8版本。

定期会将组件整理成完整文件统一发布。

原创文章，转载请标明出处。