使用多张图制作gif动画图

àì夳堔傛蜴生んèń 2023-01-15 11:27 175阅读 0赞

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

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

点击开始制作：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/1f186fd9ee6e467b9c114a2b9df7b423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/341d9824de184ba6bd3696ae571b2e8b.png