增加和减少SVG形状 - JS

问题描述 投票:1回答:3

我希望你能帮助我做一件事,一个功能增加,然后当它达到极限时减少SVG形状。

它应该从3到6然后是6到3,依此类推......但它从3到6再到6到负无穷大。我不明白为什么。

这是我的代码:

var size = 3;
var sizeManager = 1;

function increaseAnimation(el){

var elem = document.getElementById(el);

  elem.style.transform = "scale("+size+")";
  timer = setTimeout('increaseAnimation(\''+el+'\',3000)');
  size=size+0.005*sizeManager;

  if(size >= 6){
    sizeManager=sizeManager*-1;
  }

  if (size <= 3){
    sizeManager=sizeManager*+1;
  }
}
javascript html function svg
3个回答
2
投票

你的奇怪的setTimeout实现,绑定被打破了。还有一个问题是你的sizeManager没有正确反映:

function increaseAnimation(id, interval) {
    var size = 1;
    var velocity = 0.05;
    var elem = document.getElementById(id);


    function iterate() {
        elem.style.transform = "scale(" + size + ")";

        size += velocity;

        if (size > 2 || size < 1) {
            velocity *= -1; // velocity reflected
        }
    }

    var timer = setInterval(iterate, interval);
    return function stop() {
        clearInterval(timer)
    }
}

我还添加了一个停止功能,您可以在以后调用它。

var stopper = increaseAnimation("content", 16);
setTimeout(stopper, 5000);

1
投票

错误是使用行sizeManager=sizeManager*+1;将数字乘以1不会改变它。你基本上想要在-1和+1之间切换sizeManager,你可以通过乘以-1来实现,无论它当前是负数还是正数。

我已经测试了这段代码,它似乎有效:

var size = 3;
var sizeManager = 1;

function increaseAnimation(el) {

    var elem = document.getElementById(el);

    elem.style.transform = "scale(" + size + ")";
    timer = setTimeout("increaseAnimation('" + el + "', 3000)");
    size += 0.005 * sizeManager;

    if (size >= 6 || size <= 3) {
        sizeManager *= -1;
    }
}

0
投票

POC演示的完整HTML:https://pastebin.com/GW0Ncr9A

霍勒,如果你有疑问。

function Scaler(elementId, minScale, maxScale, deltaScale, direction, deltaMsecs) {
    var scale = (1 == direction)?minScale:maxScale;
    var timer = null;

    function incrementScale() {
        var s = scale + deltaScale*direction;
        if (s < minScale || s > maxScale) direction *= -1;
        return scale += deltaScale*direction;
    };
    function doScale(s) {
        document.getElementById(elementId).style.transform = 'scale(' + s + ')';
    };

    this.getDeltaMsecs = function() {return deltaMsecs;};
    this.setTimer = function(t) {timer = t;};

    this.run = function() {doScale(incrementScale());};
    this.stop = function() {
        clearInterval(timer);
        this.setTimer(null);
    };
};

var scaler = new Scaler('avatar', 3, 6, .05, 1, 50);

function toggleScaler(ref) {
    if ('run scaler' == ref.value) {
        ref.value = 'stop scaler';
        scaler.setTimer(setInterval('scaler.run()', scaler.getDeltaMsecs()));
    }
    else {
        scaler.stop();
        ref.value = 'run scaler';
    }
};
© www.soinside.com 2019 - 2024. All rights reserved.