封面
hi，大家好，我是18岁fantasy，axure组件和实例100篇连载。本期小组件为大家分析组合元件旋转先关的内容。
有时候当我们需要摇摆(转一个角度再转回来)一个组合元件时，虽然设置了都按照左上角旋转，但却总是不按照我们的旋转方式转动，最终偏离轨道。比如如下设置：
旋转设置
旋转结果却是是螺旋旋转。
螺旋旋转
而不是正常单个矩形的左右摇摆。
单个矩形的旋转
分析旋转轨迹，如下：
旋转轨迹
经过观察上边的旋转动画分析得知，当矩形组合元件旋转到非水平位置时，它的左上角变为能包含整个矩形的外正方形的左上角。
左上角变化
当矩形组合元件旋转到水平位置是，它的左上角又恢复到矩形的左上角。
有一个非常简单的解释原因就是，axure最终生成的是html，而每个元件都是一个div，而div就是一个具有行特征的块对象，也就是一个水平的矩形，任何对象都得以矩形来处理，也就是任何对象必须有“四至”。对一个不规则元件，它的边界就是它的四至形成的矩形。
四至
分析源码，axure对组合的旋转，记录了data-width和data-height两个属性，通过这两个属性来定位左上角（锚点）的位置。然后将组合元件的里的每个元件都围绕这个锚点来旋转。
源码分析
但对于单个矩形的旋转，axure却能每次旋转时都记住左上角（锚点）的位置。而对于单个矩形的组合元件却非如此。具体为什么这么做还未知，各位可以补充。
那么如何才能像旋转单个元件一个旋转组合元件呢，那么就是设置锚点的偏移量。只要通过计算得到偏移量，就可达到旋转单个元件的效果。当然这里需要用到三角函数。具体如下：
计算偏移量
通过设置偏移量来达到想要的效果。
设置偏移量
~以上便是本次小组件的全部内容~
18岁提示：以上文件完成于axure 8版本。
定期会将组件整理成完整文件统一发布。
原创文章，转载请标明出处。
网友评论