Bezier Easing

author:
Rodrigo Lopez
description:
customizable easing curve tween engines
compatible:
v2.3
tag:
tween, easing, transition, bezier
homepage:
https://gist.github.com/roipeker/4d8b4e5e3550bd170fdedbd20ff65d10

Overview

Easing transition compatible with Staring's Tween engine and Greensock's. Works like CSS's cubic-bezier.

You can create you own custom easing curves here.

Demo:

// option 1, register by name
Transitions.register("sharp", BezierEase.config(0.4,0,0.6,1));
Starling.juggler.tween( obj, 1, {y: 400, transition: "sharp" });
 
// option 2, use directly.
Starling.juggler.tween( obj, 1, {y: 400, transitionFunc: BezierEase.config(0,0,0.2,1) });

Changelog

  • 2018/04/23 21:57: First public version

Source Code

References Curves:

Google Material transitions standard (0.4,0,0.2,1) deceleration (0,0,0.2,1) acceleration (0.4,0,1,1) sharp (0.4,0,0.6,1)

CSS Transitions linear (0,0,1,1) ease (0.25, 0.1, 0.25, 1.0) ease-in (0.42, 0, 1.0, 1.0) ease-out (0, 0, 0.58, 1.0) ease-in-out (0.42, 0, 0.58, 1.0)

%gist(4d8b4e5e3550bd170fdedbd20ff65d10)%

User Comments

Feel free to edit this part of the page if you want to add information that's lacking in the above description.
Questions are better asked in the forum, though.

  extensions/bezier_easing.txt · Last modified: 2018/06/19 01:19 by 177.180.106.92
 
Powered by DokuWiki