animation 相关问题

我正在尝试制作一个圆形动画，我目前有这个：http://jsfiddle.net/gf327jxu/1/ 我正在尝试制作圆形动画，我目前有这个：http://jsfiddle.net/gf327jxu/1/ <svg width="100" height="100" class="circle"> <circle cx="50" cy="50" r="40" /> </svg> CSS： .circle{ stroke:green; stroke-width:10; fill:none; } 我希望它像一个圆形进度一样动画，如下所示：http://jsfiddle.net/andsens/mLA7X/但是在SVG中，我需要它是顺时针的，我怎样才能实现这一点，这甚至是可能吗？这是一个小提琴示例。注意：我使用了r = 57，因为周长是358.1，接近于360 degrees。对于不同的r值，需要计算stroke-dasharray 非常感谢@Robert Longson、@Erik Dahlström 和@Phrogz 多年来提供的SO 解决方案。这个小提琴只是他们的调整之一。 (function() { // math trick 2*pi*57 = 358, must be less than 360 degree var circle = document.getElementById('green-halo'); var myTimer = document.getElementById('myTimer'); var interval = 30; var angle = 0; var angle_increment = 6; window.timer = window.setInterval(function() { circle.setAttribute("stroke-dasharray", angle + ", 20000"); myTimer.innerHTML = parseInt(angle / 360 * 100) + '%'; if (angle >= 360) { window.clearInterval(window.timer); } angle += angle_increment; }.bind(this), interval); })() <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;"> <circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" /> <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text> </svg> 这是一个纯 svg 解决方案：codepen <svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve"> <circle fill="none" stroke="#000" stroke-width="4" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" > <animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate> </circle> </svg> const countdownNumberEl = document.getElementById('countdown-number'); const circle = document.getElementById('circle'); let countdown = 25; const radius = Number(circle.getAttribute('r')); const circumference = 2 * radius * Math.PI; circle.style.transition = `all ${countdown}s linear` countdownNumberEl.innerHTML = countdown; function startTimer() { const interval = setInterval(() => { countdown = countdown - 1; countdownNumberEl.innerHTML = countdown; if (countdown === 0) { clearInterval(interval); } }, 1000); circle.setAttribute('stroke-dasharray', circumference); circle.setAttribute('stroke-dashoffset', circumference); } setTimeout(() => startTimer(), 0) body { background: #333; font-family: sans-serif; } #countdown { display: flex; justify-content: center; align-items: center; position: relative; margin: 60px auto; height: 80px; width: 80px; } #countdown-number { color: darkgray; } svg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; transform: rotateY(-180deg) rotateZ(-90deg); } <div id="countdown"> <p id="countdown-number"></p> <svg> <circle r="24" cx="40" cy="40 "stroke-linecap="round" stroke-width="2" fill="none" stroke="black"></circle> </svg> <svg> <circle id="circle" r="24" cx="40" cy="40" stroke-linecap="round" stroke-width="2" fill="none" stroke="darkgray"></circle> </svg> </div> <!DOCTYPE html> <html> <head> <title>svg circle animation</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #XMLID_4_{ stroke-dasharray: 1000; stroke-dashoffset: 2000; fill: #FFFFFF; stroke: #000000; } svg:hover #XMLID_4_{ -webkit-animation: draw 3s forwards; animation: draw 3s; } @keyframes draw{ from{ stroke-dashoffset: 1000; fill:#efefef; stroke:#ff5535; } to{ stroke-dashoffset: 0; } } @-webkit-keyframes draw{ from{ stroke:#ff5535; stroke-dashoffset: 1000; } to{ stroke-dashoffset: 0; } } </style> </head> <body> <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <g> <circle id="XMLID_4_" stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/> </g> </svg> </body> </html> 我知道这篇文章已经过时了，也许我的文章不再达到第一个目的，但我冒昧地对朋友 Alvin K. 的代码进行了更改，以利用更新的 EC 并允许控制完成时间. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;"> <circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0, 358.1415625092364" transform="rotate(-90,100,100)" /> <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text> </svg> (() => { const circle = document.getElementById('green-halo'); const myTimer = document.getElementById('myTimer'); const radius = 57; const circumferenceLength = 2 * Math.PI * radius; // console.log(circumferenceLength) /** * * pixel by pixel */ const growthFactor = 1; let maximumTime = 2000; let archLength = 0; let timeRatio = maximumTime / circumferenceLength; let archLengthRatio; let percent; const interval = setInterval( () => { circle.setAttribute('stroke-dasharray', `${archLength}, ${circumferenceLength}`); archLengthRatio = archLength / circumferenceLength; percent = Math.trunc(archLengthRatio * 100); myTimer.innerHTML = `${percent}%`; if (percent === 100) { clearInterval(interval); } archLength += growthFactor; }, timeRatio ); })()

