问题标签 [popmotion]

我正在尝试将此Popmotion示例转换为GreenSock.

https://codepen.io/popmotion/pen/xVeWmm

作为一个完全的菜鸟GreenSock，这很容易做到吗？GreenSock有演员和模拟器吗？

I'm trying to use a tween as a counter that only returns 0-4 over a duration. I only want it to return a number of the same once. I'm using https://popmotion.io/. Here is what I have so far.

The above outputs the following:

What I'm after is so it only outputs a unique number from 0 - 4 Example:

They have a filter method that it says.

filter((v: any) => boolean): Returns a new action that filters out values when the provided function returns false.

I'm not sure how I would use the filter to only return the same number once ?

我已经开始使用 react-pose 并且有一个关于 React 中大多数动画设置的问题。

1. 似乎您无法在第一次渲染时触发组件上的动画？

这就是我问上述问题的原因。下面是一个尝试使用无状态组件的 react-pose 示例。我希望当我像这样将它添加到我的 main.js 渲染中时。它会

1. 首先挂载 FadeDiv 组件，并将 initialPose 设置为不透明度为 0

2. 然后在设置为不透明度的渲染上设置pose="enter"：1。但事实并非如此。现在，如果是这样的话，那就太好了。

   /li>

如果我错了，请纠正我，但这是我相信正在发生的事情。当 React 安装无状态或任何组件时，它不知道 initialPose 直到它在这个阶段完全安装它为时已晚，它只是将组件的不透明度设置为pose="enter" 这就是为什么我没有看到从 0 开始的动画- 1 因为它安装了不透明度设置为“进入”，即不透明度 1。所以它只是出现而没有任何动画。

好的，如果上面的内容是正确的，那么我在下面添加了这个设置，这是添加状态的额外样板，但我想对于 React 是必要的。

现在一切正常，但我必须强制第二次渲染在 isEnter 之间切换，这在第一次渲染（挂载组件）时为假，然后在组件挂载钩子时设置为真。

对不起，冗长的解释，但对我来说完全理解很重要。这种额外的样板是拥有简单 div 动画的唯一解决方案吗？首先使用 componentDidMount 的生命周期钩子包装组件，以使用状态触发第二次渲染。我认为她发生的事情让我和其他人可能理解的崩溃是：

1. 初始渲染姿势={this.state.isEnter ? 'enter' : 'before'} 设置为 "before" 这意味着 FadeDiv 组件的不透明度为 0
2. 然后第二个渲染被状态更改触发以设置pose="enter"，它将不透明度设置为1并将组件从0 - 1设置为动画。

这是一个正确的假设吗？

考虑到这一点，每当您需要一个简单的动画时，人们就可以通过额外的样板来真正绕过 React 中的动画。是的，我知道您可以使用 css，但您仍然需要等待组件安装以将第一个样式设置为 opacity=0，然后重新渲染以设置 opacity=1。但这里的问题是关于 Popmotion 的 React-pose，我猜使用 DOM 元素动画时 React 本身及其缺陷。

我想重新创建位于此处的刻度线/复选标记的姿势 svg 线动画，但作为带有react-pose. 我不确定如何做到这一点？在线使用动画 svg 路径的完整示例并不多，并且希望堆栈溢出的人足够新react-pose来帮助我重新创建它。

我试图创建一个反应组件，但无法让它工作。这是我尝试制作的反应组件。感谢您的任何帮助。

这是我想创建的完整动画

我真的很喜欢在 react native 上使用姿势，因为它真的很容易。但是我遇到了一些小问题。我的问题是；有没有办法在 react native 上使用姿势来制作具有宽度、高度或填充的动画？我用position、opacity或transform制作了一些动画，但我无法用宽度来计算它。

我在下面写了一个小示例代码以更好地理解。

示例代码；

当我尝试这个时，它给出了一个错误。

Error: Style property 'width' is not supported by native animated module.

包版本：

• 反应原生：0.55.4
• 世博会：30.0.1
• 反应：16.3.1
• 反应原生姿势：0.8.1

I'm trying to implement a enter/exit transition for my div,

But I want my div can enter from left, and exit to right,

after playing with the example here, I still can not figure it out.

https://popmotion.io/pose/learn/react-exit-enter-transitions/

How do I do it ?

我有一个使用 React Pose ( https://popmotion.io/pose/ )的带有动画的 React 应用程序。

这很好用，但是当我为组件编写集成测试（使用 react-testing-library）时，测试失败。

我在运行测试时遇到的错误是：

这看起来是由这里的正则表达式引起的：https ://github.com/Popmotion/popmotion/blob/1b181ee1673003cb7239a2696623da3f494217be/packages/popmotion-pose/src/dom/unit-conversion.ts#L28

transform变量包含translateX(-100%) translateZ(0)，因此该检查返回null。

我认为我遇到的问题是由于没有实现某些东西jsdom（类似于这个问题：https ://github.com/Popmotion/popmotion/issues/402 ），但我不确定缺少什么或为什么上面的方法 ( GetActualMeasurementInPixels) 被调用，因为它看起来永远不会工作。

我需要将指针 X 位置存储在一个变量中。根据 popmotion 文档（请参阅此处的链接），以下方法可以解决问题：

实际上，通过使用上面的代码，控制台中会显示x的确切值，但是我在代码中使用该值时遇到了麻烦。

我已经尝试过：

但是console.log(X)返回{stop: ƒ}

我对箭头功能不是很熟悉，我很感激任何帮助，谢谢

我正在使用Popmotion、Pose和flubberpaths在 React Route 更改之间对 SVG 的两个进行变形和过渡。

这完美地工作

路径定义为

在路线更改时，效果是

但是，我怎么能在所有其他时间之间循环paths[id].path和变形。paths[id].pathAlt例如，我试图通过不断移动的codrops 来实现此处显示的结果。svg

我使用popmotion制作了下面的旋转拨号。

每次放手并重新单击时，如何让表盘从同一位置开始？

它现在的工作方式是在单击/触摸时移动到光标/手指位置。我希望它从它当前所在的确切位置开始，并从那里计算角度。

这可能与三角学有关，但我无法弄清楚。