更新记录

1.0.12（2024-10-14）

• 修复android无限循环

1.0.11（2024-10-11）

• fix reset1

1.0.10（2024-10-11）

• 修复云打包问题

平台兼容性

sn-uts-apng

sn-uts-apng组件是uts组件，实现了apng组件。可用于代替gif，以及个性化tabbar按钮等。

注意

• sn-uts-apng支持app-nvue、uni-app x的uvue
• App-Android平台要求Android5（API Leavel 21）及以上系统
• App-iOS平台要求iOS11及以上版本系统
• 关于uvue使用打包编译报错，可能是编译问题，请使用3.94或最新hbx

属性说明

代码示例 - nvue

<template>
    <view>
        <sn-uts-apng ref="apng" style="width: 600rpx; height: 400rpx" src="/static/apng/elephant_apng@2x.apng" :auto-play="false" :loop-count="1" @playDone="onPlayDone" />
        <button type="default" @click="play">播放</button>
        <button type="default" @click="stop">停止</button>
        <button type="default" @click="reset">重置</button>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        play() {
            this.$refs['apng'].play();
        },
        stop() {
            this.$refs['apng'].stop();
        },
        reset() {
            // 为了兼容uvue，暂时改为reset1
            this.$refs['apng'].reset1();
        },
        onPlayDone() {
            console.log('play done');
        }
    }
};
</script>

<style></style>

代码示例 - uvue

<template>
    <view>
        <sn-uts-apng ref="icon" style="width: 200rpx; height: 200rpx" :auto-play="false" :loop-count="1"
            src="/static/tab1.png" @click="clickApng" />
    </view>
</template>

<script>
    // 兼容android、ios，不需要import了
    // import SnUtsApngElement from 'uts.sdk.modules.snUtsApng.SnUtsApngElement'
    export default {
        data() {
            return {
                title: 'Hello uvue'
            }
        },
        onLoad() {

        },
        methods: {
            clickApng() {
                var icon = this.$refs['icon'] as SnUtsApngElement
                icon.reset1()
                icon.play()
            }
        }
    }
</script>

apng相关工具推荐

• apng在线合成
• mp4转apng