问题标签 [morphing]

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 投票
2 回答
393 浏览

css - 我怎样才能让六边形变成三角形(动画)

我有一个关于如何将六边形变成三角形的问题。所以动画从六边形开始,它转换或变形为三角形,然后回到六边形(无限迭代)

我的 CSS 代码

0 投票
1 回答
99 浏览

android - 如何在android中使用贝塞尔曲线一起创建分割和变形动画

刘杰的音乐小工具

我想为我的 android 应用程序添加类似的粘性和变形效果。

0 投票
1 回答
386 浏览

image - 如何无缝地变形两个图像(几何变形)

是否有一种简单的算法可以实时使用,它能够在没有任何用户输入的情况下变形两个图像(所以完全自动,没有要设置的控制点)?

基本上,我不想变形面孔或逼真的场景,图像实际上是完全抽象的,并且是绘图模式与规则形状(如线条)的组合。

提前致谢。

0 投票
0 回答
487 浏览

jquery - Fancybox morphing modal 在发送表单有效后关闭

我使用 Fancybox 变形模式打开我的联系表格。它可以正常工作,但是:当我单击输入发送表单时,即使未填写字段,Fancybox 也会关闭(因此未发送电子邮件)

我希望模式不要关闭,除非我们点击十字。

谢谢您的帮助

这是代码:

我还没有接触到 fancybox-morphing-modal.js 的代码,但这里是:

0 投票
1 回答
675 浏览

javascript - 如何在 three.js 中做一个以液体方式移动的 2D 变形圆?

我有一个网格,它是一个圆形几何形状。我想像这个例子中的动画一样,从两个.js,一个 2D 库: https ://two.js.org/examples/physics.html

现在我看这个例子并将相机放在形状的顶部,但我确信有一种更简单的方法可以满足我的需求:https ://threejs.org/examples/#webgl_gpgpu_water

有谁知道我该怎么做?

0 投票
0 回答
342 浏览

android - AnimatedVectorDrawableCompat 没有启动动画?

我正在尝试使用 AnimatedVectorDrawableCompat 类来实现变形动画。基本上,我正在尝试将动画实现为 Evernote 应用程序 - 注释编辑功能(用户按下编辑按钮和后退按钮变形为勾选按钮)。

我在 .JAVA 文件中完成了以下操作:

下面是合并 .XML 到 Morph Back 按钮路径以勾选按钮:

下面的 .XML 文件是在按钮路径上运行 Animator :

我使用VectAlign来对齐两个图标路径。

最后,这就是后退按钮矢量的样子:

我花了大约两天的时间来弄清楚变形概念及其实现,但仍然没有运气。我在这里失踪或做错了什么..

谢谢。

0 投票
0 回答
287 浏览

javascript - 通过 ShaderMaterial 访问变形目标

我在threejs中使用这个例子并加载了一个带有变形目标的人体对象。

但是我在通过 Web 应用程序使用ShaderMaterial. 尽管ShaderMaterial拥有morphTarget财产,morphTarget: true;但无法正常工作。

这是我的代码。

谁能告诉我如何解决这个问题,或者让我知道在使用时是否有其他方法可以访问 morphTargets ShaderMaterial

0 投票
1 回答
731 浏览

javascript - 使用javascript获取变形svg的当前坐标

我正在尝试采用响应用户鼠标移动而变形的 svg 路径,并在用户单击按钮时将其扩展为稳定的矩形。当前项目在这里(请注意,这是取自一个 codrops 演示,有一些改动):https ://codepen.io/redheadedmandy/pen/RjBKeQ

假设有一种方法可以调用 SVG 的当前坐标,我想我会在单击按钮时执行以下操作:

问题是我不知道形状路径的坐标在任何给定时间在哪里——据我所知,为了使引导变形为矩形,anime.js 需要初始坐标小路。(我可能完全错了。)如果有人对如何做到这一点有建议,我将不胜感激!(或者,如果您注意到我对anime.js 的理解完全有缺陷,那也会有所帮助。)

0 投票
1 回答
142 浏览

matlab - 计算参数变形球体的顶点法线

我想使用以下等式变形球体:

R=1+k*(cos(4*elev)+sin(4*az)),

球坐标elevaz被转移为gl_Vertex。问题是计算这种变形的法线。我可以计算它们,只是移动一点azelev获得 2 个更多“虚拟”顶点并使用带有交叉产品的标准方法,但它看起来相当丑陋和昂贵的方法。

他们是否有任何方法来计算这种变形的法线参数?

更新:

感谢@meowgoesthedog,但我仍然有问题。我对这个公式的实现(下面的代码)不起作用:

我是否正确,应该是:

cos(theta)*(k*(cos(4*theta)+sin(4*phi))+1)还是cos(theta*(k*(cos(4*theta)+sin(4*phi))+1))

法线是在笛卡尔坐标系中计算的吗?

我在 Matlab 中的代码:

在红色下方的数字上 - 正确的法线,我计算的洋红色。

在此处输入图像描述

在此处输入图像描述

0 投票
1 回答
757 浏览

ios - 如何在 iOS 中正确变形文本?

我拼命想把 asmallLabel变成 a bigLabel。通过morphing,我的意思是从一个标签转换以下属性以匹配另一个标签的相应属性,并具有平滑的动画:

  • 字体大小
  • 字体粗细
  • 框架(即边界和位置)

所需的效果应该类似于使用大标题时应用于导航控制器标题标签的动画:

iOS 大标题动画

现在我知道去年的 WWDC 会议Advanced Animations with UIKit在那里他们展示了如何做到这一点。但是,这种技术非常有限,因为它基本上只是对标签的框架应用变换,因此它只有在除字体大小之外的所有属性都相同的情况下才有效。

当一个标签有regular字体粗细而另一个标签有粗细时,该技术已经失败bold了——这些属性在应用变换时不会改变。因此,我决定深入挖掘并使用 Core Animation 进行变形。

首先,我创建了一个新的文本图层,我将其设置为与以下内容在视觉上相同smallLabel

然后,我创建必要的动画并将它们添加到该层:

这是我得到的:

动画

如您所见,它并没有按预期工作。这个动画有两个问题:

  1. 字体粗细不会动画,但会在动画过程中突然切换。

  2. 当(青色)文本图层的框架按预期移动并增大大小时,文本本身以某种方式向图层的左下角移动并从右侧被切断。

我的问题是:

1️⃣为什么会发生这种情况(尤其是2.)?

2️⃣如何实现大标题变形行为——包括字体粗细动画——如上所示?