使用多张图制作gif动画图

<template> 
 <view id="img" style="text-align: center;"> 
     <image class='img'  src='../../static/img/1.jpg'/>
     <view  @click="gsetimg"><button  style="width: 100px;height: 40px;background-color: #0A98D5;color: #FFFFFF;line-height: 40px;font-size: 14px;" type="default">开始制作gif动画</button></view>
 </view>
 
</template>
<script>
  
  export  default{
    data(){ 
     
        return{
          gifimg:[
            {'id': 1,'img':'../../static/img/1.jpg'},
            {'id': 2,'img':'../../static/img/2.jpg' },
            {'id': 3,'img':'../../static/img/3.jpg' },
            {'id': 4,'img':'../../static/img/4.jpg' },
            {'id': 5,'img':'../../static/img/5.jpg' },
            {'id': 6,'img':'../../static/img/6.jpg' },
            {'id': 7,'img':'../../static/img/7.jpg' },
            {'id': 8,'img':'../../static/img/8.jpg' }
            
          ],
          picsrc:"../../static/img/1.jpg" ,
        }
       
    }, 
     onLoad() {
       //this.gsetimg()
       // var imgsrc=this.gifimg;
       // console.log(imgsrc)
     },
    methods:{ 
        gsetimg(){
           var  i=0;
           const   that=this;
           setInterval(function(){ 
              var imgsrc=that.gifimg[i].img;
              console.log(imgsrc);
               i++; 
             document.getElementById("img").innerHTML="<image class='img'  src='"+imgsrc+"'/>";
             if(i>=8){
               i=0;
             }
           },200);
        }
      
    }
  }
  
</script> 
<style>
  ss{
    background-size: 100;
  }
</style>

效果：

点击开始制作：