html css animation svg

回答 5 投票 0

如何使用自定义 CSS 变量插值节点颜色？

有一个节点，我需要动态改变它的颜色。我也想使用 CSS 变量来做到这一点。问题是 JavaFX 似乎只在节点属性（填充）为

java animation javafx

回答 1 投票 0

jQuery 动画背景/生成具有随机位置和大小的 div

我用 jQuery 编写了一段代码，可以生成六个正方形（div）。每一个都有随机的大小和位置。我为每个应用了不同的 css 类，以便执行稍微不同的操作...

javascript jquery animation background

回答 1 投票 0

制作 3D 星球环境

我有一个行星，我给了一个线性梯度，我试图让岩石围绕行星的周边，同时也许行星上有一些可见的天气看起来像台风徘徊

html css animation

回答 1 投票 0

这个动画 PNG 图像是如何知道当前时间和日期的？

我收到了一封来自一家公司的电子邮件，其中包含以下确切的倒计时：我查看了电子邮件的 HTML 源代码，它只是一个图像文件，如下所示：我收到了一封来自一家公司的电子邮件，其中包含以下确切的倒计时：我查看了邮件的HTML源代码，它只是一个图像文件，如下： <img src="https://mi.littlewoods.com/p/rp/f70f250cd4f777ac.png"> 据我之前所知，只有 GIF 文件可以动画化，而不是 PNG 文件 - 但我通过在线搜索看到这显然被称为 APNG 文件。我知道像 gd 这样的库，您可以通过在 php 等中编写代码来即时制作图像，但是当您打开该图像的链接时，根据使用 GD + 的经验，页面不会重新加载不久前的 PHP，一旦标头发送到浏览器，您就无法再次写入图像。即使刷新页面，动画也会在上面倒计时图像中的同一点恢复。他们使用了什么技术来创建这个倒计时？ / 如何制作倒计时图像并通过电子邮件发送？当我下载它时，我得到的是 GIF，而不是 PNG（尽管有扩展名）。它有 30 秒（30 帧）倒计时，然后循环。 GIF 不知道当前时间。该网站更新一次 GIF，我猜每三十秒更新一次。

datetime animation timer png countdown

回答 1 投票 0

在颤振中使用动画打字机动画文本套件自动滚动

我正在寻找一种在 Flutter 中实现这一点的方法。当动画文本工具包打字机输入如下内容时自动滚动我尝试使用它作为列表中滚动控制器的函数...

flutter animation flutter-listview scrollcontroller

回答 2 投票 0

滚动移动菜单项上的导航栏动画文本徽标

我有一个独特的问题，我希望有人可以帮助解决。这是正在发生的事情的 .gif。正如您所看到的，当徽标动画时，它会左右移动菜单项，我有 tr...

animation text menu tailwind-css navbar

回答 1 投票 0

在 SwiftUI 中将匹配的几何效果与幻灯片过渡同步

我必须在入门屏幕的不同卡片（步骤）之间实现幻灯片动画。每张卡片都有自己的背景视图（在我的示例中为圆圈），应该在所有卡片之间同步