https://github.com/qwtel/rxjs-create-tween
Create observables that sample from a easing function on every animation frame.
https://github.com/qwtel/rxjs-create-tween
animation animation-frame easing-functions observable robert-penner rxjs tween
Last synced: 3 months ago
JSON representation
Create observables that sample from a easing function on every animation frame.
- Host: GitHub
- URL: https://github.com/qwtel/rxjs-create-tween
- Owner: qwtel
- License: mit
- Created: 2017-12-08T15:55:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:14:34.000Z (over 2 years ago)
- Last Synced: 2025-02-28T17:49:18.526Z (4 months ago)
- Topics: animation, animation-frame, easing-functions, observable, robert-penner, rxjs, tween
- Language: JavaScript
- Homepage:
- Size: 596 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RxJS Create Tween
[](https://travis-ci.org/qwtel/rxjs-create-tween)
Creates an observable that emits samples from an easing function on every animation frame
for a fixed duration.
Supports arbitrary easing functions. Works well with [`tween-functions`](https://www.npmjs.com/package/tween-functions).
## Example
```js
import { createTween } from 'rxjs-create-tween';
import { easeOutSine } from 'tween-functions';
click$
.switchMap(() => {
const startX = 0; // px
const endX = 300; // px
const duration = 250; // ms
return createTween(easeOutSine, startX, endX, duration);
})
.subscribe({
// emits a value on every animation frame
next: (x) => {
// guaranteed to start with `startX` and end with `endX`.
el.style.transform = `translateX(${x})`;
},
// completes 1 frame after the last value was emitted
complete: () => {
el.style.transform = '';
el.classList.add('completed');
},
});
```
## Source
```js
export function createTween(easingFunction, b, c, d, s) {
return Observable.create(function(observer) {
let startTime;
let id = requestAnimationFrame(function sample(time) {
startTime = startTime || time;
const t = time - startTime;
if (t < d) {
observer.next(easingFunction(t, b, c, d, s));
id = requestAnimationFrame(sample);
} else {
observer.next(easingFunction(d, b, c, d, s));
id = requestAnimationFrame(function() {
return observer.complete();
});
}
});
return function() {
if (id) {
cancelAnimationFrame(id);
}
};
});
}
export default createTween;
```