Vue.js 中的 2D 角色动画，setTimeout 的问题答案

【问题标题】：An animation of 2D character in Vue.js, problem with setTimeoutVue.js 中的 2D 角色动画，setTimeout 的问题
【发布时间】：2021-02-09 18:13:23
【问题描述】：

我找到了一种在 Vue.js 中创建动画的新方法 - 2D 角色here is a picture 进度：您将在每个特定时间移动该图片中的每个角色。解决方案：你会看到角色在移动。

我创造了自己的角色。我想在numTotal > 0 之后更改这个角色的动画。正是我想要做的：我的主要动画被称为idle，当numTotal > 0想要将动画更改为angry，2秒后动画应该切换回我的动画idle

Vue.js

<div class="character" :style="inlineStyle"></div>

数据

data() {
      return {     
          animationDelay: 2000,
          angry: 'animation-name: angry',
          idle: 'animation-name: idle',
          currentAnimation: null,
          afterAnimation: null,
          animation: null,
      }
    },

计算

computed: {
        inlineStyle() {
            if (this.numTotal > 0) {

                this.updateAnimation(this.animation, this.angry, this.idle)
                return this.animation


            } else {
                this.animation = this.idle
                return this.animation
            }
        }
    },

方法

    methods: {
        updateAnimation(animation, currentAnimation, afterAnimation){
            animation = currentAnimation

            setTimeout(() => {
                animation = afterAnimation
            }, 500)
        },

风格

.character {
    background-image: url("http://huwe_final.test/images/character-animation.png?7b1c86288eb21d80e5981e0693e08d5e");
    position: absolute;
    z-index: 100;
    width: 93%;
    height: 747px;
    margin-left: 3px;;
    animation-iteration-count: infinite;
    animation-timing-function: steps(24);
    animation-duration: 1.2s;
}
@keyframes idle {
    from { background-position: 0 0; }
    to { background-position: -11782px 0; }
}
@keyframes angry {
    from { background-position: 0 745px; }
    to { background-position: -11782px 745px; }
}

我遇到的问题是我的setTimeout 无法正常工作，即使我在控制台动画中写入 - console.log(animation)，我看到 animation 已更改为 angry，但在网站上动画是还是idle

有谁知道如何修复setTimeout？

感谢您的帮助！

【问题讨论】：

为什么不在超时时间里设置this.animation？你可以创建一个stackoverflow.com/help/minimal-reproducible-example 吗？
我将问题更新为更简单的方法。我将this.animation 放入超时内，因为我希望在 500 毫秒后将动画从angry 更改为idle。这是我唯一知道如何切换动画的想法。
但是你只写“动画”而不是“this.aniation”这是我的问题，在超时之外你使用“this.animation”
现在我明白了。我已将它到处更改为this.animation 并改为计算我调用没有animation 的方法。就是这样，我的代码在方法部分中的样子：updateAnimation(currentAnimation, afterAnimation){ this.animation = currentAnimation setTimeout(() => { this.animation = afterAnimation }, 500) console.log(this.animation) } 但它仍然无法正常工作。这次只是把动画改成了angry并没有切换回来

标签： javascript html css laravel vue.js

【解决方案1】：

我不确定，你的 sn-p 有什么问题，因为你删除的越来越多，我看不到任何错误。

但这应该绝对有效。请参阅我的最小示例：

<html>

<head>
    <script src="https://unpkg.com/vue"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue !important;
        }

        .green {
            background-color: green !important;
        }
    </style>
</head>

<body>
    <div id="example">
        <div id="bar" v-bind:class="animation">
            {{ hello }}
        </div>
    </div>
    <script>
        new Vue({
            el: '#example',
            data() {
                return {
                    hello: "background-div",
                    animation: "green"
                }
            },
            methods: {
                gainAttention(newVal) {

                    let last = this.animation;
                    this.animation = newVal;

                    setTimeout(() => {
                        this.animation = last;
                    }, 1000);

                }
            },
            mounted() {

                setTimeout(() => {
                    this.gainAttention("red");
                }, 3000);

                setTimeout(() => {
                    this.gainAttention("blue");
                }, 5000)

            }
        })
    </script>
</body>

</html>

如果您发布动画/css，我会将它们放在一起。

【讨论】：

所以我更新了代码（我试图让它尽可能简单，但是有很多重要的部分）。如果你能以某种方式把它放在一起，那就太好了。无论如何，感谢示例代码。我会用你的例子来试试。
http://huwe_final.test/images/character-animation.png?7b1c86288eb21d80e5981e0693e08d5e 未加载
这里是照片的链接：drive.google.com/file/d/13ks7BO8PHufgkBaKlMt_0RAPbqLlGpUW/…
欧 :D 你对如何调整 CSS 有什么具体的想法吗？也许我们不必使用我的图片，如果我们使用例如background-color 就可以了，它是否会产生与使用我的图片相同的结果？
终于成功了。我用了你用的 - 两次 setTimeout。太好了，谢谢！但现在我有一个不同的问题。第一个 setTimeout 设置了时间500，第二个 setTimeout 设置了时间1750（动画持续时间的原因）。动画第一次完成；看起来很棒，动画还在继续，但似乎它在设置的不同时间工作。几秒钟后，动画每隔一秒切换一次。我不明白它为什么这样做。请问你能帮忙吗？