SVG变形动画产生非常奇怪的结果

文章/答案/技术大牛

发布

1回答

javascript、svg、anime.js、svg-morphing

: </h5> <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606"> </svg> 所以我有了这个SVG，我想用anime.js修改它。此外，SVG代码通过Adobe XD导出。我在实

浏览 32提问于2019-06-10得票数 0

2回答

Libgdx Android游戏绘图形状(Bitmap与SVG)

java、android、svg、bitmap、libgdx

我的游戏需要简单的形状(方块，圆圈等)矢量形状(除了圆)会产生我想要的图形。位图图像(TextureAtlas)而不是SVG (ShapeRenderer)的优缺点是什么？我可以动画位图(缩放大小向上和向下)，而不让它们看起来像像素？我可以用位图AtlasRegions (基本上是纹理)色调/改变形状的颜色吗？ SVG<

浏览 3提问于2014-05-24得票数 2

回答已采纳

1回答

ShapeShifter旋转使用坐标0，0，而不是中心

android、animation、svg、vector

我试图使用变形器来创建一个动画，但是无论我在向量中添加一个旋转动画(我已经尝试过许多向量--有些是我创建的向量，还有一些是我在线下载的)--它在0,0坐标上旋转，而不是在图像的中心。复制步骤除非我遗漏了什么东西，否则这个应该旋转图像

浏览 7提问于2020-09-28得票数 2

回答已采纳

1回答

从插图中响应的SVG图表

svg、charts、responsive-design、responsive、adobe-illustrator

我正在设计一个图表的插图，并将在SVG导出它。是否有什么方法可以使其响应，从而使结果充当以下动画？即:圆圈不会变形，线条将保持屏幕缩小后的笔划大小。如果我必须编辑由Illustrator生成的SVG，这是很好的。提前感谢！

浏览 2提问于2020-03-19得票数 0

回答已采纳

1回答

使用Velocity.js变形不起作用

javascript、animation、svg、morphing

callback(xhr.responseXML); }; }; //fetch the document //import it//End o

浏览 10提问于2015-11-26得票数 0

5回答

html5如何改变或动画一个SVG到另一个？

javascript、html、animation、svg、svg-morphing

我做了一些搜索，但我不得不承认，我对SVG有0的经验，我见过许多现代图书馆，如Raphael、PaperJS、KineticJS、EaselJS，但我不知道什么才是适合这里的目标，也许甚至CSS关键帧也能发挥作用我们将非常感谢对这个问题的指点。在浏览器上，我希望使用转换类型svg1将svg2动画化为ease-out。形状，路径，填充*，笔划*，cx，cy，rc，ry 如果在当前的Firefox和Chrome上工作，IE10

浏览 8提问于2013-02-14得票数 17

1回答

如何将SVG组作为一个整体动画化？

javascript、animation、snap.svg

我正在使用Snap.svg制作动画。我现在有两个元素(一个圆圈和一个椭圆)要画。这些元素一起平移，椭圆也会旋转和改变形状。我可以使用Element.animate()函数在Snap.svg中动画每个元素，但它是非常棘手的，以保持它们的和谐转换。那么，我怎样才能把这些元素作为一个整体来动画呢？html片段放在上。PS:属性cx和cy的centroid不更新后，每个动画帧。我希望他们会被改变。谢谢你<

浏览 1提问于2013-12-25得票数 0

回答已采纳

1回答

SVG变形与动画js，奇怪的异常

javascript、html、css、svg、anime.js

带有svg的HTML<style typeM704,270c33.1,0,60,26.9,60,60c0,33.1-25.6,101-58.8,101c-33.1,0-61.2-67.8-61.2-101 C640,296.9,666.9,2

浏览 0提问于2018-07-31得票数 1

回答已采纳

1回答

svg.js是否支持路径变形动画

svg.js、svg-morphing

我已经写了一个使用路径变形创建动画svg的工具。目前，我的工具仅依赖于从字符串构建代码，但我对过渡到svg.js库很感兴趣。我遇到了一个路障，虽然路径变形部分，也就是说，创建像这样的东西它讨论了如何为'd‘属性设置动画，并为其提供to=和from=参数。有人能告诉我这是否受支持吗，我该如何做，如果不受支持，是否可以自

浏览 5提问于2014-03-01得票数 1

1回答

干净地变形SVG路径

svg、raphael

我以为这很简单，只需提供新的途径，让拉斐尔发挥它的魔力，但显然情况并非如此。有没有一种简单的方法可以拉长上升器而不让它首先损坏？请注意，这是一个大得多的标志中的一个移动部件。

