reroad-test/2020-ryusei/aframe-master/examples/animation/plane-reveals/index.html at f15046a16bd49e11c3cfc9205c2321558810466c

Fork: 0

SKIP / reroad-test

Find file

Newer

Older

reroad-test / 2020-ryusei / aframe-master / examples / animation / plane-reveals / index.html

ryusei on 22 Oct 2020 1 KB パノラマ表示

Raw Blame History

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animations: Plane Reveals</title>
    <meta name="description" content="Animations: Plane Reveals - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-mixin id="plane" geometry="height: 1; width: 4"></a-mixin>
        <img id="background" src="../../assets/img/gray-gradient.jpg">
      </a-assets>

      <!-- Series of planes that use pivot, position, and animated scales to reveal themselves. -->
      <a-entity position="-2 -1 -7" rotation="0 35 0">
        <a-plane id="test" mixin="plane" position="0 6 0" color="#F16745" scale="1 0 1"
                 animation="property: object3D.scale.y; to: 1; dur: 750; delay: 500"></a-plane>

        <a-plane mixin="plane" position="0 4 0" color="#7BC8A4" scale="0 1 1"
                 animation="property: scale; to: 1 1 1; dur: 750; delay: 500">
        </a-plane>

        <a-plane mixin="plane" position="0 2 0" color="#4CC3D9" scale="0 0 0"
          animation__1="property: scale; to: 1 0.05 1; dur: 500; delay: 500"
          animation__2="property: scale; from: 1 0.05 1; to: 1 1 1; dur: 250; delay: 1000">
        </a-plane>

        <a-plane mixin="plane" color="#EF2D5E" rotation="90 0 0"
                 animation="property: rotation; from: 90 0 0; to: 0 0 0; dur: 750; delay: 500">
        </a-plane>
      </a-entity>

      <a-sky src="#background"></a-sky>
      <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#fff"></a-light>
    </a-scene>
  </body>
</html>