Увеличение и уменьшение формы SVG - JS

Question

Я бы хотел, чтобы вы помогли мне кое-что здесь, чтобы функция увеличивала, а затем уменьшала 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;
  }
}

Answer 1

Ваша странная реализация 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);

Answer 2

Полный HTML-код для демонстрации POC по адресу: https://pastebin.com/GW0Ncr9A

Holler, если у вас есть вопросы.

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';
    }
};

Answer 3

Ошибка со строкой sizeManager=sizeManager*+1; Умножение числа на единицу не меняет его.По сути, вы хотите переключать sizeManager между -1 и +1, и вы можете сделать это, умножив на -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;
    }
}