初始版本

1.该版本仅展示卡片滑动叠加效果

卡片滚动效果.framer/app.coffee

@@ -0,0 +1,87 @@
+# 基础参数
+rows = 8
+gutter = 16
+rowHeight = []
+rowWidth = Screen.width - gutter*2
+heightA = 0
+cellminY = []
+
+for n in [0...rows]
+	rowHeight[n] = Utils.round(Utils.randomNumber(240,240),0)  
+	#print "rowHeight：[" + n + "]:" + rowHeight[n]
+
+	heightA = heightA + rowHeight[n] + 16
+
+# 创建滚动列表
+scroll = new ScrollComponent
+	size: Screen.size
+	speedY: 0.5*0.72
+	scrollHorizontal: false
+
+# 创建卡片容器
+cells = new Layer
+	width: Screen.width
+	height: heightA
+	backgroundColor: null
+	#parent: scroll.content	
+# 创建卡片
+for index in [0...rows]
+
+	cell = new Layer
+		width: rowWidth
+		height: rowHeight[index]
+		x: Align.center
+		y: 0
+		parent: cells
+		scale: 1
+		backgroundColor: "#00AAFF"
+		hueRotate: index * 10
+		borderRadius: 8
+		shadowY: 4
+		shadowBlur: 16
+		shadowColor: "rgba(0,0,0,.5)"
+
+	cell.progress = 0
+
+	if index == 0
+		cells.children[index].y = 0 
+	for m in [0...index]
+		cells.children[index].y = cells.children[m].y + rowHeight[m] + gutter
+	# 记录卡片minY值
+	cellminY[index] = cells.children[index].minY
+
+
+
+#  滚动列表填充&设置
+contentA = new Layer
+	width: Screen.width
+	height: heightA * 1.5
+	parent: scroll.content
+	backgroundColor: null
+scroll.content.backgroundColor = null
+
+# 滚动进度
+progress = 0
+
+# 滚动事件 
+scroll.onMove ->
+
+	progress = scroll.content.y * -1
+	#print "滑动距离:" + Utils.round(scroll.content.y,0)
+
+	for i in [0...rows] 
+		#print "滑动距离:" + Utils.round(scroll.content.y,0) + " 距离：[" + i + "]:" + (cellminY[i] * (1-Utils.modulate(progress, [0,cells.children[i].minY], [0,1], true)))
+
+		num = (rows-1)-i
+		# 卡片进度转换
+		cells.children[i].progress = Utils.modulate(progress, [rowHeight[i]*(i+1),rowHeight[i]*i], [0,1])	
+		# 卡片透明度
+		cells.children[num].opacity = Utils.modulate(cells.children[num].progress, [-0.35,1], [0,1], true) 
+		# 卡片尺寸
+		cells.children[num].scale = Utils.modulate(cells.children[num].progress, [0,1], [0.94, 1], true)
+		# 卡片Y值赋值
+		cells.children[i].y = (cellminY[i] * (1-Utils.modulate(progress, [0,cellminY[i]], [0,1], true)))
+
+
+
+

卡片滚动效果.framer/framer/config.json

@@ -0,0 +1,22 @@
+{
+  "orientation" : 0,
+  "updateDelay" : 0.29999999999999999,
+  "designModeSelected" : 0,
+  "cachedDeviceHeight" : 736,
+  "contentScale" : 1,
+  "cachedDeviceWidth" : 414,
+  "fullScreen" : false,
+  "deviceType" : "apple-iphone-8-plus-space-gray",
+  "sharedPrototype" : 0,
+  "propertyPanelToggleStates" : {
+    "Filters" : false
+  },
+  "projectId" : "30D0DB53-DCC2-4254-88E0-F5DCC7E795E4",
+  "deviceOrientation" : 0,
+  "selectedHand" : "",
+  "showBezel" : 0,
+  "foldedCodeRanges" : [
+
+  ],
+  "deviceScale" : "fit"
+}

卡片滚动效果.framer/framer/design.vekter

