Skip to content

tweening example

Jump to bottom
awe.media edited this page Oct 12, 2016 · 1 revision

To animate a POI or projection update() the object and specify data.animation parameters.

  • duration [seconds]
  • persist [boolean]
  • repeat [integer] or Infinity
  • easing [string] check TWEEN.js library for available easing methods. Use CamelCase.

The animation will tween from the current position / rotation / scale to the one specified in update(). If repeat is different from 0 then when the end state is reached the start state will be reapplied and animation will play once again.
If persist is set to true the object will remain in the end state at the end of the last repeat cycle persist: true and repeat: Infinity do not make sense, the object will never persist in the end state.

  awe.pois.add({ 
    id: 'center', 
    position: { x: 0, y: 0, z: 0 }
  });
  awe.projections.add({ 
    id: 'center', 
    geometry: {
      shape:'torusknot',
      radius: 35,
      tube: 5,
      q: 10,
      p: 6
    },
    material:{ 
      type: 'phong',
      color: 0xc04d12
    },
    position: { x: 0, y: 0, z: 0 },
    rotation: { x: 0, y: 0, z: 0 }
  }, { poi_id: 'center' });
  
  awe.projections.update({
    data: {
      rotation: {
        x: 0,
        y: 0,
        z: 360
      },
      position: {
        x: 10,
        y: 100,
        z: 50
      },
      scale: {
        x: 2,
        y: 2,
        z: 2
      },
      animation: {
        duration: 5,
        persist: 1,
        repeat: 3,
        easing: 'BounceInOut'
      }
    },
    where: {
      id: 'center'
    }
  });

To stop an animation midway:

awe.animations.stop() // stops all animations
awe.animations.stop({object_type:'projection', object_id:'center'}) // stops an animation for a specific object
awe.animations.stop([{object_type:'projection', object_id:'center'},{object_type:'projection', object_id:'left'}]) // stops an animation for a list of objects
Clone this wiki locally