Apply animation transformations to hotspots.
configuration.json
{
"story":
{
"uid": "hotspots-animated",
"name": "Hotspots with animation",
"slug": "hotspots-animated",
"description": "This is a sample project with animation applied on hotspots",
"default": "scene-0",
"scenes":
[
{
"uid": "scene-0",
"name": "First scene",
"slug": "first-scene",
"description": "This is the first scene",
"media":
{
"uid": "media-0",
"type": "image",
"source":
{
"format": "equi",
"url": "01-forest.jpg"
}
},
"hotspots":
[
{
"uid": "hotspot-0",
"name": "White rabbit",
"facingCenter": true,
"interactive": false,
"transform":
{
"position":
{
"radius": 300,
"theta": 0
},
"rotation":
{
"x": 0,
"y": 0
},
"scale":
{
"x": 0.6,
"y": 0.6
}
},
"material":
{
"image": "rabbit-34013.svg",
"transparent": true
},
"geometry":
{
"type": "plane",
"options":
{
"width": 72,
"height": 50
}
},
"animation":
{
"enabled": true,
"loop": false,
"random": false,
"autoPlay": true,
"tracks": [ "hotspot-0-track-0", "hotspot-0-track-1"]
}
}
]
}
]
},
"hotspots":
{
"tracks":
[
{
"uid": "hotspot-0-track-0",
"name": "Animation track #0",
"description": "First animation track",
"smooth": true,
"keyframes":
[
{
"time": 4000,
"data": {
"position": { "radius": 333, "theta": 10, "phi": -5 }
}
},
{
"time": 5000,
"data": {
"position": { "radius": 316, "theta": 8, "phi": -6 }
}
},
{
"time": 8000,
"data": {
"position": { "radius": 266, "theta": 3, "phi": -8 }
}
},
{
"time": 9000,
"data": {
"position": { "radius": 250, "theta": 5, "phi": -10 }
}
},
{
"time": 12000,
"data": {
"position": { "radius": 200, "theta": 6, "phi": -15 }
}
}
]
},
{
"uid": "hotspot-0-track-1",
"name": "Animation track #1",
"description": "Second animation track",
"smooth": true,
"keyframes":
[
{
"time": 5000,
"data": {
"position": { "radius": 200, "theta": 90, "phi": -15 }
}
},
{
"time": 6000,
"data": {
"position": { "theta": 110, "phi": -10 }
}
},
{
"time": 7000,
"data": {
"position": { "theta": 130, "phi": -15 }
}
},
{
"time": 10000,
"data": {
"position": { "theta": 180 }
}
},
{
"time": 15000,
"data": {
"position": { "theta": -90 }
}
},
{
"time": 20000,
"data": {
"position": { "theta": 6 }
}
}
]
}
]
}
}