vue、js简单方法让静态图片实现动画效果

vue、js简单方法让多张静态图片实现动画效果

m0_57267951

1217人浏览 · 2023-03-22 13:35:53

m0_57267951 · 2023-03-22 13:35:53 发布

前提条件:有按照顺序命名好的静态图片
以我的项目为例

图片命名的公共部分是1_000,此部分可以随意命名，后面依次是从0-74(和script结合起来看)

vue

具体代码

template

 <div class="wrapper">
     <div class="anim">        
       <img :src="payImg" alt="" class="img">
     </div>
  </div>

script

export default {
    data() {
        return {
            payImg:'../../static/1_0000.png',
        }
    },
     mounted() {
          this.start()
    },
    methods: {
        start() {
            let _this = this;
            let n = 0;   
            function changeImg() {
                _this.payImg ="../../static/1_000" + n + ".png";
                n = n + 1;
                if (n > 74) {                 
                    clearInterval(timer);	 //清除定时器
                }
            }
            let timer = setInterval(changeImg, 40);
        }
    }
}

JS

具体代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>逐帧动画demo</title>
    <style type="text/css">
        .anim {
            width: 1136px;
            height: 640px;
            margin: auto;
            margin-top: 100px;
            border: 3px solid red;

        }

        img {
            width: 1136px;
            height: 640px;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="anim">
            <img src="./img/1_0000.png" alt="" class="img">
        </div>
    </div>

    <script>
        var imgUrl = document.querySelector(".img");
        let n = 0;
        function changeImg() {
            imgUrl.src = "./img/1_000" + n + ".png";
            n = n + 1;
            if (n > 74) {
                clearInterval(timer);	//停止
            }
        }
        let timer = setInterval(changeImg, 40);

    </script>

</body>

</html>

最终实现效果

逐帧动画实现效果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^