HBuilder App 开机动画制作指南：guide.html 实例

在 HBuilder 中打开 guide.html 文件。
在 head 标签中添加以下代码：

<style>
    /* 设置动画样式 */
    .animation {
        animation-name: fadeOut;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }
    /* 设置动画关键帧 */
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>

这段代码定义了一个名为'fadeOut' 的动画，它会在2秒内将页面的不透明度从1渐变到0。animation-fill-mode 属性设置为 forwards 表示动画结束后保持最后一帧的状态。

在 body 标签中添加以下代码：

<div id='loading'>
    <img src='images/loading.gif' alt='加载中' />
</div>

这段代码创建了一个 id 为 'loading' 的 div，其中包含一个图片元素，用于显示开机动画。

在 JavaScript 中添加以下代码：

window.onload = function() {
    var loading = document.getElementById('loading');
    loading.className = 'animation';
    setTimeout(function() {
        loading.style.display = 'none';
    }, 2000);
}

这段代码在页面加载完成后，获取 id 为 'loading' 的 div 元素，并将其 class 属性设置为 'animation'，触发开机动画。setTimeout 函数用于在2秒后将该 div 的 display 属性设置为 'none'，隐藏开机动画。

完成以上步骤后，保存 guide.html 文件，重新打包 app 即可看到添加的开机动画效果。