问题标签 [framerjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
216 浏览

coffeescript - 咖啡脚本中的逗号 / framerjs

我们什么时候在咖啡脚本中的函数声明后使用逗号?例如,在下面的代码中,为什么在 Events.DragStart 之后有一个逗号?

layerA.on Events.DragStart, -> print layerA.draggable.layerCursorOffset

0 投票
1 回答
162 浏览

coffeescript - 我如何在身体负荷上调用咖啡脚本函数

我正在使用app.coffee咖啡脚本文件在 framerjs 原型制作工具上创建一些动画。我想要实现的是我已经定义了一个函数,并且我想在身体负载时调用该函数。我怎么能在咖啡脚本中做到这一点?

代码:

0 投票
1 回答
232 浏览

coffeescript - 单击事件仅从层列表中的最后一个对象触发,而不是单击的对象

我是 FramerJS 和 Coffee Script 的新手,但我对编程并不陌生。我正在创建一些初学者项目来了解如何在 FramerJS 中制作移动应用程序原型。我正在开发一个带有“卡片”的滚动应用程序。单击卡片时,它应该缩放到屏幕的大小。当你再次点击它时,它会回到之前的帧位置。

然而,当点击任何一张卡片时,列表中的最后一张卡片是缩放到屏幕中心的卡片。我不确定到底发生了什么。任何人都可以看看代码,看看发生了什么?

提前致谢!

示例 2 列滚动应用程序

0 投票
2 回答
695 浏览

framerjs - 具有动态高度的 FramerJS 图层(从草图导入图层)

在高层次上,我们试图了解 Framer 渲染具有动态高度的图层的最佳方式。

我们正在将我们的设计从 Sketch 导入 Framer。我们正在构建一个简单的问答页面。每页有 1 个问题,用户将完成 20 个问题,一个接一个的问题页。

这是设计的粗略版本: 具有动态高度部分的页面设计

页眉、页脚和提示的高度始终相同。问题和答案部分会根据我们要呈现的问题和答案而变化。

我们看到了三种可能的解决方案:

  1. 创建 20 个不同的草图模板/卡片,每一个代表不同问题的呈现(例如,卡片 1 将列出问题 1 和答案 1)。当第一个问题得到回答时,我们渲染下一张草图卡以显示问题 2 和答案 2。为了清楚起见,我建议每张卡片都包含所有内容:页眉、问题、提示、答案和页脚。
  2. 有 1 个草图模板/卡片,它是页眉、问题 1、提示、答案 1 和页脚的完整呈现。有一堆也导入 Framer 的迷你模板/卡片层。每个问题都有一个层,每组答案都有一个层。当 Framer 尝试加载问题 2 时,它会加载 question1 的完整呈现与 answers1(以及页眉、页脚等),并将包含 question1 的层与 question2 交换,并将包含 answers1 的层与 answers2 交换。有一个问题,question2 小于 question1,所以现在问题和提示层之间有很大的空白。因此,以编程方式遍历 Framer 中的图层并使用 align 正确对齐它们。
  3. 有几个小层(标题、问题 1、问题 2、...、问题 20、提示、答案 1、...、答案 20、页脚),并使用 Framer 通过逐层添加每一层来构建页面。还要编写 CSS 以完美匹配设计像素。

问题:我们对#2 的问题是有很多前期工作来重新定位“所有层”。据我们所知,Framer 会复制所有草图图层,并根据它们的绝对位置以及 x 和 y 坐标来定位它们。由于所有层都是绝对定位的,因此必须遍历每一层并根据它们相对于彼此的定位方式重新应用对齐。这看起来确实很笨拙,据我们所知,Framer 中没有帮助函数来帮助实现这一点。当然,我们可以编写一些通过父树并重新对齐兄弟树的东西,但这感觉太容易出错,而且不符合使用 Framer 构建原型的精神。

我们对 #3 的问题是,这感觉就像是在构建网站,而这不像是原型设计。由于我们无法直接导入像素完美的草图设计,因此需要大量像素推送。我们希望在设计更改时快速更新原型。我们预计设计会经常更改,因为我们正在进行大量用户测试并获得很好的反馈。每次更改设计以“重新设计”我的原型时,这种方法都会让我花费大量时间来搅动。

想法?我们是否遗漏了一些明显的东西?感谢您的阅读并感谢您的时间。

0 投票
1 回答
413 浏览

prototyping - 是否可以在 Framer JS 中使用“画布”绘图功能?

我设法创建了一个画布元素并将其添加到 FramerJS 原型中:

如果你print(ctx)显示一个有效CanvasRenderingContext2D的输出。问题是,原型上什么都没有发生。它保持空白 - 就像fillRect从未调用过该函数一样。

需要确认这是因为缺乏支持还是我做错了什么。

0 投票
1 回答
468 浏览

arrays - 循环访问咖啡脚本中数组中的其他值(framer.js)

嗨,我对 javascript 和 CoffeeScript 还很陌生,所以我目前正在研究原型并同时学习这门语言。

以下代码块几乎完成了我想要它做的事情,除了一件重要的事情。任何帮助将不胜感激

在这里,我有一个循环来创建类别按钮(mainCat),它有 2 个状态,附加了单独的图像数组(categories[] 和 altCat[])。

我已经把这个循环放在一个数组中,所以现在,当我点击一个类别时,我可以使用categ[i]检查它的状态,但这几乎是我的限制所在。

现在这基本上将我的categ []数组中的对象视为多项选择,而我希望它一次只让数组中的一个对象处于“on”状态,并且一旦它处于“on”状态,它需要显示特定的卡片行,同时将其他行隐藏在位于单独层/div 中的另一个数组(称为卡片 [])中。

即类似的东西:

提前致谢!

0 投票
0 回答
273 浏览

jquery - How to call jquery function in coffee script?

There is a jquery function which passes value to the donut chart and updates the chart when function is called.but i want to call the jquery function in coffee script.

how can i do that?

Here's what i have tried.i am getting error Uncaught ReferenceError: get_data1 is not defined

script.js

App.coffee

0 投票
1 回答
3255 浏览

scroll - Action based on scrolling up or down in Framer.js

I'm a designer and very new to Framer.

Id like to be able to hide/show the navigation at the top of screen based on the direction the content below is scrolled. If I start to scroll down the page, the nav hides by moving up. And then the opposite.

Here's what I've been playing around with, but no luck so far.

scroll.on Events.Scroll, -> if scroll.scroll > scroll.scrollY then psd.subHead.animate properties: y: -50

I suppose I want to move up if scroll position is less than the current position and down if it's greater.

Any help is much appreciated!

0 投票
1 回答
209 浏览

instagram - Instagram 在 Framer 中推送固定条上的滚动效果

我是一名设计师和 Framer 菜鸟,试图完成以下任务:

与 Instagram 类似,我想将模块的标题栏固定在滚动容器中,并在您向下滚动时让下一个模块标题栏向上推已固定的标题栏。

我可以在 Pixate 中轻松完成此操作,其中固定条以与滚动内容相同的速率移动并在指定坐标处粘在顶部,然后继续在另一个处滚动,但必须为每个条指定坐标 - 结束一个是下一个的开始。

这些条的高度都相同 - 在 Framer 中是否有更清洁的方法来做到这一点?

提前致谢!

0 投票
1 回答
28 浏览

mockups - 具有分析和视频功能的精益交互式原型平台

我们正在考虑为具有以下规格的应用程序创建交互式原型:

1) 嵌入式视频

2)非常好的分析

3) 多屏

我们正在寻求优化时间,我一直在考虑以下选项,但有以下缺点:

1) Framerjs - 缺点:没有好的或简单的分析

2) Invision - Con:无法嵌入视频(可以选择嵌入指向托管视频的链接,但这会影响对我们的交互模型至关重要的用户体验

2) Xcode Storyboard - 缺点:首先,我们还没有决定将其构建为原生应用程序,并且关注复杂性(时间消耗),特别是测试飞行部署过程。

我很想听听你们对此的看法。