stackoom
  简体   繁体   中英

VivusJS animation called properly, but nothing visually happens (or happens too fast to spot)

 原文  2020-06-07 22:29:12  7   1    javascript/ animation/ svg/ vivus

Question

Recently started learning JavaScript and decided to check out some animations, then I found VivusJS. I got a simple SVG image to do some testing and see how it works. I'm trying to use the simplest example, but nothing seems to happen.

There are no errors in the Console and when I debugged, from the little I understood, everything seems to be fine. console.table(myVivus.map) seems to print the correct informaiton as well, but at the end of the day, there's no animation happenening. I don't know if everything's working correctly and said animaiton is just really fast or there's something else I'm supposed to add to my code.

Here's what I have ( style.css is empty):

JAVASCRIPT: 

const myVivus = new Vivus ('my-svg', { type: 'delayed', duration: 200, animTimingFunction: Vivus.EASE });
myVivus.play();

console.table(myVivus.map);

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <title>My Page</title>
    </head>
    <body> 

      <svg id="my-svg" enable-background="new 0 0 511.814 511.814" height="512" viewBox="0 0 511.814 511.814" width="512" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m439.015 45.763h-22.922c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h22.922c13.265 0 24.057 10.792 24.057 24.057v387.937c0 13.265-10.792 24.058-24.057 24.058h-366.216c-13.265 0-24.057-10.792-24.057-24.058v-47.962c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v47.962c0 21.537 17.521 39.058 39.057 39.058h366.217c21.536 0 39.057-17.521 39.057-39.058v-387.937c-.001-21.536-17.521-39.057-39.058-39.057z"/>
          <path d="m41.242 400.332c4.143 0 7.5-3.358 7.5-7.5v-308.012c0-13.265 10.792-24.057 24.057-24.057h311.333c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-208.227c-.253-9.135-3.118-17.626-7.877-24.754h281.224c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-297.428c-6.801-3.82-14.636-6.009-22.976-6.009-25.518 0-46.346 20.411-47.048 45.763h-9.001c-21.536 0-39.057 17.521-39.057 39.057v308.012c0 4.142 3.357 7.5 7.5 7.5zm87.606-385.332c17.247 0 31.353 13.683 32.048 30.763h-64.096c.695-17.08 14.8-30.763 32.048-30.763z"/>
          <path d="m398.239 135.676c-1.897-4.79-5.966-8.465-10.883-9.831-87.649-24.332-176.113-24.333-262.931-.002-4.899 1.372-8.954 5.044-10.847 9.823-13.163 33.249-19.629 68.973-19.219 106.178.386 34.988 6.877 72.48 19.293 111.434 1.646 5.167 5.732 9.175 10.929 10.722 43.25 12.881 86.956 19.321 130.824 19.321s87.898-6.442 131.771-19.324c5.227-1.534 9.335-5.548 10.99-10.737 12.421-38.949 18.915-76.436 19.301-111.418.411-37.203-6.058-72.922-19.228-106.166zm-67.397-6.921c10.417 1.698 20.83 3.747 31.233 6.151v220.305c-10.407 2.553-20.82 4.732-31.233 6.538zm-15 235.336c-10.413 1.447-20.825 2.521-31.232 3.22v-243.778c10.41.655 20.822 1.662 31.232 3.021zm-119.87-237.606c10.398-1.351 20.81-2.348 31.232-2.991v243.877c-10.425-.68-20.838-1.738-31.232-3.173zm-15 235.38c-10.433-1.808-20.846-3.997-31.233-6.568v-220.446c10.392-2.415 20.804-4.471 31.233-6.171zm-53.026-13.142c-24.786-77.759-24.923-145.645-.421-207.535.178-.448.531-.785.946-.901 2.088-.585 4.178-1.144 6.268-1.701v212.731c-1.96-.556-3.919-1.111-5.877-1.694-.43-.128-.78-.473-.916-.9zm114.259 19.368v-245.278c4.456-.129 8.913-.209 13.371-.209 4.677 0 9.354.084 14.033.226v245.234c-4.735.155-9.469.245-14.201.244-4.403.001-8.804-.083-13.203-.217zm141.672-19.391c-.137.429-.491.775-.925.902-1.959.575-3.918 1.123-5.877 1.671v-212.66c2.09.551 4.18 1.105 6.269 1.685.417.116.772.453.95.902 24.513 61.882 24.377 129.756-.417 207.5z"/>
          <path d="m439.595 336.986c.075.002.15.003.225.003 4.04 0 7.373-3.214 7.493-7.279 2.28-77.417-.697-155.876-8.853-233.203-.622-5.884-5.35-10.547-11.241-11.089-114.097-10.486-229.375-10.487-342.629-.002-5.892.545-10.616 5.213-11.234 11.099-12.76 121.718-12.758 244.397.004 364.628.613 5.78 5.252 10.433 11.032 11.063 58.533 6.375 116.662 9.563 174.007 9.563 57.289 0 113.795-3.182 169.098-9.546 5.743-.661 10.35-5.314 10.955-11.062 3.468-32.866 6.031-66.292 7.619-99.349.199-4.137-2.994-7.652-7.131-7.851-4.174-.206-7.654 2.994-7.852 7.131-1.542 32.091-4.011 64.532-7.341 96.461-108.291 12.302-221.199 12.288-335.688-.038-12.362-117.848-12.364-238.057-.003-357.355 110.98-10.146 223.903-10.144 335.706.005 7.919 75.984 10.798 153.05 8.557 229.104-.122 4.14 3.136 7.595 7.276 7.717z"/>
          <path d="m106.346 415.458c0 17.959 14.61 32.569 32.569 32.569s32.569-14.61 32.569-32.569-14.61-32.569-32.569-32.569-32.569 14.611-32.569 32.569zm50.139 0c0 9.688-7.882 17.569-17.569 17.569s-17.569-7.881-17.569-17.569 7.882-17.569 17.569-17.569 17.569 7.882 17.569 17.569z"/>
          <path d="m372.898 382.889c-17.959 0-32.569 14.61-32.569 32.569s14.61 32.569 32.569 32.569 32.569-14.61 32.569-32.569-14.61-32.569-32.569-32.569zm0 50.139c-9.688 0-17.569-7.881-17.569-17.569s7.882-17.569 17.569-17.569 17.569 7.881 17.569 17.569-7.881 17.569-17.569 17.569z"/>
          <path d="m231.276 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m199.813 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m265.538 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m297.001 408.813v31.714c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-31.714c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5z"/>
          <path d="m173.878 444.124v1.198c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-1.198c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5z"/>
        </g>
      </svg>

      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
      <script src="js/main.js"></script>
    </body>
</html>

Any help would be appreciated!

1 answers

solution1
 0 ACCPTED  2020-06-08 05:09:26

Looks like I had the same problem as in this case . I'm missing the stroke attribute in my <svg> .

There for, after doing this, the animation happens and works as expected. In order to remove the "original lines" and only show the stroke , I also had to add another attribute called fill and set it to none .

So the final result is: <svg stroke="red" fill="none"> , for example.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question setInterval in jQuery happens too fast Value between 0 - 1 happens too fast on Scroll DOM manipulation inside loop happens too fast Onclick after effects animation (bodymovin.js) ID nothing happens Quiz not working properly, after clicking the submit button, nothing happens Nothing happens after Prompt Fancybox Problems, nothing happens jQuery animation callback called too fast Pause function is being called inside react component but nothing happens Nothing happens on button click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM