Framer X - 屏幕/帧之间的自定义过渡

问题描述 投票:1回答:1

我最近潜入了Framer X,Javascript和React,并认为关于屏幕之间的自定义转换(在Framer中只是“框架”)缺少一些非常重要的东西。

我想要实现的是类似于MengTo在他的教程中所做的事情(参见https://designcode.io/framer-x-animations-overrides),即在两个屏幕之间创建自定义过渡,如下所示:Screen AScreen B

问题:与教程不同,我不希望屏幕B的元素也在屏幕A的层次结构中以实现所需的效果。为什么?因为我们的设计师总是会创建一个单独的框架来显示屏幕B.

总体目标:当事件发生时(例如点击一个按钮),能够告诉屏幕A和屏幕B上的每个元素如何通过Framer Inspector动画(即逐渐改变其属性)。

我的方法:

  1. 创建移动/调整大小/淡入等元素的通用代码覆盖。为了使这些可以在各种项目中重复使用并防止设计人员必须编码我需要在Inspector中调整参数(例如目标位置,目标大小等) - >问题1:是否可以公开Override的参数像PropertyControls那样为Inspector做代码组件吗?
  2. 将多个代码覆盖分配给同一个元素,并根据事件触发不同的代码覆盖,例如,为“退出”和屏幕的“条目”转换触发了不同的代码覆盖 - >问题2:是否可以为元素分配多个代码覆盖并在不同的事件上触发每个代码覆盖?
  3. 很高兴:创建一个使用children属性的自定义代码组件并将其放在屏幕A上,这样我就可以将它连接到Canvas屏幕B上的相应组件。然后从屏幕B上的元素获取两个组件共有的所有属性,并将它们用作动画的目标值。这样设计人员就不必手动输入所有目标值。 - >问题3:我可以从代码覆盖中访问自定义组件中的这些目标值。

问题4:如果甚至可以达到预期的效果,这种方法是否有意义?或者,Framer商店中现有的Framer X库已经可以满足我的需求了吗?

我只需要指向正确的方向,提前感谢!

javascript reactjs transition framerjs
1个回答
0
投票

所以我在他们的Slack空间得到了Framer社区的一些反馈。目前使用Framer X18无法达到预期效果。

但是我从Framer团队的某个人那里得到了以下回复:

这是我们产品团队中提出的问题,我们很快就会介绍。

我将不得不看看这种改进是否会解决所有提到的问题/问题。

© www.soinside.com 2019 - 2024. All rights reserved.