可以将PNG转换为Java动画吗?

时间:2019-04-23 23:17:41

标签: javascript

我有一个PNG图片,当时我正在考虑将其用作页面加载器。由于它不是gif,因此没有动画,并且基本上只是静态png图像。我想知道是否有可能将该图像实际转换为Javascript(也许是画布?)并对其进行动画处理?

1 个答案:

答案 0 :(得分:1)

CSS animate属性和@keyframes规则可以用于实现此目标。例如...

body {
    background:#fff;
}

@keyframes arrow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingIMG {
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    margin: auto;

    width: 60px;
    height: 60px;

    transform-origin: center center;
    animation: arrow 1s ease-out infinite;

    z-index: 1000;
}
<img id="loadingIMG" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAACXBIWXMAAAQKAAAECgFCV1GHAAAEOUlEQVRo3sWZXWhcRRTHf3c32Xy0u5svWhrSuC0FUyKlpASTUvogKIKCPipYMOJTP2xrjemT2laltA1UheJD/XgQfbCgFCtosGhQRNPvVmLS0KQg9aHJZjfZbLJJdscH3bDbnTv3zuzd9czb3HPn/58z58ycOWOhIz5CROhkMxvZQCOrqMUiyRz3mWCcW1zmLnEy7oe0XOuF2MLjdNNGIzU2WvNEGeEXBrhJHKE1OSV4K3v4nikyCBctQ5Qf2M16xfQCdPE0G50NYBGhl6ssuoLObSmu0UerdNQ6jvE3Ca7wrBo+xItcZkkbPNuWGKKHcAH8aVL/aQyp5r6Nc8wZg2dbki/Zmgf/3gq8IGUHX80LjBQNnm3D7KIagHrez4EXdo5axzvEPYMXCGK8SZA6PngAXkpgDR+y4Cm8QDDPR5wtgJcQWMtnLHsO/294pgt7KwqMf4Tn8DsEp2CGWeJMMomgngbqCRNy+M+SRX0+gSp66VEOkybKDQb5mXGSpFhEECBAFREepZsOWqjEWHYRU5rwNm/RSdh2/6phE4e4rrVz5Mg2ZeD9RT/t+BwnYRHhdYb1CYQ4Z6uU5lu6NExrsZXzLu2wIj0kbVSSnGGd9nKu4YRyQR8gEOGSjUKUPoJGHtXMRfcEem1iP0mfoVeHOcW8WwKtXLFZ+zOsNoTvd7mbArDHxmEu0FxieAEQ4jubwOsuObwA2MmU9FM/FQbwQU5pHWXAUemHUR4xgLc44Mr1cgjUMyDpznDEdcacK0224WzTfDxEm2SgSS5gklZnWNTSv+ejk0bJhxuMGMDDNJ+TcK09y9kKNkuvGYPEjQgIPmGK7QWZsEySDHIevpasTIzHjOCz4ifgovkBKtggNc14UQTSpN2q+qQeECdZFAEN8bFK0jtpf2HwnkCtlIBeMBVF4H8Wn3S1mwiUj8CclEBV+QhMSXrDUs8oEQFZxAelu0OJCNyRWmBH+QgMMy/p3+lqN/eEwJDUC7bwcLkI3OVPSX8TTxklJAYEpvlV0m/xPO3lIOAH0jwjyQkaWeCiTs3TXLxOy7UtkCLME5JTIcQ6fmS2SIQgT9LMPXWG4P3VLCu1HCfBffY7nS7eX04BKnmVBALBNK+oKZTiel7DQaIr4zhS8LpA0cAxZvLGmWafyppelmh8dPCVpCgZZa9qFK+KVOs5zJjtgr6k2mGLLdNV085hLinLUwP5x1z+UFW8wWtKVyksVGbwU8lqWulgB120KAudS7zL2yzbEYA6jvOyVql2iVrCtNBA0LGekOFj+oiqlUpZrP6CtY4+RKnK9Yt86r7i5P2DRYKTNLiFB6+fbCbYJ70CKsWrR6sU39BtegMr9tkuzR8cpMkMPGsH04fLZcY4yiYvMkvdp1vBDD9xiDbH/QSvH68XiDHMbwzyO1FcVdn0DCR7vocEc8SYYIxRrjFKTCeV/Qdc80zmGS9ZAwAAAABJRU5ErkJggg==">

可以通过向图像添加特定的CSS class来隐藏图像或将其从视图中移除...

/* CSS */
#loadingIMG.off {
    position:absolute;
    top: -9999px;
    left: -9999px;
    margin: 0;
    z-index: -9999;
}

/* JavaScript */
document.getElementById("loadingIMG").classList.add("off");

...,或者可以按照常规方式使用JavaScript将其从浏览器中删除。...

var LIMG = document.getElementById("loadingIMG");
LIMG.parentElement.removeChild(LIMG);

希望有帮助:)