@@ -0,0 +1,11 @@
+{
+  "root" : {
+    "__class" : "CanvasNode",
+    "children" : [
+
+    ],
+    "id" : "UPpeKEgw4",
+    "parentid" : null
+  },
+  "version" : 21
+}

卡片滚动效果.framer/framer/framer.generated.js

@@ -0,0 +1,13 @@
+// This is autogenerated by Framer
+
+
+if (!window.Framer && window._bridge) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})}
+if (DeviceComponent) {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false};
+if (window.Framer) {window.Framer.Defaults.DeviceView = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-8-plus-space-gray","contentScale":1,"hideBezel":true,"orientation":0};
+}
+if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-8-plus-space-gray","contentScale":1,"hideBezel":true,"orientation":0};
+}
+window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"卡片滚动效果.framer"};
+
+Framer.Device = new Framer.DeviceView();
+Framer.Device.setupContext();

卡片滚动效果.framer/framer/framer.init.js

@@ -0,0 +1,108 @@
+(function() {
+
+function isFileLoadingAllowed() {
+	return (window.location.protocol.indexOf("file") == -1)
+}
+
+function isHomeScreened() {
+	return ("standalone" in window.navigator) && window.navigator.standalone == true
+}
+
+function isCompatibleBrowser() {
+	return Utils.isWebKit()
+}
+
+var alertNode;
+
+function dismissAlert() {
+	alertNode.parentElement.removeChild(alertNode)
+	loadProject()
+}
+
+function showAlert(html) {
+
+	alertNode = document.createElement("div")
+
+	alertNode.classList.add("framerAlertBackground")
+	alertNode.innerHTML = html
+
+	document.addEventListener("DOMContentLoaded", function(event) {
+		document.body.appendChild(alertNode)
+	})
+
+	window.dismissAlert = dismissAlert;
+}
+
+function showBrowserAlert() {
+	var html = ""
+	html += "<div class='framerAlert'>"
+	html += "<strong>Error: Not A WebKit Browser</strong>"
+	html += "Your browser is not supported. <br> Please use Safari or Chrome.<br>"
+	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
+	html += "</div>"
+
+	showAlert(html)
+}
+
+function showFileLoadingAlert() {
+	var html = ""
+	html += "<div class='framerAlert'>"
+	html += "<strong>Error: Local File Restrictions</strong>"
+	html += "Preview this prototype with Framer Mirror or learn more about "
+	html += "<a href='https://github.com/koenbok/Framer/wiki/LocalLoading'>file restrictions</a>.<br>"
+	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
+	html += "</div>"
+
+	showAlert(html)
+}
+
+function loadProject(callback) {
+	CoffeeScript.load("app.coffee", callback)
+}
+
+function setDefaultPageTitle() {
+	// If no title was set we set it to the project folder name so
+	// you get a nice name on iOS if you bookmark to desktop.
+	document.addEventListener("DOMContentLoaded", function() {
+		if (document.title == "") {
+			if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) {
+				document.title = window.FramerStudioInfo.documentTitle
+			} else {
+				document.title = window.location.pathname.replace(/\//g, "")
+			}
+		}
+	})
+}
+
+function init() {
+
+	if (Utils.isFramerStudio()) {
+		return
+	}
+
+	setDefaultPageTitle()
+
+	if (!isCompatibleBrowser()) {
+		return showBrowserAlert()
+	}
+
+	if (!isFileLoadingAllowed()) {
+		return showFileLoadingAlert()
+	}
+
+	loadProject(function(){
+		// CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project")
+		var context;
+		if (typeof Framer !== "undefined" && Framer !== null) {
+			if ((context = Framer.CurrentContext) != null) {
+				if (typeof context.emit === "function") {
+					context.emit("loaded:project");
+				}
+			}
+		}
+	})
+}
+
+init()
+
+})()

卡片滚动效果.framer/framer/manifest.txt

