主页 / 问题 / 1180000
Accepted
zeni1agent
Asked:2020-09-19 20:32:53 +0000 UTC2020-09-19 20:32:53 +0000 UTC

如何启动和停止动画？

  • 772

有一个代码可以无休止地为图像设置动画

const svg = document.getElementById('svg-element')
const warp = new Warp(svg)

warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y, y ])

let offset = 0
function animate()
{
    warp.transform(([ x, y, oy ]) => [ x, oy + 4 * Math.sin(x / 16 + offset), oy ])
    offset += 0.1
    requestAnimationFrame(animate)
}

animate()
#svg-element {
    margin: 20px;
    overflow: visible;
    width: 300px;
    height: auto;
}
<script src="https://cdn.jsdelivr.net/npm/warpjs@1.0.8/dist/warp.js"></script>
<svg id="svg-element" viewBox="0 0 303 251">
    <circle cx="88.784" cy="141.382" r="88.784" style="fill: #00fbd1; mix-blend-mode: multiply;"/>
    <path d="M278.078,26.195l-161.04,-26.195l-26.195,161.04l161.04,26.195l26.195,-161.04Z" style="fill: #d867ff; mix-blend-mode: multiply;"/>
    <path d="M170.608,63.772l131.392,155.722l-213.216,30.874l81.824,-186.596Z" style="fill: #fffa2a; mix-blend-mode: multiply;"/>
</svg>

我想创建运行代码、暂停代码和重置动画的命令。

或多或少是这样的：

const svg = document.getElementById('svg-element')
const warp = new Warp(svg)

warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y, y ])

let offset = 0
var requestId = undefined;

function start(ani) {
    if (!requestId) {
       requestId = window.requestAnimationFrame(ani);
    }
}
function pause(ani) {
    if (requestId) {
       window.cancelAnimationFrame(ani);
       requestId = undefined;
    }
}
function stop() {
  offset = 0
}

function animate(){
  warp.transform(([ x, y, oy ]) => [ x, oy + 4 * Math.sin(x / 16 + offset), oy ])
  offset += 0.1
  self.start = start(animate)
  self.pause = pause(animate)
  self.stop = stop()
}
animate.start

如果会有多个动画，我怎样才能做得更好？
为每个编写停止、启动等函数start_animation_1()是没有意义的，调用也是没有意义的。

javascript

1 个回答

  1. Best Answer

    好吧，您需要某种附加组件Warp。

    问题是您无法使用会自行停止和启动一切的魔法功能。例如，stop它必须确切知道需要重置哪些值：可以有 2 个或 3 个值，而不是一个偏移量。那些。在初始化期间，您需要传递一个带有初始值的附加对象。

    在这种情况下，您可以先尝试弄清楚使用该功能是否方便，然后再考虑如何实现它。去做吧，不要再看里面发生了什么。我摆弄了一下，直到它看起来像这样：

    class Anim {

  constructor(params) {
    /* Чтобы не пытаться запоминать, какая функция - как вызывается, 
       можно изначально согласовать и объявить где-то вверху:
       """ Все полученные функции из params везде вызываются в контексте this """ */
       
    this.warp = new Warp(params.elem);

    params.init_fn.call(this, this.warp); // инициализация для warp

    this._values = params.init_values; // Хранит параметры для loop
    this._loop_fn = params.loop; // вызывается на каждом animationFrame

    /***/
    this._animating = false;
    this._save_starting_values(this._values);
  }

  start() {
    if (this._animating) return;
    this._animating = true;

    const fn = (time) => {
      // Важна именно стрелочная функция: Чтобы this внутри не терялся.
      if (!this._animating) return;
      // Если откуда-то выставят this._animating = false, оно просто не запустится.
      // Можно уже без cancelAnimation...

      this._loop_fn.call(this, this._values, time);

      requestAnimationFrame(fn);
    };

    requestAnimationFrame(fn);
  }

  pause() {
    this._animating = false;
  }

  stop() {
    this._animating = false; // Анимация уже не запустится

    this._return_starting_values(); // начальные значения возвращаются на место
    this._loop_fn.call(this, this._values, performance.now()); // перерисовать
  }

  /***/
  _save_starting_values(_values) {
    this._starting_values = {};
    Object.assign(this._starting_values, _values);
  }

  _return_starting_values() {
    Object.assign(this._values, this._starting_values);
  }
}


/*** Использование */
const animation = new Anim({
  elem: document.getElementById('svg-element'),

  init_fn: function(warp) {
    warp.interpolate(4);
    warp.transform(([x, y]) => [x, y, y]);
  },

  init_values: {
    offset: 0,
  },

  loop: function(values, time) {
    const v = values;

    this.warp.transform(([x, y, oy]) => [x, oy + 4 * Math.sin(x / 16 + v.offset), oy])
    v.offset += 0.1;
  },
});

animation.start();

/***/
(function demo_buttons() {
  const id = (e) => document.getElementById(e);

  id("start").addEventListener("click", function() {
    animation.start();
  });
  id("pause").addEventListener("click", function() {
    animation.pause();
  });
  id("stop").addEventListener("click", function() {
    animation.stop();
  });

})();
    #svg-element {
  margin: 20px;
  overflow: visible;
  width: 300px;
  height: auto;
}
    <script src="https://cdn.jsdelivr.net/npm/warpjs@1.0.8/dist/warp.js"></script>

<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>

<hr>

<svg id="svg-element" viewBox="0 0 303 251">
    <circle cx="88.784" cy="141.382" r="88.784" style="fill: #00fbd1; mix-blend-mode: multiply;"/>
    <path d="M278.078,26.195l-161.04,-26.195l-26.195,161.04l161.04,26.195l26.195,-161.04Z" style="fill: #d867ff; mix-blend-mode: multiply;"/>
    <path d="M170.608,63.772l131.392,155.722l-213.216,30.874l81.824,-186.596Z" style="fill: #fffa2a; mix-blend-mode: multiply;"/>
</svg>

    • 3

相关问题