逐渐设置SVG动画

文章/答案/技术大牛

发布

1回答

html、css、svg

我需要在悬停包含两个svg或img的div时设置动画，不要紧。当我在div中悬停时，如何触发，例如，两个img将会移动。也许使用Javascript，但我似乎可以在悬停时瞄准img。只有鼠标悬停吗？<div class="circle"><img id="line-2" src="line.<em

浏览 4提问于2021-02-05得票数 0

1回答

画布与SVG动画(effects[filters]和性能)

performance、animation、canvas、svg、effects

我正在开发一个应用程序，应该可以在web浏览器(IE支持完全可选)和iPhones上同样流畅地运行，并且已经测试了几天的各种库，包括: jQuery SVG，CAKE (画布动画工具包实验)，Burst输入是可选的-无论是从矢量渲染的SVG还是PNG，动画库的唯一两个要求是能够为图像设置动画(旋转)，并逐渐应用模糊滤镜或“轨迹”-like效果。我应该选择SVG还是Canvas，性能--以及前面提到的效果？以前该项目是在闪存，但考虑到趋势和缺乏iPho

浏览 3提问于2010-10-01得票数 3

1回答

带有scg路径和raphaeljs的三维翻转

html、css、svg、raphael、transformation

据我所知，像rotateY这样的东西在svg中还不可能实现，对吗？我的问题是:还有其他方法来达到这个效果吗？也许使用CSS转换？(这在IE <9中可能不起作用)或者用某种3x3变换矩阵来伪装效果？

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

回答已采纳

2回答

如何使用reactjs逐步在入口SVG图像上动画？

css、reactjs、animation、svg、flexbox

我对此反应很新，谢谢大家

浏览 1提问于2019-02-21得票数 0

1回答

SVG笔画动画增加长度

html、animation、svg、path、stroke

我一直在网上搜索(失败)关于如何实现一个特定的SVG路径动画。我重复使用了克里斯·科伊尔( Coyier )从他的CSS技巧文章中获得的一个代码页。然后，逐渐降低dashOffset，直到出现整个SVG卒中为止。到目前为止，没有问题，这其实是一个相当普遍的效果。但我想补充一点:笔划的“起点”也必须逐渐抵消，才能达到笔触的效果。也许为了更好的理解，您可以用ID Layer_3编辑SVG的笔画颜色，使之不同于白色和黑色，以可视化动画是如何触发的。第二个SVG</em

浏览 4提问于2017-09-27得票数 1

回答已采纳

1回答

d3:流畅地画了一条手绘线？

javascript、animation、d3.js

请看的工作，但简洁明了的版本，我想:一个d3动画模拟，在实时，一条线的路径正在绘制的人。 var svg = d3.select("body").append("svg")map(function(x) {}); var lineFunction = d3.svg</

浏览 1提问于2013-12-20得票数 4

回答已采纳

1回答

意外动画行为

java、android

我的处境： <Bottom Linear Layout> //background color is red我用两种方法来动画上面的线性布局：官方的蜂窝前TranslateAnimation方法，与FillAfter设置为真.基于ObjectA

浏览 0提问于2013-03-06得票数 0

2回答

动画后将SVG属性保持在最后值

animation、svg

当一个SVG被加载时，我试图给一个圆圈做动画。它应： <svg width="36px<animate attributeName="r" from="1" to="17" dur="1s" begin="1s"></animate>

浏览 4提问于2013-10-11得票数 11

回答已采纳

1回答

SVG加载动画-我能结合<use>and <def>和<animate>吗？

svg、svg-animate

我有一个基于SVG的加载动画，又名"“，但我想知道我是否可以通过使用基本动画(逐渐褪色的属性)并在我的<use>标记中引用它来更有效地编写代码呢？在动画标记中，只--每次更改begin属性，其余的都是相同的。对SVG知之甚少，我意识到有很多方法可以实现相同的结果。谢谢。

浏览 2提问于2013-08-01得票数 0

回答已采纳

1回答

