This project ports the amazing anime.js library into Lens Studio, and adds some convenience methods for interfacing with native Lens Studio objects.
Download anime.js.lso and drop it into your project to install it. It will show some examples by default.
Here's an example of a simple turntable animation:
var transform = script.getTransform()
anime({
targets: transform.getLocalRotation().toEulerAngles(),
y: Math.PI * 2,
loop: true,
easing: 'linear',
duration: 3,
update: anime.ls.updateLocalEuler(transform),
begin: function () {
print('begin')
},
complete: function () {
print('complete')
},
})
Here are the code examples included in the LSO.
- Lifecycle & rotation
- Color lerp
- Easings
- Stagger position
- Timeline & screen transforms
wait()utility functions
anime.js has great documentation, and most of what you need to know will be found there. https://animejs.com/documentation/
There are some extra properties and functions that are specific to the Lens Studio port, which can be found at the bottom of the anime.js script. These are documented with docstrings so you can see the required arguments and properties in the code hints (via vscode extension).
anime.ls.updateLocalPosition(transform): Generates an update handler for local position.
anime.ls.updateWorldPosition(transform): Generates an update handler for world position.
anime.ls.updateLocalEuler(transform): Generates an update handler for local euler rotation.
anime.ls.updateWorldEuler(transform): Generates an update handler for world euler rotation.
anime.ls.updateProp(target, propName): Generates an update handler that reassigns the vec3 so changes are applied.
A Promise polyfill is also included since it's required by anime.js.
We use anime.js in web projects, so it was already part of our workflow. Instead of needing to learn a completely new animation system (e.g. TweenManager), we opted to port anime.js. In general it's a more script-focused approach than the Tween.js implementation. We found it simpler to orchestrate a lot of animations in script, as opposed to components.
To illustrate, here's what one of our animation control scripts might look like, using anime.js and Promises. It's easy to understand, and easy to comment out large blocks for testing specific sections.
hideIntroInstructions()
.then(showTitleCard)
.then(showHandInstruction)
.then(waitForHandTracking)
.then(sprinkleConfetti)
.then(highFive)
.then(waitf(2))
.then(showLogo)
.then(function () { print('done!') })