aframe - 悬停时在框架实体中设置动画
问题描述
我在 AFRAME 元素/实体中制作动画时遇到问题。在下面的演示中,我设置了一个框,并在框顶部设置了一个文本实体,当我将鼠标悬停在框上时,该文本实体需要动画(放大),文本元素不会动画或显示。任何人都可以帮忙吗?
https://jsfiddle.net/0d6ymk21/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="camera" camera mouse-cursor look-controls>
<a-cursor fuse="true" color="blue"></a-cursor>
</a-entity>
<a-entity
id="#fernando"
text="color: black;value: Fernando;"
scale=".1 .1 .1"
position="2 1 -2"
></a-entity>
<a-box box position="1 0 -2" color="red" activate-name=""></a-box>
</a-scene>
</body>
</html>
-- JS:
AFRAME.registerComponent("activate-name", {
schema: {
default: ""
},
init: function() {
var data = this.data;
var el = this.el;
var fernando = document.querySelector("#fernando");
el.addEventListener("mouseenter", function() {
fernando.setAttribute("scale", "2 2 2");
});
}
});
解决方案
这里有两个问题:
1)如果您想使用 fernando 获取document.querySelector('#fernando')
- id需要fernando
代替#fernando
.
2) 组件声明 -activate-name
在这种情况下 - 需要在组件附加到 html之前完成。<script>
你可以简单地在场景之前把它贴上标签
<script>
AFRAME.registerComponent('foo', ...
</script>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
更好的是 - 将其保存在单独的.js
文件中并将其包含在<head>
. 在这里拉小提琴。
这是必要的,因为 jsfiddle 在加载窗口时执行代码部分。
推荐阅读
- python - 将整个列表写入 Python 中的文本文件
- mysql - 运行查询时 5 秒后运行 MySQL 命令
- javascript - 使用 javascript 在表格中显示 csv 文件
- python - Python中的线性回归系数
- powershell - 有没有一种简单的方法可以让 Powershell 始终显示实际值?
- python - 将值转换为数据框或特定列中阈值的虚拟变量
- python - python getopt - 第二个返回的列表是什么?
- node.js - 如何关闭精简服务器
- c - 如何在实现 shell 的程序中传递参数值
- html - html/css 将文本与新行中的图标对齐