【发布时间】:2019-02-20 21:57:13
【问题描述】:
我最近深入研究了 Framer X、Javascript 和 React,并认为在屏幕之间的自定义转换(这只是 Framer 中的“框架”)方面缺少一些非常重要的东西。
我想要实现的类似于 MengTo 在他的教程中所做的(参见 https://designcode.io/framer-x-animations-overrides),即在两个屏幕之间创建自定义转换,如下所示: Screen A, Screen B
问题:与教程中不同,我不希望屏幕 B 的元素也位于屏幕 A 的层次结构中以达到预期的效果。为什么?因为我们的设计师总是会创建一个单独的框架来可视化屏幕 B。
总体目标: 当事件发生时(例如单击按钮),能够通过 Framer Inspector 告诉屏幕 A 和屏幕 B 上的每个元素如何设置动画(即随着时间推移逐渐更改其属性)。
我的方法:
- 创建移动/调整大小/淡入等元素的通用代码覆盖。为了使这些可在各种项目中重复使用并防止设计人员编写代码,我需要在 Inspector 中调整参数(例如目标位置、目标大小等)-> 问题 1:是是否可以像
PropertyControls对代码组件那样向 Inspector 公开 Override 的参数? - 将多个代码覆盖分配给同一元素,并根据事件触发不同的代码覆盖,例如为屏幕的“退出”和“进入”转换触发了不同的代码覆盖 -> 问题 2:是否可以为一个元素分配多个代码覆盖并在一个元素上触发每个不同的事件?
- 很高兴:创建一个使用
children属性的自定义代码组件并将其放置在屏幕A 上,这样我就可以将它连接到画布上屏幕B 上的相应组件。然后从屏幕 B 上的元素中获取两个组件共有的所有属性,并将它们用作动画的目标值。这样设计者就不必手动输入所有目标值。 -> 问题 3:我可以通过代码覆盖访问自定义组件中的这些目标值吗?
问题4:如果甚至可以达到预期的效果,这种做法是否有意义?还是 Framer 商店中现有的 Framer X 库已经可以满足我的需求?
我只需要指向正确方向的指针,在此先感谢!
【问题讨论】:
标签: javascript reactjs transition framerjs