[英]A-Frame animations via JavaScript
我從A-Frame VR框架開始。 我有一個想要動畫的簡單盒子。
此框將是浮動的,當查看該框時,它將放大,單擊時將旋轉:
<a-box id="boxID" position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<!-- These animations will start when the box is looked at. -->
<a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation>
我想在上面用Javascript創建。 我從以下內容開始:
AFRAME.registerComponent('scale-on-interact', {
schema: {
to: {default: '2.5 2.5 2.5'}
},
init: function () {
var data = this.data;
},
update: function() {
var data = this.data;
console.log(data.color);
// MOUSE ENTER EVENT
this.el.addEventListener('mouseenter', function() {
console.log("enter");
this.setAttribute('to', data.to);
});
// CLICK EVENT
this.el.addEventListener('click', function() {
console.log("click");
});
// MOUSE LEAVE EVENT
this.el.addEventListener('mouseleave', function() {
console.log("leave");
});
}
});
我收到了日志,但是例如在鼠標輸入時,該框沒有擴大。 我也不知道,也找不到如何創建多個模式,因此我可以在鼠標輸入時創建一個“ to”屬性,在點擊時創建一個“ to”屬性。
首先, <a-animation>
和Animation Component都具有begin
和startEvents
屬性, startEvents
屬性指定實體上將自動觸發動畫的事件。 <a-animation begin="mouseenter">
或<a-entity animation__1="property: scale; to: 2 2 2; startEvents: click">
。
其次,有一個event-set
組件可以執行您想要的操作,設置屬性以響應事件。 <a-entity event-set__1="_event: mouseenter; scale: 2 2 2">
。
第三,在組件中,如果要設置比例,則應該setAttribute('scale', {x: 2, y: 2, z: 2})
,而不是to
。 此外,還要確保該組件已附加到您的實體<a-box id="boxID" scale-on-interact>
。
最后,如果您希望一個組件能夠具有多個實例,請在您的組件中設置multiple: true
。 然后,您可以使用__
分隔符設置多個組件: <a-box id="boxID" component__1="foo: 1; bar: 2" component__two="foo: 2; bar: 3">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.