Tag: animation

如何使用Snap.svg为加载的SVG内部的路径变形设置动画？: 我知道你可以用snap.svg动画路径morhs（如何使用snap.svg为路径变形设置动画）是否可以“加载”路径然后设置路径变形动画？或者你必须定义Snap.svg内部的路径？ (function($) { ‘use strict’; // grab the empty svg element in the html var s = Snap(800,600); // load the svg and grab the #arm and its inner elemmnts Snap.load(‘body.svg’, function(f) { var arm = f.select(‘#arm’), forearm = f.select(‘#forearm’), bicep = f.select(‘#bicep’); s.append(arm); s.append(forearm); s.append(bicep); anim1(); }); // animate rotate […]

SVG Progressbar动画与开始圈: 是否可以将线圈与线路径一起动画？我试过跟随code.can我合并两个线路径和圆圈并应用相同的转换 $(document).ready(function(){ var svgPath = document.getElementById(‘heart’); var path = new ProgressBar.Path(svgPath, { duration: 3000 }); path.animate(-1, { easing: ‘easeOutBounce’, duration: 2000 }, function() { console.log(‘Animation has finished’); }); }); #container { width:220px; position: relative; }

为什么动画会长时间抖动/波涛汹涌？: 当我使用velocity.js在15秒内向左侧90px和90px向下动画时，动画有点紧张。我该如何解决这个问题，还是应该为JS使用另一个动画库？ $(function() { $(“#box”).velocity({ top: 90, left: 90 }, { duration: 15000, easing: ‘ease-in-out’ }); }); #box { color: white; background-color: black; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; } box 在Codepen上查看

.mouseenter添加“overflow：none”如何防止这种情况？我怎样才能模拟hoverIntent？: 所以我遇到了这个奇怪的问题。我有一条丝带在导航后面移动，同时hover在物品上，它包含绘制丝带形状的旧css-corner技巧。这些是由负底部属性定位的。奇怪的是，.mouseenter事件似乎是在“this”中添加了“overflow：none”类。有办法防止这种情况吗？我的第二个问题是，如果鼠标刚刚经过，我怎么能阻止.mouseenter启动，有点像hoverIntent。我以为mouseenter正在这样做，但显然不是。任何有关如何缩短和更好的提示也是受欢迎的。这是代码，我正在运行noConflict脚本，所以’j’转换为$： function rbHover(){ j(“#nav li a”) .on(‘mouseenter’, function() { var l = j(this).parent().position().left; var w = j(this).parent().width(); var rbw = Math.round(w/4); var rbh = Math.round(w/16); j(“#ribbon”).stop(‘ribbon’, true, true).animate({ “left” : l, “width” : w }, { duration: 600, easing: ‘swing’, queue: ‘ribbon’ }).dequeue(‘ribbon’); j(“.rib-left”).stop(‘rib-left’, true, true).animate({ “border-right-width”: […]

独立SVG中的动画（带ecmascript（和jQuery ?!））: 我使用inkscape创建了一个SVG，现在我想根据一些逻辑添加一些动画。我非常了解JavaScript并且具有jQuery的基本经验。所以我想我也可以使用jQuery为我的SVG制作动画。 Google发现了无数关于如何使用嵌入在XHTML中的内联SVG的教程，但我有一个独立的SVG和Firefox抱怨错误：b.style未定义源文件：[…] jquery.js 行：16 有没有办法让jQuery工作？或者，作为替代方案，您是否可以推荐另一个我可以使用的JavaScript库来实现目的？

绘制SVG路径的最简单方法: 我从这里尝试了以下的tutiroal： http ：//jakearchibald.com/2013/animated-line-drawing-svg/ var path = document.querySelector(“.svg1”); var length = path.getTotalLength(); path.style.transition = path.style.WebkitTransition = “none”; path.style.strokeDasharray = length; path.style.strokeDashoffset = length; path.getBoundingClientRect(); path.style.transition = path.style.WebkitTransition = “stroke-dashoffset 1s ease-out”; path.style.strokeDashoffset = 0; HTML如下：问题是当我在Firefox中使用它时，它可以工作。但是，如果我选择使用Chrome，那么动画会以75％的速度冻结，并在30秒内立即跳至100％。我注意到，动画在一种情况下不会冻结 – 如果我使用stroke-dashoffset 530ms ease-out ，即530ms或更少。有人可以建议一个解决方案或建议一个很好的方法来动画svg路径没有大量无用的代码？

使用velocity.js和svg进行动画时，IE 11神奇地崩溃了: 当运行velocity.js做一个svg动画时，js小提示显示ie 11的崩溃只需左键单击箭头旁边的f 这只发生在IE 11中，也许在其他版本的IE上也是如此。 Chrome似乎很好用。 HTML body { background-color:#000000 } #box1 { position: absolute; left: 250px; top: 330px; width: 257px; height: 62px; opacity: 0; z-index: 1; } #box2 { position: absolute; right: 250px; top: 330px; width: 315px; height: 62px; opacity: 0; z-index: 1; } #positionP { position: absolute; left: 250px; top: 330px; } […]

如何设置线条动画以跟踪移动的CSS元素？: 更新 – 我曾使用SVG动画插件请求帮助修复我的第一次尝试，现在有一个解决方案（按照此链接），这有效地回答了这个问题。尽管Jleagle指出的attr（）也可以解决问题我使用jQuery动画了一系列css元素，下一步是用图形直线跟踪每个元素。线的一端应保持固定，并随元素移动一端。我想我可以通过SVG和相应的SVG jQuery插件实现这一点，但是我遇到了很多问题，我想知道我是否应该从不同的方向处理它。下面是带有三个SVG行的动画框的代码，这样你就可以看到我得到的内容。这个网站还有一个JS小提琴使用Javascript $(function() { var balloons = [$(“#box1”), $(“#box2”), $(“#box3”)]; var lines = [$(“#line1”), $(“#line2”), $(“#line3”)]; function act(jqObj, speed, change) { jqObj.animate({ ‘left’ : change }, speed).animate({ ‘left’ : -change }, speed, function() { act(jqObj, speed, change); }); }; for( i = 0; i < […]

JQuery Mobile可折叠幻灯片转换: 有没有人能够将幻灯片转换添加到JQuery Collapsible属性？我正在尝试创建一个可以与data-inset =“false”折叠的列表，当用户点击菜单项时，折叠部分会滑出。这是我尝试做的一个例子（但是使用JQuery Mobile），但是，在这个例子中，过渡并不像我想的那样顺利： http ： //www.designgala.com/demos/collapse -expand-jquery.html 想法？注意：我已经看到其他post具有类似的目标，但是，没有一个post使用我描述的过渡，他们使用了淡入淡出。