Last Saturday, Product manager Dingding sent me a link to the Wechat account and said, “Do you know how this works?”

The manager said: “Go get SVG, you can use it to write animation in the future, so that you don’t need JS, CSS so troublesome.”

When I went to learn and read the manual, I was more filled with questions. The advantage of SVG is that images do not lose frames or become blurred, and its sharpness is suitable for any screen resolution; Compared to GIF, JPEG, PNG files are much smaller; But the downside: not all browsers support it, that is, older browsers, older phones do not support it. SVG is a bit like THE CAD I used to play with when I was in school, drawing with coordinate points. Let me draw it point by point, okay? Impossible, how is it possible to draw one coordinate point at a time, just for an image click to lighten the animation?

Then I went back to open the link, F12 opened a look, it used two pictures, one dark, one bright picture. When clicked, opacity is removed using animate, and the naked eye will see only bright pictures. At this time, I want to vomit blood, why I do not begin F12, 😔.

<section style="height: 0px;">
        <svg data-copyright="GL" style="display: inline-block; width: 100%; vertical-align: top; background-position: 0% 0%; background-repeat: no-repeat; background-size:100% 100%; background-attachment: scroll; background-image: url(6402.png); -webkit-tap-highlight-color:transparent; -webkit-user-select:none;" viewBox="0 0 1080 720"></svg>
</section>
<svg data-copyright="GL" style="transform: scale(1); display: inline-block; width: 100%; vertical-align: top; background-size: 100% 100%; background-attachment: scroll; background-image: url(640.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat;" viewBox="0 0 1080 720">
    <animate attributeName="opacity" begin="click" dur="3000s" keyTimes="0; 0.001; 1" values="1. 0; 0" fill="freeze" restart="whenNotActive"></animate>
</svg>
Copy the code

I want to do this the other way around by clicking on the image to lighten it up, using the grayscale of filter I originally thought of, and transition

First, attach the effect drawing

//css
.imgN{
    width: 300px;
    filter: grayscale(100%);
}
.imgactive{
    transition: all 1s ease-in-out;
    filter: grayscale(0);
}

//html
<div class="img" ><img class="imgN" src="6402.png" alt=""></div>
<script>
    document.querySelector('.imgN').addEventListener('click'.function(){
        document.querySelector('.imgN').classList.toggle('imgactive')
    })
</script>
Copy the code

Instead of clicking, it’s easier to hover instead.

Fourimg img{width: 300px; filter: grayscale(100%); transition: all 1s ease-in-out; } .fourimg img:hover{ filter: grayscale(0); } //html <div class="fourimg">
    <img src="6402.png" alt="">
</div>
Copy the code

Since know SVG, not to point practical practical operation learning, unreliable, do not tread heart. Then I went to the bi li bi li found a video tutorial followed in field, to attach a bi li bi li author links to www.bilibili.com/video/BV1fJ… .

Use SVG for silky smooth upload button animations

Same old rule, first with the renderings

The idea is to use SVG to draw circles, ticks, arrows, vertical lines and dashed lines for HTML. Then CSS writes styles and animations. Finally switch the uploaded and uploading classes using JAVASCRIPT and control the uploading progress bar. Attached is the final code:

//html
<main>
    <div class="upload-button uploaded">
        <svg class="arrow" width='40' height='40' viewBox='0 0 40, 40'>
            <circle cx='50%' cy='50%' r='the' fill='none' stroke='#fff' stroke-width='2'></circle>
            <polyline class="arrow-top" points='6 34, 20, 20, 20, 6' fill='none' stroke='#fff' stroke-width='2'></polyline>
            <line class="middle-line" x1='50%' y1='7' x2='50%' y2='34' stroke='#fff' stroke-width='2'></line>
            <polyline class="checkmark" points='18 8, 20, 30 30, 12' fill='none' stroke='#fff' stroke-width='2'></polyline>
        </svg>
        <div class="progress-bar"></div>
    </div>
</main>

//css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC"."Microsoft Yahei"."sans-serif";
}
main{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222f3e;
    height: 100vh;
}
.upload-button{
    width: 180px;
    height: 60px;
    background-image: linear-gradient(160deg,#0093e9,#80d0c7);border-radius: 8px; cursor: pointer; Box-shadow: 0 2px 10px RGB (0,147,233,0.28); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .upload-button .checkmark{ opacity: 0; } .upload-button .progress-bar{ position: absolute; /* width: 50%; */ height: 2px; background-image: linear-gradient(45deg,#85ffbd,#fffb7d);bottom: 0; left: 0; border-radius: 4px; } .upload-button.uploading .middle-line{ stroke-dasharray: 4 3; Animation: 0.8s Linear Dashloop infinite; Upload -button. clink circle{animation: 1.5s linear blink infinite; } .upload-button.uploaded .arrow-top{ animation: 1s linear arrowTransform forwards; } .upload-button.uploaded .checkmark{ opacity: 1; stroke-dasharray: 100 100; stroke-dashoffset: 100; Animation: 1S Linear checkmarkTransform forwards 0.5s; }.upload-button. middle-line{transform: 0.5s linear; opacity: 0; } @keyframes dashloop{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: 7; } } @keyframes blink{ from{ opacity: 1; {} 50% opacity: 0.5; } to{ opacity: 1; } } @keyframes arrowTransform{ from{ stroke-dasharray: 100 100; stroke-dashoffset: 0; } to{ stroke-dasharray: 100 100; stroke-dashoffset: -100; } } @keyframes checkmarkTransform{ from{ stroke-dasharray: 100 100; stroke-dashoffset: 100; } to{ stroke-dasharray: 100 100; stroke-dashoffset: 0; } } //js var uploadButton = document.querySelector('.upload-button');
var progressBar = document.querySelector('.upload-button .progress-bar');

let width = uploadButton.getBoundingClientRect().width;
let uploadTime=5000;

uploadButton.addEventListener('click'.function(){
    uploadButton.classList.remove('uploaded');
    uploadButton.classList.add('uploading');

    setTimeout(function(){
        uploadButton.classList.replace('uploading'.'uploaded'); },uploadTime); / / the progress barletstar = null; // timestamp Indicates the start time of the animationfunction grow(timestamp){
        if(! star) star = timestamp;letprogress = timestamp - star; Math.min If the width exceeds the width of the button, Progressbar.style.width = '// width * (progress/uploadTime) // width * (progress/uploadTime${Math.min(width * (progress / uploadTime),width)}px`; // If uploadTime has not yet been reached, continue calling requestAnimationFrame until Greater than or equal to uploadTimeif(progress < uploadTime){
            window.requestAnimationFrame(grow);
        }
    }

    window.requestAnimationFrame(grow);
})
Copy the code

Well, I think What Wango (the product manager) came up with was: animate in SVG. But a whole down, I do not think SVG animation than JS, CSS much easier, is not I think too much, ha ha ha 😄, certainly I am lazy, do not want to engage in SVG. In the work, I always easy to run off wangge’s idea, do not know if I run off this time, I dare not ask, dare not say. If you read this, Wango, leave a comment below. 😄