如何延迟Bodymovin动画

javascript、bodymovin

好的，所以我刚刚开始使用bodymovin，并且想知道是否有一种方法可以让我延迟动画。var animation = bodymovin.loadAnimation({renderer: 'svg

浏览 1提问于2018-09-23得票数 0

回答已采纳

3回答

如何获得正确的SVG代码

javascript、css、svg

我一直在尝试创建一些SVG绘图动画，比如：然而，我遇到的问题是如何获得适当的SVG代码。假设我有一个png绘图，我想将其转换为SVG。当我使用Inkscape时，我得到了这样的东西，它是无用的。如何在这些中获得正确的SVG代码？

浏览 6提问于2015-04-24得票数 1

回答已采纳

1回答

跨浏览器梯度掩码

css、animation、svg、gradient

我有一个CSS3动画，背景是垂直滚动。我希望背景的顶部逐渐淡出。也许用SVG面罩？或者甚至是设置这个动画的JavaScript解决方案？height: 500px;div:before { background: url(https://dl.dropboxusercontent.com/u/3454522/shapes1.svg

浏览 2提问于2016-05-13得票数 1

回答已采纳

2回答

使用animationFrame的抖动动画

javascript、requestanimationframe

我根据Windows8加载动画制作了一个简单的微调控件，但我还没能弄清楚为什么每个点看起来都会有轻微的抖动。我已经尝试了各种方法来归一化这些值，但没有找到任何可以使其平滑的方法。我做错了什么？

浏览 0提问于2012-11-10得票数 1

1回答

如何制作一个闪亮的按钮动画？

javascript、css、css-animations

我刚找到了一个，上面有一个很酷的button和安卓的火花动画。然而，我想要我的网站，所以我开始设计它自己。在新恒星的四面八方，还有另一个过于分散的小

浏览 0提问于2019-02-08得票数 11

回答已采纳

1回答

如何从SVG中动画虚线(使用HTML、CSS和/或JavaScript)

javascript、css、svg

我正在做一个设计，需要一堆不同的虚线动画。我需要做好这段代码所做的工作：<svg width="1400px" height="892px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3如果我然后将类path添加到<path>-object中，那么

浏览 0提问于2019-08-20得票数 0

4回答

fadeIn对fadeOut对fadeTo

jquery、animation

在fadeIn和fadeOut与fadeTo之间的区别是什么？

浏览 6提问于2010-07-22得票数 7

回答已采纳

3回答

从contourDensity过渡等高线()

javascript、d3.js

我知道使用单行可以做到这一点，但是如何将其应用于contourDensity()创建的路径呢var height = parseInt( svg.attr( 'height' ) );

浏览 4提问于2017-04-23得票数 1

1回答

SVG圆起点

javascript、css、svg、rotation、geometry

我如何改变svg圆的起点，使它从0点开始逐渐动画化？默认的循环svg从3点钟开始。我现在的圆圈(悬停看动画)：#timeline{ width:500px; top:50%; margin-top;} stroke-dashoffset:0;<div id="timeline">

浏览 0提问于2015-03-16得票数 12

回答已采纳

1回答

为了获得更平滑的动画UNITY3D，GetAxis上的值不会跳跃

animation、unity3d、animator

按住D->和Input.GetAxis(“水平”)将导致该值从0逐渐变为1。释放D->将逐渐使其回到0。我正在使用这个值来控制我的动画，它使它们捕捉所有丑陋的。有没有一种方法可以让值像我想要的那样逐渐下降，而不需要太多的代码，或者我是否遗漏了动画师的一些设置？

浏览 5提问于2016-08-29得票数 0

回答已采纳

1回答

带有CSS的SVG动画。将环绕类的SVG元素移动到特定的X和Y坐标

css、animation、svg、keyframe

当动画结束时，元素需要停留在特定的X和Y坐标的末端位置。不重新开始或返回开始。HTML <svg> <g> <rect class="alkali" x="180.7&quo

浏览 4提问于2021-02-07得票数 0

点击加载更多