Restart animation - Githubissues

babsevensix commented 3 years ago

How can i restart an animation?

Igor-Vladyka commented 3 years ago

use motionStop() and then motionStart() to start it again.

babsevensix commented 3 years ago

Thanks for reply, if i have a motion.seq and inside 2 motion.polygon if i do mostionStop then motionStart when animation start i see 2° polygon already in my map

Igor-Vladyka commented 3 years ago

You need to provide full example for better context. But one of 2 options you can try to fully reset animation:

remove your seq from the map, then add it again and start animation.
seq.motionStop -> seq.getLayers().forEach(f=> f._reset()) -> seq.motionStart();

babsevensix commented 3 years ago

Try this code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TestMap</title>
</head>

<body style="margin: 0; padding: 0; display: flex; align-items: stretch; justify-items: stretch;height: 100vh;">
  <div id="map" style="flex: 1 1 auto; flex-grow: 1;"></div>
  <link rel="stylesheet" href="/plugins/leaflet/leaflet.css">
  <script src="/plugins/leaflet/leaflet.js"></script>
  <script src="/plugins/leaflet/leaflet-providers.js"></script>
  <script src="/plugins/leaflet.motion-master/dist/leaflet.motion.js"></script>
  <script src="/plugins/leaflet/Leaflet.Control.Custom.js"></script>
  <script>
    function addButtonToMap() {
      L.control.custom({
        position: 'bottomright',
        content: '<button id="btnAutoPlay" type="button" >' +
          '    START' +
          '</button>',
        style: {
          margin: '5px',
          padding: '0px 0 0 0',
          cursor: 'pointer',

        },

        events: {
          click: function (data) {
            console.log('start motion');
            startMotion();
          },

        }
      })
        .addTo(map);

    }

    var seq;
    var map = L.map('map');
    var Esri_WorldGrayCanvas = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
      maxZoom: 16
    }).addTo(map);

    var points = [
      [45.62754, 8.71508],
      [21.03653, -86.87708],
      [40.49181, -3.56948]
    ];

    map.setView(points[0], 11);
    map.fitBounds(points);

    var layers1 = L.motion.polyline([points[0], points[1]], {
      color: "#0067b0"
    }, {
      auto: false,
      duration: 3000,
      easing: L.Motion.Ease.easeInOutQuart
    }, {
      removeOnEnd: true,
      showMarker: false,
      icon: L.divIcon({
        html: "<i class='fas fa-plane fa-2x' aria-hidden='true'></i>",
        iconSize: L.point(27.5, 24)
      })
    });

    var layers2 = L.motion.polyline([points[1], points[2]], {
      color: "#0067b0"
    }, {
      auto: false,
      duration: 3000,
      easing: L.Motion.Ease.easeInOutQuart
    }, {
      removeOnEnd: true,
      showMarker: false,
      icon: L.divIcon({
        html: "<i class='fas fa-plane fa-2x' aria-hidden='true'></i>",
        iconSize: L.point(27.5, 24)
      })
    });
    addButtonToMap();

    seq = L.motion.seq([layers1, layers2], {
      auto: false
    });
    seq.addTo(map);

    seq.on(L.Motion.Event.Ended, function (evt) {
      document.getElementById('btnAutoPlay').disabled = false;
    });

    function startMotion() {
      document.getElementById('btnAutoPlay').disabled = true;
      console.log(seq);
      seq.getLayers().forEach(f => {
        f._reset();
      });
      seq.motionStart();

    }
  </script>
</body>

</html>

Second time you press start button, you see second polyline already on screen

Igor-Vladyka commented 3 years ago

THanks for example. That one is fixed in new version v0.2.4. Please try it and reopen this ticket if it still do not work as expected.

Igor-Vladyka / leaflet.motion

Restart animation #15