问题标签 [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 回答
1140 浏览

animation - AnimationAction 如何在最后一帧停止而不在three.js中循环?

我想在使用变形目标创建的最后一帧处停止 AnimationAction。

https://threejs.org/docs/#api/en/animation/AnimationAction

我试过animationAction.clampWhenFinished = true;了,但这似乎不起作用。

我查看了较旧的stackoverflow 问题并在论坛中进行了搜索,但解决方案无效。

有没有办法我可以做类似的事情:(这不起作用,它会循环回第一个 morphTarget)

这是我的小提琴: https ://jsfiddle.net/foreyez/uy8abk6v/

0 投票
1 回答
1509 浏览

three.js - Three.js:如何在鼠标悬停时将立方体变形为球体?

我想知道如何使几何体变形为由鼠标进出控制的不同几何体。例如,当鼠标悬停在立方体上时,它会变成一个球体,但当鼠标离开对象时,它又会变回一个立方体。

与此处球化此立方体时类似的动画:https ://threejs.org/examples/#webgl_buffergeometry_morphtargets

0 投票
0 回答
149 浏览

python - 在 Ubuntu 18.04 上安装 facemorpher 失败

我有一个Ubuntu 18.04并在以下 Github 存储库https://github.com/alyssaq/face_morpher中执行了requirements.txt中的包。

使用以下命令安装 facemorpher 时,出现以下pip3 install facemorpher错误。我没有找到 opencv2 文件夹

错误日志:

0 投票
0 回答
91 浏览

vue.js - 单击事件上的 SVG 动画在带有anime.js的Vue中不起作用

我正在尝试使用基于点击事件和路线更改的anime.js 实现svg 动画。第一个形状属于“home”路线,第二个属于“about”路线。动画是 Logo 组件中的一个方法,通过点击父组件中的路由链接调用。如果我使用 v-show 有条件地渲染 svg 路径,则动画工作正常,除了第一次加载和刷新页面后。奇怪的是,函数实际上正在执行,它也可以在 devtools 中观察到。如果我使用 v-if 动画在第一次加载和重新加载后也可以正常工作,但它会出现故障。

徽标.vue:

应用程序.vue:

我最初尝试用 Nuxt 实现它,结果是一样的,可以在这里找到该版本:

https://github.com/neblancsi/svg-morphing

https://svg-morphing.netlify.app/

0 投票
1 回答
46 浏览

spyder - 在 vedo 中使用变形的薄板扭曲体积网格

我正在尝试使用 vedo 中的薄板变形功能来扭曲体积网格。但我一直没有成功。我什至尝试使用表面网格进行调试,但这也不起作用。以下是 vedo 提供的原始示例。

以下是我进行的一些试验改编。这些都尝试用于表面和体积网格。

试验 1 using decimated mesh

试验 2 using the full mesh

主要是内核在 warp 命令处冻结。在某些情况下,我还让内核死机并重新启动。我怀疑我在定义源和目标时做错了,但我不确定。
I'm using Python 3.7.3 64-bit in Spyder 4.1.5 (Windows 10).

0 投票
1 回答
64 浏览

svg - 将 SVG 线从直线变形为展开

所以我在这里想要实现的是 2 个 SVG 形状之间的平滑变形。在此处输入图像描述

结束状态和开始状态

正如您从这两个图像中看到的那样,这些是它应该看起来的开始和结束状态。当我尝试对其进行变形时,问题就来了。

在此处输入图像描述

虽然它正在变形,但它会不断关闭形状,如果我查看 devtools,它总是会在标签中我的属性Z末尾附加指示符。dpath

我使用了几个库,截至目前我正在使用 D3 和 Flubber。在此之前 KUTE 和animejs。所有的结果都是一样的。

我与我的设计师来回交流,他们为我提供了几种不同的 svg 供我试用,我还尝试了 svg 软件并手工绘制,结果完全相同。

仅供参考,这将是我的 svg:

我对 D3 的逻辑(现在很混乱):

所以我基本上在那里定义了开始和结束路径,并希望中间的步骤将由 D3/flubber 完成。我注意到这些形状之间有相同数量的节点(至少 INKSCAPE 和 Illustrator 告诉我)。我真的不知道为什么它总是在变形时关闭形状,而不是仅仅“拖动”节点。这甚至可能吗,还是我在这里尝试无法实现的事情并且会有更好的解决方案?

干杯,丹

0 投票
0 回答
35 浏览

android - 使用动画从上到左动画复合 Drawable

我正在创建一个动画,我必须将顶部 Compound Drawable 变形(转换)为 Left Compound Drawable。但我想以过渡或动画的方式来做,不是立即

在此处输入图像描述

单击上图时,它会向上移动一点并使用动画变形为下图。

在此处输入图像描述

我创建了一个带有顶部 Compound Drawable 的 textView 并希望将其缩小并设置左侧 Compound drawable 与动画(过渡)

源代码

毫升

0 投票
0 回答
31 浏览

android - 由于变形动画,主要活动进入背景

我有多个活动包括多个片段。我尝试显示从第一个片段中的 RecyclerView 项目到第二个片段中的 ImageView 的变形动画。第一个片段进入背景(它变得有点暗),当我从第二个片段返回时,当视图在 RecyclerView 中的位置布置时,第一个片段进入前景(它变得更亮)。它看起来像在整个屏幕上闪烁。

在第一个活动中:

在第一个片段中:

在第二个活动中:

在第二个片段中:

源代码可以在这里找到:https ://github.com/alirezaeiii/TMDb-Paging

你知道我怎样才能避免第一个活动中的第一个片段进入后台吗?

0 投票
1 回答
32 浏览

java - 处理中的变形图像效果

我想在处理中构建一种图像变形工具。类似于您在此链接中看到的内容:

https://giphy.com/gifs/painting-morph-oil-c8ygOpL64UDuw

我实现这一目标的第一步是构建一个二维像素网格。像素充满颜色。填充颜​​色是通过使用 get(); 从图像 (PImage img1;) 中读取颜色来创建的;功能。这就是我用像素重新创建图像的方式。在第二步中,我想我会使用 lerp(); 函数为各个像素提供第二张图像的颜色 (PImage img2;) - 我认为这会产生所需的变形效果。但是我错了!整个事情都有效 - 但效果只是在两个图像之间发生淡入。并且没有变形。在这种变形效果下,像素究竟会发生什么?我怎样才能在处理中重新创建它?