在HBuilder中制作app时如何添加一个开机动画？请用guidehtml举例

1. 在HBuilder中打开guide.html文件。
2. 在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表示动画结束后保持最后一帧的状态。

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

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

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

4. 在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即可看到添加的开机动画效果