背景

iOS 中如何精准还原 Sketch 线性渐变效果

这样的突变效果当然用切图是能够便利的实现，但切图不够灵敏，并且会增加包巨细

那如何用代码实现呢？

首要看下 iOS 中突变的几个参数

  • colors
  • startPoint
  • endPoint
  • locations

colors 很好获取，其他三个参数怎么办呢，似乎只能看图猜出个大概？

猜测

众所周知，sketch 有一键导出标注的插件 ，但是只能获取到 locations 信息

background-image: linear-gradient(-73deg, #361CE6 0%, #7DA7EB 50%, #96A4FF 100%);

并且这个 -73deg 关于 iOS 中的 startPoint``endPoint 来说还不太友爱，需要通过一番转换。

这个时候心中有个想法，这个插件能导出这些信息应该是对 sketch 的源文件进行了解析，那么 sketch 的源文件是个什么样的文件呢，会不会像 .ipa 那样是个压缩包呢？

实践

用 file 指令能够检查文件的信息

file Test.sketch

输出如下结果

Test.sketch: Zip archive data, at least v2.0 to extract, compression method=deflate

能够看到这确实是一个压缩包

那就能够用 unzip 指令来解压一下

unzip Test.sketch -d ./temp

看看解压出了个啥呢？

.
├── document.json
├── meta.json
├── pages
│ └── 7832D4DC-A896-40BE-8F96-45850CE9FC53.json
├── previews
│ └── preview.png
└── user.json

有 json 文件！欣喜若狂！！！最终在 pages 这个目录下的 json 文件找到了想要的东西

{
	"_class": "gradient",
	"elipseLength": 0,
	"from": "{1.1356274384397782, 0.99999999999999978}",
	"gradientType": 0,
	"to": "{-0.13533980933892775, -0.49069446290249097}",
	"stops": [
		{
			"_class": "gradientStop",
			"position": 0,
			"color": {
				"_class": "color",
				"alpha": 1,
				"blue": 0.903056932532269,
				"green": 0.1092045213150163,
				"red": 0.2098672970162421
			}
		},
		{
			"_class": "gradientStop",
			"position": 0.4973543951952161,
			"color": {
				"_class": "color",
				"alpha": 1,
				"blue": 0.9204804793648098,
				"green": 0.6532974892326747,
				"red": 0.4919794574547816
			}
		},
		{
			"_class": "gradientStop",
			"position": 1,
			"color": {
				"_class": "color",
				"alpha": 1,
				"blue": 1,
				"green": 0.6418734727143864,
				"red": 0.5896740424923781
			}
		}
	]
}

定论

  • from 是 startPoint
  • to 是 endPoint
  • stops 中的 position 是 locations

Tips: UI 给的 sketch 文件或许图层太多，json 文件会非常大，打开比较卡，能够把图层复制到自己新建的 sketch 文件中再解压