Fatina v3.1.3

Description

• Add Transition Syntax : #77
• Add Async / Await Helpers : #76
• Update a bit documentation
• Add a new dev mode with esbuild watch mode

Demo

const obj = { x: 0 }

// Create a reusable transition, no need to keep a reference to the object to tween
const transition = Fatina.transition(obj)

// Creating a UI Animation/Transition becomes one-liners
transition.to({ y: 1 }, 50)

And here is a demo of this new Transition Syntax with vue3

Changelog

Full Changelog: v3.1.0...v3.1.3

Fatina v3.1.0

Description

• Update dependencies (typescript, ...)
• Improve fatina build process
  • Replaced webpack by esbuild
  • Replaced tslint by eslint
  • Expose two version of the lib:
    • fatina.cjs.js for NodeJS
    • fatina.esm.js for Browser and Deno

Deno Compatibility

With this new ESM Build, it means Fatina also get compatible with Deno

import Fatina from 'https://cdn.skypack.dev/fatina'

Fatina.init(true);

// create a dummy object
var obj = { a: 0, b: 0, position: {x:0, y:0}};

// create a tween (api: https://kefniark.github.io/Fatina/api/tween/)
Fatina.tween(obj.position)
    .to({x: 10, y: 10}, 4)
    .onStart(() => console.log("My tween is starting !"))
    .onUpdate((dt: number, progress: number) => console.log(`My tween is updating (+${dt}ms, ${progress*100}%)`))
    .onComplete(() => console.log("My tween is finished !"))
    .start();

// simulate frame update
for (var i = 0; i < 5; i++) {
    Fatina.update(1);
}

Breaking change

Drop the default export in browser usage.

<script type="text/javascript" src="fatina.min.js"></script>

Now you have to use it as a ESM module, but you can achieve the same behavior by binding the library on the global variable yourself

<script type="module">
    import Fatina from './fatina.esm.js'
    window.Fatina = Fatina;
</script>

Full Changelog: v3.0.5...v3.1.0

Fatina v3.0.5 - Maintenance

Description

• update dev dependencies
• modified the typescript declaration output, now exported with unprocessed js code in /build/code (untracked folder)
  • makes it easier to reuse from other webpack project
  • can change the path of interface declarations file by a shorter and simpler import

import Fatina, { ITween, ISequence } from 'fatina'

• UMD output unmodified

Fatina v3.0

Description

New Feature / Improvements:

• Display version number in browser
  
• Embed version number in build file as comment
  
• Add npm run dev to easily test samples and make dev easier
• update .yoyo() to handle infinite loop (.yoyo(-1))
• Add presets (demo):
  • Wobble
  • Scale
  • Sonar
  • Pulse
  • Shake

API change (breaking change):

• Now use export default to have better auto-completion and support for ESM module & Typescript

// TS / ESM import
import * as Fatina from 'fatina';
// become simpler =>
import Fatina from 'fatina';

// Node require
var Fatina = require('fatina');
// become slightly longer =>
var Fatina = require('fatina').default;

Bug Fixes:

• fix .d.ts declaration files

Enjoy

And as usual check the website for more information

Fatina v2.1

Description

• Change tween creation API, properties are not required anymore.

Before

Fatina.tween(sprite, ['x', 'y']).to({ x: 12, y:25 }, 0.5).start();

After

Fatina.tween(sprite).to({ x: 12, y:25 }, 0.5).start();

• Improved event memory management (less array allocation)
• Build size improvement ~10%

Fatina v2.0.1

Description

New Feature / Improvements:

• Added an option to smooth high deltatime: #21
• Reduce even more the lib size (~16.5KB)
• Update dev-dependencies
• Update linting rules (use eslint rules)
• Refactor a bit the repo to make the code looks a bit cleaner

API change (breaking change):

• After few complains, decided to change the API from pascalCase to camelcase.
  Make the switch with tween.js or tina.js easier and the code shouldn't be complicated to update.

Fatina.tween({x:0}, ['x']).to({x:100}, 10).start();
TWEEN.Tween({x:0}, ['x']).to({x:100}, 10).start();

• Decided to replaced few method by getter (example: .IsRunning() => .isRunning)

Bug Fixes:

• Fix an issue with UMD module and Webpack 4, the minified build was not working in node
• Fix an issue with cascaded tweens

Where is 2.0.0 ?
It was close to be publish (was published on npm@beta) but a small issue with the declaration file pushed me to bump ^^

Fatina v1.0

Stable Release

Here we go, after months of tests, It's finally time to stop working on alpha & beta and release Fatina.

Description

No real API breaking change since the last version:

• New syntax for Sequence Initialization
• Change target to ES6 (browser support: https://kangax.github.io/compat-table/es6/)
• Update to Webpack 4 and Typescript 2.7
• Update TSLint config (strict mode)
• Cleanup code (the minified version is now under 20KB)
• Small code coverage improvement (now ~99.5% with more than 360 tests)
• Performance Improvement

Alpha Release v0.3.1

Description

This version was mostly made to be able to implement plugins like Animator

• Add a basic plugin system
• Update to Webpack 3 and Typescript 2.4 (cleanup package.json and some usused file)
• Update TSLint config (forced to change a bit the code ^^)
• Add SetLog(Log) and SetSafe(boolean) for debug behavior
• Add IsIdle()
• Refactor easing enums with new typescript 2.4 feature
• Cleanup default()
• Update Skip() to be able to set final value
• Added a Recycle() feature (not fully exposed yet, need more testing first)
• Work around Reset and Yoyo to fix some issues
  

Alpha Release v0.2.0

Version 0.2.x

Here we go the version 0.2
Still an alpha release but now the structure is fine, solid and performant enough.
I will focus on adding new tween features and start the plugin system soon.

Description

• Add Travis CI & Coveralls
• Expose 3 new method to Fatina:
  • Fatina.Delay(duration)
  • Fatina.SetTimeout(fn, duration) : This is just a simple helper around Fatina.Delay
  • Fatina.SetInterval(fn, duration) : This is just a simple helper around Fatina.Delay
• Add a new callback OnRestart, this event is emitted when a tween or a sequence loop
• Add three new helpers (sequence, tween, ticker, ...)
  • IsRunning(): boolean
  • IsFinished(): boolean
  • IsPaused(): boolean
• Update the class Delay
  • Have all the common callback OnStart, OnUpdate, OnKilled, OnComplete, OnRestart
  • Are now loopable and timescalable
• Implement Tween.SetSteps(n) to quantize the values of the tween
• Implement Tween.Reverse()
• Implement Tween.Yoyo(times: number) (sometimes also named pingpong)
  • this reverse the tween n times when it reach the end
  • example:
    • yoyo(1): A -> B -> A
    • yoyo(3): A -> B -> A -> B -> A
    • yoyo(10): A -> B -> A -> B -> A -> B -> A -> B -> A -> B -> A -> B
• Increase the code coverage https://coveralls.io/builds/12026586

Alpha Release v0.1.3

Description

• Properly fix the description file build/fatina.d.ts (need to change webpack config)
• Fix few text (comments / readme / url)
• Add a .Count property on ISequence
• Improve .Kill(): It was spawning error in some circumstance
• Slightly improve code coverage / tests (95 -> 97%)
• Expose EasingType enum for Typescripts users :

Fatina.Tween({}, [])
   .To({}, 25)
   .SetEasing(Fatina.Easing.InQuad))