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)"

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s