利用snap的辉光效应
我正在尝试添加一个发光效果使用snap。与raphael.js不同的是，我认为Snap在默认情况下不支持辉光。然而，有一种阴影效应。我尝试使用set间隔来应用阴影，这样它就可以模拟发光的行为。但是，它并不像计划的那样起作用。我要阴影淡入和消失，说4-5次，使它像一个发光的厕所。在这里，我调用影子，但是它仍然存在，不管将它添加到setinterval代码中。这是JS小提琴
码
var s = Snap("#main");
var thinkers = s.select("#lastImage");
var light = s.select("#look2");
// setinterval with counter
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
// function to add glow
function addShadow() {
var f = s.filter(Snap.filter.shadow(2, 2, 10, "#ffffff"));
light.attr({
filter: f
});
}
// remove glow/shadow
function removeShadow() {
var k = s.filter(Snap.filter.shadow(0, 0, 0, "#ffffff"));
light.attr({
filter: k
});
}
setTimeout(shadow, 500)
function shadow() {
setIntervalX(addShadow, 1000, 4);
}回答 2
Stack Overflow用户
发布于 2015-05-05 14:57:35
我将展示一种稍微不同的过滤方法，我认为它应该适用于任何过滤器，因为您可以通过普通的svg标记来指定它，然后打开一些过滤器，您可以在互联网上找到这些过滤器来使用。
因此，它将允许您选择任何过滤器，任何组合，并更改该过滤器的任何属性(您可以组合它们)。
假设你发现了一些svg过滤效果，用它创建一个字符串，例如.
var myFilter = '<filter id="glow" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur id="gauss" stdDeviation="10 10" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="glow"/><feMergeNode in="glow"/></feMerge></filter>';用Snap创建过滤器(它将是一个片段，所以我们需要将它附加到文件中).我们可以访问任何元素，如果我们已经给他们一个id，或通过css选择器与someCssselector (如下所示)。
s.append( Snap.parse(myFilter) );
var glowFilter = Snap('#glow');
var gaussian = Snap('#gauss');
var t = s.rect(100,100,100,100).attr({ stroke: 'yellow', fill: 'orange', filter: glowFilter }); 然后我们可以创建一个带有回调的动画函数，并更改任何过滤器上的参数.
var onOff = 1;
function animGlow() {
var start = 0; var end = 10;
if( onOff ) { start = 10; end = 0 };
onOff = onOff ? 0 : 1;
Snap.animate(start,end,function( amount ) {
gaussian.attr({ stdDeviation: amount + ' ' + amount });
}, 800, mina.linear, animGlow);
}
animGlow();效果略有不同的小提琴或小提琴
希望这能给出一些想法。有更简单的方法，如果你只是想要一个快照阴影，但我只是试图突出替代路线。
Stack Overflow用户
发布于 2016-01-06 08:06:19
要亲吻辉光(不如拉斐尔辉光)并添加拖动，请尝试如下：
var s = Snap("#svgTest");
//set up a shadow for hover over images shadow(dx, dy, 'color', opacity??? 3 seems darkest)
var glow = s.filter(Snap.filter.shadow(0, 2, 'yellow', .8));
//rect1 has glow
var rect1 = s.rect(10,10,50,50).attr({ fill: 'green', filter: glow });
//rect2 only has glow on hover
var rect2 = s.rect(100,100,50,50)
.attr({ fill: 'green' })
.hover(function() {
//on hover..add fn glow above
this.attr({filter : glow});
},
function() {
//on hover out, set filter to null..delete glow
this.attr({filter : ''});
}
); //end hover
// make all dragable
var move = function(dx,dy) {
//console.log("dx: " +dx + " dy: " + dy);
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
}
var start = function() {
this.data('origTransform', this.transform().local );
}
var stop = function() { //do nothing
}
var selectAll = s.group(rect1, rect2);
selectAll.drag(move, start, stop );https://stackoverflow.com/questions/30050231
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号