@galacean/engine-toolkit-tween
v1.3.9
Published
An animation library for build tween animations
Downloads
98
Maintainers
Keywords
Readme
Tween
An animation library for build tween animations
Features
- easing: builtin easing and custom easing function;
- chain: can play several tween animations one after another;
- fillMode: support fillMode just like css-fillMode behaviour;
npm
The Tween
is published on npm with full typing support. To install, use:
npm install @galacean/engine-toolkit-tween
This will allow you to import tween entirely using:
import * as TWEEN from "@galacean/engine-toolkit-tween";
or individual classes using:
import { Tween } from "@galacean/engine-toolkit-tween";
demo
const tween = entity.addComponent<Tween<Vector3>>(Tween);
tween.target = entity.transform.position; // change position
tween.to = new Vector3(4, 0, 0);
tween.from = new Vector3(-4, 0, 0);
tween.delay = 1; // delay 1 second
tween.duration = 2; // 2 seconds
tween.loop = 3; // loop 3 times so it will animate 4 times
tween.easing = Easing.BackInOut; // or just use 'BackInOut' string
const tween2 = entity.addComponent<Tween<Color>>(Tween);
tween2.target = material.baseColor; // change color
tween2.to = new Color(0, 0, 1);
tween2.from = new Color(1, 0, 0);
tween2.easing = (a: number) => return a * a; // custom easing function
const tween3 = entity.addComponent<Tween<Vector3>>(Tween);
tween3.target = entity.transform.rotation; // change rotation
tween3.to = new Vector3(0, 0, 0);
tween3.from = new Vector3(90, 90, 180);
tween.chain(tween2, tween3).play(); // you can chain as many tween as you want. tween2 and tween3 will play at the same time when tween ended.
tween.play();
Links
License
The engine is released under the MIT license. See LICENSE file.