鸿蒙应用开发image-animator帧动画的播放原创

鸿蒙时代

发布于 2021-4-28 10:10

浏览

0收藏

这里使用image-animator做了一个帧动画的播放

设置了四个按钮控制动漫的播放效果

stop: 停止播放图片帧动画。

start: 开始播放图片帧动画。再次调用，重新从第1帧开始播放。

pause: 暂停播放图片帧动画。

Resume: 继续播放图片帧。

鸿蒙应用开发image-animator帧动画的播放-鸿蒙开发者社区

Html代码如下：

<!-- xxx.hml -->
<div class="container">
    <text style="font-size: 46px;text-align: center;">帧动画</text>
    <div class="animator_box">
        <image-animator class="animator" ref="animator" images="{{images}}" duration="2s" />
    </div>
    <div class="btn-box">
        <input class="btn" type="button" value="start" @click="handleStart" />
        <input class="btn" type="button" value="stop" @click="handleStop" />
        <input class="btn" type="button" value="pause" @click="handlePause" />
        <input class="btn" type="button" value="resume" @click="handleResume" />
    </div>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Css代码如下：

/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height:100%;
}
.animator_box{
    width: 100%;
    height: 40%;
    justify-content: center;
}
.animator {
    width: 300px;
    height: 280px;
}
.btn-box {
    width: 264px;
    height: 120px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.btn {
    border-radius: 8px;
    width: 120px;
    margin-top: 8px;
}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.

Js代码如下：

//xxx.js
export default {
    data: {
        images: [
                {
                    src: "image/tu1.png",
                },
                {
                    src: "image/tu2.png",
                },
                {
                    src: "image/tu3.png",
                },
                {
                    src: "image/tu4.png",
                },
                {
                    src: "image/tu5.png",
                },
                {
                    src: "image/tu6.png",
                },
                {
                    src: "image/tu7.png",
                },
                {
                    src: "image/tu8.png",
                },
                {
                    src: "image/tu9.png",
                },
                {
                    src: "image/tu10.png",
                },
                {
                    src: "image/tu11.png",
                },
                {
                    src: "image/tu12.png",
                },
                {
                    src: "image/tu13.png",
                },
                {
                    src: "image/tu14.png",
                },
                {
                    src: "image/tu15.png",
                },
                {
                    src: "image/tu16.png",
                },
                {
                    src: "image/tu17.png",
                },
                {
                    src: "image/tu18.png",
                },
                {
                    src: "image/tu19.png",
                },
                {
                    src: "image/tu20.png",
                },
                {
                    src: "image/tu21.png",
                },
                {
                    src: "image/tu22.png",
                },
                {
                    src: "image/tu23.png",
                },
                {
                    src: "image/tu24.png",
                },
                {
                    src: "image/tu25.png",
                }
        ],
    },
    handleStart() {
        this.$refs.animator.start();
    },
    handlePause() {
        this.$refs.animator.pause();
    },
    handleResume() {
        this.$refs.animator.resume();
    },
    handleStop() {
        this.$refs.animator.stop();
    },
};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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.