uniapp nvue中使用svga动画文件

1. 下载插件  https://ext.dcloud.net.cn/plugin?id=1711

2.代码可以用网络的或者本地的  

关键代码 var iconPath = plus.io.convertLocalFileSystemURL(item)

?
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
    <view class="">
        {{filePath}}
        <tx-svga ref="maxTxAnimation"
                    class="maxTxAnimation"
                    @statechange="onProgress"
                    :style="{height:windowHeight}"
                 
        >
        </tx-svga>
        <view class="foot">
            <view class="circleBoxAll">
                <view class="circleBox" @click="playAnimation()">
                    <text class="circleIco phone"></text>
                    <text class="hint">播放动画</text>
                </view>
                <view class="circleBox" @click="pauseAnimation()">
                    <text class="circleIco phone"></text>
                    <text class="hint">暂停动画</text>
                </view>
                <view class="circleBox" @click="resumeAnimation()">
                    <text class="circleIco phone"></text>
                    <text class="hint">继续动画</text>
                </view>
            </view>
        </view>
    </view>
     
 
</template>
 
<script>
 
    const svgaModel = uni.requireNativePlugin('tx-svgamodel')
    export default {
        data() {
            return {
                filePath:""
            }
        },
        onLoad(params) {
            this.windowHeight = uni.getSystemInfoSync().windowHeight;
            var str='/static/angel.svga'
            this.filePath = plus.io.convertLocalFileSystemURL(str)
         
        },
        onReady() {
             var me = this;
             this.play();
        },
     
        onNavigationBarButtonTap() {
            this.$refs.maxTxAnimation.cancelAnimation();
            uni.navigateBack({
                delta: 1,
                animationType: 'pop-out',
                animationDuration: 200
            });
        },
         
        methods: {
            play(){
 
            },
             
            onPush(e){
                var msg = JSON.stringify(e);
                 
            },
            playAnimation(){
                // var vArray = ['http://pgzxip.aiteds.com/data/upload/upload/nanwu.svga','http://www.biggold.net.cn/kingset.svga','http://www.biggold.net.cn/angel.svga','http://www.biggold.net.cn/loading-1.svga','http://www.biggold.net.cn/loading.svga','http://www.biggold.net.cn/show.svga','http://www.biggold.net.cn/story.svga','http://www.biggold.net.cn/TwitterHeart.svga'];
                var vArray = ['/static/angel.svga','/static/kingset.svga'];
                var item = vArray[Math.floor(Math.random()*vArray.length)];
                console.log(item);
                var iconPath = plus.io.convertLocalFileSystemURL(item)
                this.$refs.maxTxAnimation.playAnimation({"filePath":iconPath});
                // svgaModel.downloadUrls(item,result=>{
                //  console.log(result);
                //  this.$refs.maxTxAnimation.playAnimation({"filePath":result.filePath});
                // });
                 
                 
            },
             
            pauseAnimation(){
                this.$refs.maxTxAnimation.pauseAnimation();
             
            },
            resumeAnimation(){
                this.$refs.maxTxAnimation.resumeAnimation();
            },
            onProgress(e) {
                var result = e.detail;
                console.log(result);
            }
        }
    }
</script>
 
<style>
     
.maxTxPusher{
    width:750upx;
    background-color:#111111;
    position: fixed;
    top: 0;
    right: 0;
}
.foot{
    width: 710upx;
    position: fixed;
    bottom:0;
    left: 0;
    margin:20upx;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-direction: column;
}
 
.circleBoxAll{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
 
.circleBox{
    width: 200upx;
    padding:30upx 0;
    margin:10upx;
    align-items: center;
    flex-direction: column;
}
 
.circleIco{
    font-size:30upx;
    width:100upx;
    height:100upx;
    line-height:100upx;
    border-radius: 500px;
    border-style: solid;
    border-width: 1px;
    border-color:#FFFFFF;
    text-align: center;
    font-family:iconfont;
    color: #FFFFFF;
    font-size:50upx;
}
.phone{
    background-color:#c5433a;
    border-style: solid;
    border-width: 1px;
    border-color:#c5433a;
}
.hint{
    font-size:30upx;
    color: #FF0000;
    padding-top:20upx;
}
 
</style>

　　

 

posted @   福超  阅读(2738)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示