浏览 2提问于2012-08-05得票数 7

回答已采纳

2回答

如何使用JavaScript对SVG路径进行动画处理

javascript、animation、svg

有没有办法让下面的svg路径的"d“属性动画化？<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="theEl" d="M0 0, L 0 500, L 600 500,.setAttribute( 'd', 'M0 0, L 0 200, L 200 200,

浏览 0提问于2013-10-23得票数 0

2回答

将变形目标从搅拌器导出到Three.js

three.js、blender

这是我正在努力实现的一个例子：将骨骼动画导出到Three.js很好，但是我不知道如何正确地导出变形目标。出口商有一个关于“morph动画”的复选框，但是启用它会产生一个非常大的文件，其中时间线<

浏览 9提问于2015-01-28得票数 8

回答已采纳

1回答

使用值而不是时间进行SVG形状变形

html、animation、svg、snap.svg

我正在使用Javascript和snap.svg创建一个游戏我以前已经用snap.svg制作了很多界面和UI，并广泛使用了动画功能提供的补间功能。这包括具有相同顶点数的两个形状之间的变形动画。问题是，是否可以使用值而不是时间在两个SVG路径之间进行补间？我想要在两个形状之间变形，输入我自己的插值值，即: morph(PATH_A，PATH_B，0.76)，那么它应该是0.76，从A到B。我觉得这个

浏览 29提问于2020-05-04得票数 0

1回答

WebGL:如何通过向量缩放对象，或产生此结果(包括图像)

javascript、three.js、webgl

我本质上是想弄清楚如何缩放一个对象，而不考虑它的局部旋转。我可以用变形动画产生这个结果，但我希望得到更健壮的效果。 

浏览 0提问于2013-12-23得票数 1

1回答

(单位)操纵的模型在计算机上看起来很平滑，但在移动设备上有网格问题

unity3d

我们的动画模型有网格变形。但是这个问题在计算机上是不存在的。仅在移动平台上可见。Unity quality(quality SS)设置非常高。示例：penguin和monkey 为什么会产生这个问题？谢谢你的帮助

浏览 8提问于2019-03-12得票数 0

回答已采纳

1回答

使用相对目标在悬停时设置SVG动画

javascript、jquery、svg、anime.js

使用Anime.js，我想在悬停时变形一个SVG。我可以让这项工作与一个很好，但我有麻烦弄清楚如何使相同的脚本适用于页面上的多个元素。<a class="link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox

浏览 0提问于2017-09-06得票数 0

1回答

SVG动画标签导致不需要的回放

svg、jquery-animate

我使用ANIMATE标签将一些动画添加到我的SVG路径中。我只是设置了FROM和TO坐标，根本没有循环。它工作得很好，但当我的路径变形到最终形状时，它会立即回到开始的“帧”，而不是停留在最终形状。我没有得到任何错误信息，曲线只是等待，变形，然后回到开始的形状。

浏览 0提问于2019-07-25得票数 0

1回答

在代码中实现After Effects动画

javascript、web、animation、svg

我正在开发一个网页应用程序，它在主页上有一些奇特的动画，但我想在考虑到性能和响应限制的情况下接近它。作为这个动画的输入，我有一个在Adobe After Effects上模拟波浪运动的相当复杂的视频动画。我想将此动画转换为使用SVG和JS动画的代码。我现在拥有的是一个静态的SVG图像，我需要将它动画化，使其看起来像视频。我尝试

浏览 1提问于2020-12-12得票数 2

3回答

SVG合并到动画中

animation、svg

我知道SVG的动画功能，但是有没有一种方法可以轻松地将图片组合成动画，就像在动画GIF中一样？例如，在一个圆圈之间循环，<circle cx="100" cy="50" r="40"stroke=&quo

浏览 1提问于2011-10-04得票数 2

回答已采纳

2回答

如何使用snap.svg设置路径变形的动画

javascript、svg、snap.svg、svg-morphing

我一直在寻找一个关于如何使svg路径变形具有动画效果的好例子。我知道如何使用SMIL完成相当复杂的任务，但snap.svg是一种新的、闪亮的东西，似乎每个人都喜欢它，所以我想看一看。我在任何地方都找不到一个关于如何做n动画路径变形的好例子。希望一位snap.svg大师能给我指明正确的方向？下面是svg图像的链接和代码： <

浏览 5提问于2014-04-10得票数 12

回答已采纳

点击加载更多