Framer:双指缩放(pinch)和拖拽(drag)动效

Framer是一个设计师可以帮助前端工程师减轻压力的工具,因为它不仅展示动效,而且生成JS代码,可以由工程师直接拿过去用,而不用担心“设计师想象出来的动效是不现实的”。

这是Framer生成的代码目录截图:

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-29-09-11-53

慢慢在学会用Framer了,今天尝试了写这段代码,并在手机上查看了镜像效果(mirror),非常不错。Framer是充满活力的原型工具。


bg = new BackgroundLayer
	backgroundColor: "#28affa"

layerA = new Layer
	backgroundColor: "#ffffff"
	borderRadius: 10
	x: Align.center
	y: Align.center
	width: 300
	height: 300

layerA.pinchable.enabled = true
layerA.draggable.enabled = true

layerA.onPinchEnd ->
	layerA.animate
		scale: 1
		rotation: 0
		options: 
			curve: "spring(300,20,0)"

layerA.onDragEnd ->
	layerA.animate
		x: Align.center
		y: Align.center
		scale: 1
		rotation: 0
		options: 
			curve: "spring(300,20,0)"

HTML5Up 网站源码修改样式

应修改“main.css”,而不是任何“.scss”文件。

如果修改“.scss”文件,则会出现:文件中已修改颜色方案(palette),但网页显示出来还是没有改变。

这个技术问题是我在好几个月以前,帮自己制作网站时就遇到的。当时没有深入探索,而是放弃了这套源码。

这次因为部门里面准备制作一个简单的网站,同事非常希望可以更改按钮和banner底色,所以我尝试探索了一下,过程是:

1. 自己调试源码,发现问题存在的地方:修改“.scss”无法带来网页的改变;

2. 在StackOverflow提问并等待,结果无人回答;

3. 联络HTML5Up原作者,在Twitter上恭维他并礼貌地提问,得到他的简单回答:“hey, you need to recompile the CSS from the Sass (*.scss) sources”;

4. 尝试搞清楚如何“recompile CSS from SASS”。

最终发现,原package里面有一个“css”的包,修改这里面的源码,可更改网页的样式。