我动态创建了 SVG 圆圈，并使用 JQuery 将其小圆圈动画化为大圆圈。动画在其他 JQuery 版本中工作正常并抛出异常“设置一个只有 getter 的属性”仅适用于 JQuery 3.0 版本。我在网上搜了一下。这是由于属性没有setter函数造成的。
_animateCircle: function (element, delayInterval) {
var radius = element.getAttribute("r");
var scaleVal;
var $ele = $(element);
var layer = this;
$ele.delay(delayInterval).each(function () { }).animate(
{
r: radius // if i comment this line, exception not occur. But animation not working
},
{
duration: 700,
step: function (now) {
scaleVal = now;
}
}
);
}
我的问题是为什么这仅在 JQuery 3.0 版本中不起作用。请就此向我提出建议。
谢谢，
巴拉蒂。
编辑、更新
Firefox 最后记录错误的解决方法else at Tween.propHooks._default.set line 6571
else {
tween.elem[ tween.prop ] = tween.now; // logs error
}
您可以创建一个属性值等于的对象r值，这是一个SVGAnimatedLength对象以及在动画应停止处具有值的属性；在step的函数.animate()调用创建的对象作为参数jQuery()设置属性使用.attr("r", now)，它似乎在 Firefox、Chromium 上返回相同的结果
var fx = {
_animateCircle: function(element, delayInterval) {
var r = element.attr("r");
var radius = {from:r, to:r * 2}; // set `r` to `radius.to` value
$(radius).delay(delayInterval).animate({
from: radius.to
}, {
duration: 700,
step: function(now) {
element.attr("r", now);
}
});
}
}
fx._animateCircle($("circle"), 500)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="200" cy="100" r="50" stroke-width="1" fill="blue" />
</svg>
jsfiddlehttps://jsfiddle.net/bxmgqnq3/3/
代替$.fn.attr() for .getAttribute()
var fx = {
_animateCircle: function(element, delayInterval) {
var radius = element.attr("r") * 2;
console.log(radius);
var scaleVal;
element.delay(delayInterval).animate({
r: radius
}, {
duration: 700,
step: function(now) {
scaleVal = now;
}
});
}
}
fx._animateCircle($("circle"), 500)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="200" cy="100" r="50" stroke-width="1" fill="blue" />
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
