Vue.js 中的 2D 角色动画，setTimeout 的问题
Posted
技术标签:
【中文标题】Vue.js 中的 2D 角色动画，setTimeout 的问题【英文标题】：An animation of 2D character in Vue.js, problem with 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？你可以创建一个***.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并没有切换回来
【参考方案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（动画持续时间的原因）。动画第一次完成；看起来很棒，动画还在继续，但似乎它在设置的不同时间工作。几秒钟后，动画每隔一秒切换一次。我不明白它为什么这样做。请问你能帮忙吗？以上是关于Vue.js 中的 2D 角色动画，setTimeout 的问题的主要内容，如果未能解决你的问题，请参考以下文章
Unity2D游戏角色动画教程-使用Photoshop创建2D游戏角色素材
如何使用新的 Unity4.3 2D 框架正确翻转 2D 角色？ （动画期间游戏对象的旋转）