@@ -0,0 +1,23 @@
+app.coffee
+index.html
+framer/preview.png
+framer/manifest.txt
+framer/images/cursor.png
+framer/images/[email protected]
+framer/images/icon-120.png
+framer/images/[email protected]
+framer/images/icon-192.png
+framer/images/icon-76.png
+framer/images/cursor-active.png
+framer/images/icon-152.png
+framer/images/icon-180.png
+framer/config.json
+framer/framer.vekter.js
+framer/framer.modules.js
+framer/version
+framer/style.css
+framer/framer.generated.js
+framer/coffee-script.js
+framer/framer.init.js
+framer/framer.js
+modules/myModule.coffee

卡片滚动效果.framer/framer/style.css

@@ -0,0 +1,59 @@
+* {
+	margin: 0;
+	padding: 0;
+	border: none;
+	-webkit-user-select: none;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+	background-color: #fff;
+	font: 28px/1em "Helvetica";
+	color: gray;
+	overflow: hidden;
+}
+
+a {
+	color: gray;
+}
+
+body {
+	cursor: url('images/cursor.png') 32 32, auto;
+	cursor: -webkit-image-set(
+		url('images/cursor.png') 1x,
+		url('images/[email protected]') 2x
+	) 32 32, auto;
+}
+
+body:active {
+	cursor: url('images/cursor-active.png') 32 32, auto;
+	cursor: -webkit-image-set(
+		url('images/cursor-active.png') 1x,
+		url('images/[email protected]') 2x
+	) 32 32, auto;
+}
+
+.framerAlertBackground {
+ 	position: absolute; top:0px; left:0px; right:0px; bottom:0px;
+ 	z-index: 1000;
+ 	background-color: #fff;
+}
+
+.framerAlert {
+	font:400 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing:antialiased;
+	color:#616367; text-align:center;
+ 	position: absolute; top:40%; left:50%; width:260px; margin-left:-130px;
+}
+.framerAlert strong { font-weight:500; color:#000; margin-bottom:8px; display:block; }
+.framerAlert a { color:#28AFFA; }
+.framerAlert .btn {
+	font-weight:500; text-decoration:none; line-height:1;
+	display:inline-block; padding:6px 12px 7px 12px;
+	border-radius:3px; margin-top:12px;
+	background:#28AFFA; color:#fff;
+}
+
+::-webkit-scrollbar {
+	display: none;
+}

卡片滚动效果.framer/framer/version

@@ -0,0 +1 @@
+13

卡片滚动效果.framer/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+
+	<meta name="format-detection" content="telephone=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+	<script type="text/javascript">
+		// This automatically sets the right viewport scale on mobile devices
+		(function () {
+			var scale = 1 / window.devicePixelRatio
+			var viewport = "width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no, viewport-fit=cover"
+			var iOS = /iPad|iPhone|iPod/.test(navigator.platform)
+			if (iOS) { viewport += ", shrink-to-fit=no" }
+			document.write("<meta name=\"viewport\" content=\"" + viewport + "\">")
+		})()
+	</script>
+
+	<link rel="apple-touch-icon" href="framer/images/icon-120.png">
+	<link rel="apple-touch-icon" href="framer/images/icon-76.png" sizes="76x76">
+	<link rel="apple-touch-icon" href="framer/images/icon-120.png" sizes="120x120">
+	<link rel="apple-touch-icon" href="framer/images/icon-152.png" sizes="152x152">
+	<link rel="apple-touch-icon" href="framer/images/icon-180.png" sizes="180x180">
+	<link rel="apple-touch-icon" href="framer/images/icon-192.png" sizes="192x192">
+
+	<link rel="stylesheet" type="text/css" href="framer/style.css">
+
+	<script src="framer/coffee-script.js"></script>
+	<script src="framer/framer.js"></script>
+	<script src="framer/framer.generated.js"></script>
+	<script src="framer/framer.modules.js"></script>
+	<script src="framer/framer.vekter.js"></script>
+	<script src="framer/framer.init.js"></script>
+
+</head>
+
+<body>
+</body>
+
+</html>