IOS切图与前端切图差异
切图基本要素
确定元素位置、大小
确定元素颜色、形状（阴影、圆角等）等
元素交互动画
前端切图
位置：根据ui稿给定位置，一般不直接给定元素大小；通过html标签或
z-index确定层级关系颜色、形状：直接使用
css属性就可进行设置交互动画：使用
@keyframe或者通过js操作动画
IOS切图
位置：（原生）根据ui稿计算元素位置，同时计算元素大小，在元素大小发生变化时，通过代码进行重新计算元素的位置、大小；若使用三方库可以达到与前端切图相近的体验；
颜色、形状：颜色可以通过添加
layer进行配置，也可以直接设置backgroundColor，形状则只能通过layer进行设置，且过程繁杂；在同时有圆角以及阴影时，操作复杂（貌似需要叠加layer实现）交互动画：使用代码操作动画
差异
位置、大小的确定：前端在渲染时，父元素可以根据子元素大小进行调整，而ios则只能由子元素适应父元素（原生），在子元素大小变化时，需要重新计算父元素的大小、位置
形状：ios设置元素形状过程复杂，而前端则可以使用
css直接设置；ios原生不能直接设置内边距以及外边距（貌似）
实际样例
在使用ios切图时，这共有三个元素类：文案标签、文案后的圆角框、以及上方的正三角标签
前端则可以使用一个标签以及简单的css样式即可实现上面的ui
在文案内容变化时，同时需要计算文字长度动态设置文案后的圆角框的大小（原生）
ios切图体验
使用ios原生切图的体验有点类似使用
canvas画图，元素大小、位置变化需要自行维护设置元素的阴影、形状比较复杂
在使用
frame切图时想预览则只能打包到模拟器，再走流程ios使用自动布局（
Masonry）可以相对降低切图复杂度，但某些元素（例如列表里的元素）的大小仍然需要自行控制