时间戳

首页 > 解决方案 > 控制 a-frame-alongpath-component 上的动画

animation - 控制 a-frame-alongpath-component 上的动画

问题描述

问题是我想在开始时禁用的自动播放动画。

我想为什么不开始这句话

AFRAME.registerComponent('track1', { <

代码变得混乱，我试图找出#track1 上的“删除”和“播放”两个函数。

单击“动画按钮”可在#track1 上设置“播放”功能。

aframe-along-component.js 中的代码'triggers:a-curve-point' 总是触发动画，所以很快就会像#track1 那样建立曲线。

AFRAME.registerComponent('alongpath', {

//dependencies: ['curve'],

schema: {
    curve: {default: ''},
    triggers: {default: 'a-curve-point'},
    triggerRadius: {type: 'number', default: 0.01},
    dur: {default: 1000},
    delay: {default: 0},
    loop: {default: false},
    rotate: {default: false},
    resetonplay: {default:true}
},

init: function () { <

故障的链接

标签： animationaframe

解决方案

虽然最好alongpath使用一些流控制来扩展组件，但您可以在没有它的情况下实现play//功能stop。reset

  • 动态添加组件以模拟play()

  • 调用它的.reset()方法来重置动画：

    AFRAME.registerComponent("track1", {
  init: function() {
    var box = document.querySelector("a-box");
    document.querySelector(".enter").addEventListener("click", e => {

      if (box.components.alongpath) {
        // if the component is attached - reset
        box.components.alongpath.reset();
      } else {
        // otherwise attach it
        box.setAttribute("alongpath", "curve", "#track1");
      }
    });
  }
});

在这里查看（单击鱼以查看来源）。

推荐阅读