更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com进入一个APP，通常会有欢迎界面，用于显示APP的名称和logo，并预加载一些数据。既然是欢迎页面，自然少不了一些动画元素。简单使用CSS3和JS动画效果、进度组件和倒计时推出欢迎页面。直接效果：1.基于CSS3的动画效果1.1为动画元素设置动画属性。animation-name：动画名称animation-duration：动画时长animation-delay：动画开始前的延迟时间animation-iteration-count：动画重复次数animation-timing-function：动画执行速度animation-fill-mode：动画模式.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;}1.2使用“@keyframes动画名称”匹配设置动画规则。@keyframesan1{from{transform:rotate(180deg);opacity:0.3;}to{transform:rotate(360deg);opacity:1.0;}}除了from,to，还可以用百分比（比如20%{...})设置动画期间的效果。以上两步实现了gif中的HUAWEIlogo旋转和渐清动画效果。2.基于JS的动画效果2.1给动画元素赋予id/ref等属性，可用于元素匹配。2.2在onShow()方法中获取元素实例，使用animate()方法给出动画规则和基本属性。注意这一步在onInit()和onReady()中执行时没有效果。animate()接受两个参数，第一个是数组，指定动画的关键帧效果。第二个是指定动画基本属性的对象。2.3调用play()方法开始动画执行。onShow(){//设置动画lettextImg=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();...}这个方法没有说明在开发者文档中找到，但确认可用，IDE也有提示。transform中没有按键输入的提示。这里写完之后会有红线说缺少属性，但是运行没有问题，可以忽略。如果看起来不舒服，可以单独将数组声明为变量，然后将其作为animate()方法的参数。以上三步实现了gif中的“litemall”字样从下向上移动，逐渐清晰的动画效果。与CSS3动画技术相比，使用JS实现动画会更加灵活。动画可以定义在onShow()中，它会在用户执行某些操作后执行。CSS3只能在页面显示后执行一定时间，但可以通过百分比的形式定义更丰富的动画渐变效果。3、JS定时器setTimeout()和setInterval()这两个定时函数在鸿蒙中可以无缝使用。gif图中的倒计时使用setInterval()每1秒倒计时一个数并改变省略号的个数，倒计时到0时清空定时器。为了防止僵尸线程影响性能，记得调用clearTimeout()和clearInterval()来清除定时器。倒计时部分，hml视图层：{{loading}}
