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

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

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

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

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

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

Resume: 继续播放图片帧。

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>

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;
}

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();
    },
};

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/JS_animation