juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

in callback function variables cannot hold data #770

Closed jimzou closed 3 years ago

jimzou commented 3 years ago

Variables cannot hold values in a callback function:

        var rot = 0;
        var self= this;
        anime({
                targets: '.div1',
                rotateY: function(el,i) {
                      console.log(self.rot);
                      self.rot+=60;                      
                      return self.rot; },
                delay: 1000,
                easing: 'easeOutSine',
                loop: true,
                autoplay: true
              });

in the line " console.log(self.rot);" , rot is always 0. I don't know how to solve this problem

jimzou commented 3 years ago

Solved by the following method:

    var rot = 0;
    var self= this;
    function func_rotate() {
      anime({
            targets: '.div1',
            rotateY: function(el,i) {
                  console.log(self.rot);
                  self.rot+=60;                      
                  return self.rot; },
            delay: 1000,
            easing: 'easeOutSine',                
            autoplay: true,
            complete: fun_rotate
          });
    }

    func_rotate();