欢迎页面的实现思路

在APP启动时，通常需要一个欢迎界面来展示品牌标识、加载数据或完成必要的初始化操作。这种页面通常会加入动画元素增强用户体验，同时也可以利用这个时间预加载部分数据，减少用户等待时间。

CSS3动画实现

.logo {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    animation-name: an1;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: none;
}

CSS3动画适合处理简单的过渡效果，如透明度变化、旋转、缩放等。在欢迎页面中，可以通过@keyframes定义动画规则，并使用百分比控制动画过程中的状态变化。

例如，实现一个logo旋转并逐渐清晰的动画：

@keyframes an1 {
        from {
            transform: rotate(180deg);
            opacity: 0.3;
        }
        to {
            transform: rotate(360deg);
            opacity: 1.0;
        }
}

1. 使用@keyframes定义动画关键帧，如@keyframes fadeInRotate。

2. 在关键帧中设置不同百分比（如0%、50%、100%）的样式，控制透明度和旋转角度。

3. 将动画应用到目标元素，设置animation属性，包括动画名称、持续时间、缓动函数等。

JS动画实现

相比CSS3动画，JS动画提供了更高的灵活性，可以在特定条件下触发或动态调整动画参数。在鸿蒙JS开发中，可以通过以下步骤实现：

1. 为目标元素设置id或ref属性，以便在JS中获取实例。

    onShow() {
        // 设置动画
        let textImg = this.$element("textImg").animate([
            {
                transform: {translateY: '200px'}, opacity: 0.1
            },
            {
                transform: {translateY: '0px'}, opacity: 1
            }
        ], {
            duration: 5000,
            easing: "linear-out-slow-in",
            fill: "forwards",
            iterations: 1
        });
        textImg.play();
        ......
    }

2. 使用animate()方法定义动画，第一个参数是关键帧数组，第二个参数是动画配置（如持续时间、缓动方式）。

3. 调用play()方法启动动画。这种方式可以在用户交互后触发，而不是页面加载后立即执行。

倒计时与页面跳转

欢迎页面通常会设置倒计时功能，并在动画结束后自动跳转到主页面。可以使用setInterval实现动态倒计时效果，并在倒计时结束时用clearInterval清理定时器。

跳转逻辑可以结合数据预加载，例如：

1. 在欢迎页面加载时，提前请求首页所需的数据。

2. 倒计时结束后，携带预加载的数据跳转至首页，减少用户等待时间。

微信小程序的动画实现

微信小程序的动画实现方式与鸿蒙有所不同，主要依赖微信提供的动画API：

1. WXSS支持标准的CSS3动画，但需注意语法细节，如动画名称不能加引号。

2. JS动画通过wx.createAnimation()创建动画对象，并通过链式调用定义关键帧变化。

3. 使用step()结束动画定义，并调用export()将动画绑定到元素。

    

        
        
            {{ loading }}
        
    
    
        {{ seconds }}
    

总结

.loading {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
progress {
    width: 120px;
    height: 120px;
}
.loading>text {
    font-size: 40px;
    color: #666666;
}
.count {
    position: fixed;
    bottom: 385px;
    left: 225px;
    font-size: 60px;
    color: #666666;
}

欢迎页面的实现可以结合CSS3和JS动画，同时利用倒计时和预加载优化用户体验。不同平台（鸿蒙、微信小程序）的动画实现方式略有差异，开发者可根据需求选择合适的技术方案。

    onShow() {
    ......
        // 设置倒计时
        let iv = setInterval(() => {
            let suffix;
            switch (this.seconds % 3) {
                case 2:
                suffix = "...";
                break;
                case 1:
                suffix = "..";
                break;
                default:
                suffix = ".";
                break;
            }
            this.loading = "数据加载中" + suffix;
            this.seconds--;
            if (this.seconds == 0) {
                clearInterval(iv);
            }
        }, 1000);
    }