如何使用 Vue Js 为 Web 应用程序创建屏幕保护程序？

Question

我想为我的网络应用程序创建一个屏幕保护程序。我可以像这样用 Jquery 创建它！

JQUERY

var mousetimeout;
var screensaver_active = false;
var idletime = 5;

function show_screensaver(){
    $('#screensaver').fadeIn();
    screensaver_active = true;
    screensaver_animation();
}

function stop_screensaver(){
    $('#screensaver').fadeOut();
    screensaver_active = false;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(document).mousemove(function(){
    clearTimeout(mousetimeout);

    if (screensaver_active) {
        stop_screensaver();
    }

    mousetimeout = setTimeout(function(){
        show_screensaver();
    }, 1000 * idletime); // 5 secs          
});

function screensaver_animation(){
    if (screensaver_active) {
        $('#screensaver').animate(
            {backgroundColor: getRandomColor()},
            400,
            screensaver_animation);
    }
}

点击下方Link观看完整代码和演示

Watch DEMO

但我想将 JQuery 代码转换为 Vue Js。也许有人可以帮助我使用 vue js 创建屏幕保护程序。

Answer 1

只需使用一些 CSS 动画即可节省大量性能并摆脱大量代码。

这里我有一个简单的codepen给你。

animation: color-transition 3s linear infinite alternate;

@keyframes color-transition {
    0% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
    33% {
        background-color: #80D39B;
        border-color: #80D39B;
    }
    66% {
        background-color: #BE3E82;
        border-color: #BE3E82;
    }
    100% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
}

https://codepen.io/sontd/pen/MWgPYom

添加更多具有不同颜色的关键帧以获得更多过渡，别忘了也增加过渡持续时间。

如何使用 Vue Js 为 Web 应用程序创建屏幕保护程序？

How to Create ScreenSaver for Web Apps with Vue Js?

timeout

screensaver

settimeout

vue.js