从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器原创精华

Chris.

发布于 2021-2-14 11:30

浏览

0收藏

在进入APP时，通常都会有一个欢迎界面，用于展示APP的名称、logo，并预先加载部分数据。既然是欢迎页面，自然少不了一些动画元素。简单运用了CSS3和JS的动画效果，progress组件以及倒计时撸了一个欢迎页面。直接上效果：

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区 1、基于CSS3的动画效果

1.1 给动画元素设置animation属性。

animation-name：动画名
animation-duration：动画持续时间
animation-delay：动画开始前延迟时间
animation-iteration-count：动画重复次数
animation-timing-function：动画执行速度
animation-fill-mode：动画模式

<image src="/common/huaWei.jpeg" class="logo"></image>1.

.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.
3.
4.
5.
6.
7.
8.
9.
10.

1.2 用"@keyframes 动画名"匹配设置动画规则。

@keyframes an1 {
        from {
            transform: rotate(180deg);
            opacity: 0.3;
        }
        to {
            transform: rotate(360deg);
            opacity: 1.0;
        }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

除from，to外，还可以使用百分比（如20%{...})方式设置动画途中的效果。

以上两步，就实现了gif图中HUAWEI的logo旋转和逐渐清晰的动画效果。

2、基于JS的动画效果

2.1 动画元素给定id/ref等可以用于元素匹配的属性。

<image src="/common/liteMall.png" class="textImg" id="textImg"></image>1.

2.2 在onShow()方法中获取元素实例，并用animate()方法给定动画规则和基本属性。注意这一步在onInit()和onReady()中执行是没有效果的。

animate()接受两个参数，第一个为数组，指定动画的关键帧效果。第二个为对象，指定动画的基本属性。

2.3 调用play()方法开始动画执行。

    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();
        ......
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

这个方法在开发者文档中未找到说明，但证实可用，且IDE也是有提示的。

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区

transform其中的key输入却是没有提示了。

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区

这里写完后会有红线说缺少属性，但运行是没问题的，可以忽略。如果看着难受可以把数组单独声明为一个变量，再作为animate()方法入参。

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区以上三步，就实现了gif图中"litemall"字样从下方上移并逐渐清晰的动画效果。

对比CSS3的动画技术，使用JS实现动画会更有灵活性。可以在onShow()中定义动画，在用户进行一定操作后再执行。CSS3的只能在页面显示后一定时间执行，但可以用百分比的形式定义更丰富的动画渐变效果。

3、JS定时器

setTimeout()和setInterval()两个定时函数在鸿蒙中可以无缝对接使用。

gif图中的倒计时使用setInterval()实现每1秒倒数一个数并改变省略号的个数，在倒数到0时清除定时器。为防止僵尸线程影响性能，切记调用clearTimeout()和clearInterval()清除掉定时器。

倒计时部分，hml视图层：

    <div class="loading">
        <progress type="circular"></progress>
        <text>
            {{ loading }}
        </text>
    </div>
    <text class="count">
        {{ seconds }}
    </text>1.
2.
3.
4.
5.
6.
7.
8.
9.

css渲染层：

.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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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);
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

页面会在动画播放完成后跳转到商城首页，使用setTimeout()设置定时跳转即可。这里在播放动画时预加载了首页需要的数据，作为页面参数跳转，可以加快商城页的展示速度，提升用户体验。

    onInit() {
        // 首页数据预加载
        // 获取广告图片
        fetch.fetch({
            ......
        });
        // 获取推荐商品
        fetch.fetch({
            ......
        });
        // 获取一级分类
        fetch.fetch({
            ......
        });
    },
    onShow() {
        // 设置定时跳转
        let to = setTimeout(() => {
            router.replace({
                uri: "pages/index/index",
                params: {
                    ad: this.ad,
                    newGoods: this.newGoods,
                    hotGoods: this.hotGoods,
                    types: this.types
                }
            });
            clearTimeout(to);
        }, 6000);
    ......
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

4、微信小程序的动画效果

最后写一写微信小程序的动画实现，在wxss中同样支持CSS3的动画属性：

.happy {
  font-size: 50rpx;
  color: #e20a0b;
  animation-name: an1;
  animation-duration: 5s;
  animation-delay: 500ms;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes an1 {
  from {
    transform: translateX(0px);
    opacity: 0.5;
  }
  to {
    transform: translateX(300px);
    opacity: 1;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

需注意的是animation-name属性IDE的提示是带有双引号的，需要去除，否则不起效果。

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区

微信小程序的动画JS实现方式和鸿蒙有很大不同，是通过微信提供的API定义并实现动画。接口提供了丰富的方法，可在开发者文档查阅。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    an2: null
  },

  onShow: function () {
    let an2 = wx.createAnimation({
      delay: 500,
      duration: 5000,
      timingFunction: 'ease-in-out'
    });
    an2.translate(100, 300).step();
    an2.rotate(90).opacity(0.1).step();
    this.setData({
      an2: an2.export()
    })
  },
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

动画基本属性作为createAnimation()方法的入参，动画关键帧由一连串的方法流式操作给出，以step()结束。这里一个动画的执行的时间是duration给定的时间。动画对象需使用export()导出到data中，并和页面元素的animation属性绑定。

<view class="happy" animation="{{ an2 }}">
  新年快乐
</view>1.
2.
3.

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器-鸿蒙开发者社区

分类

标签

已于2021-2-14 11:30:11修改

2条回复

按时间正序

按时间倒序

六合李欣

好，期待更多好的作品

2021-2-14 11:36:22

张荣超_九丘教育

👍👍👍

2021-2-14 15:33:28

51CTO

51CTO博客

51CTO学堂

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器原创精华

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器 原创 精华

订阅鸿蒙技术特刊，精选内容抢先看

从微信小程序到鸿蒙js开发【10】——CSS3动画&JS动画&定时器原创精华