1- # Easing & Timing Functions
1+ <h1 align =center >Easing & Timing Functions</h1 >
2+ <div align =" center " ><pre >composer require smnandre/easing-functions</pre ></div >
3+ <div align =" center " >
24
35[ ![ PHP Version] ( https://img.shields.io/badge/%C2%A0php-%3E%3D%208.3-777BB4.svg?logo=php&logoColor=white )] ( https://github.com/smnandre/easing-functions/blob/main/composer.json )
46[ ![ CI] ( https://github.com/smnandre/easing-functions/actions/workflows/CI.yaml/badge.svg )] ( https://github.com/smnandre/easing-functions/actions )
57[ ![ Release] ( https://img.shields.io/github/v/release/smnandre/easing-functions )] ( https://github.com/smnandre/easing-functions/releases )
68[ ![ License] ( https://img.shields.io/github/license/smnandre/easing-functions?color=cc67ff )] ( https://github.com/smnandre/easing-functions/blob/main/LICENSE )
79[ ![ Codecov] ( https://codecov.io/gh/smnandre/easing-functions/graph/badge.svg?token=RC8Z6F4SPC )] ( https://codecov.io/gh/smnandre/easing-functions )
810
11+ </div >
912
13+ ---
14+
15+ ** EasingFunctions** is a ** PHP library** that provides easing functions for animations, transitions, etc/
16+
17+ | x | In | InOut | Out |
18+ | -------| :--------------------------------------------------------:| :-----------------------------------------------------------------:| :-----------------------------------------------------------:|
19+ | Cubic | ![ Ease In Cubic] ( img/easeInCubic.svg ) <br > ` easeCubicIn ` | ![ Ease InOut Cubic] ( img/easeInOutCubic.svg ) <br > ` easeCubicInOut ` | ![ Ease Out Cubic] ( img/easeOutCubic.svg ) <br > ` easeCubicOut ` |
20+ | Quart | ![ Ease In Quart] ( img/easeInQuart.svg ) <br > ` easeQuartIn ` | ![ Ease InOut Quart] ( img/easeInOutQuart.svg ) <br > ` easeQuartInOut ` | ![ Ease Out Quart] ( img/easeOutQuart.svg ) <br > ` easeQuartOut ` |
21+ | Quad | ![ Ease In Quad] ( img/easeInQuad.svg ) <br > ` easeQuadIn ` | ![ Ease InOut Quad] ( img/easeInOutQuad.svg ) <br > ` easeQuadInOut ` | ![ Ease Out Quad] ( img/easeOutQuad.svg ) <br > ` easeQuadOut ` |
1022
1123## Installation
1224
@@ -16,24 +28,47 @@ composer require smnandre/easing-functions
1628
1729## Usage
1830
31+ ``` php
32+ Easing\Functions::easeOutCubic(0);
33+ // 0
34+ Easing\Functions::easeOutCubic(0.5);
35+ // 0.875
1936
37+ $values = array_map(Easing\Functions::easeOutCubic(...), range(0, 1, 0.1));
38+ echo implode(" ", $values);
39+ // 0 0.271 0.488 0.657 0.784 0.875 0.936 0.973 0.992 0.999 1
40+ ```
2041
2142## Functions
2243
23- | Function | Description | Example | A | B | C | D |
24- | ----------| --------------------------------------------------| ---------| - | - | - | - |
25- | ` easeInCubic ` | ![ easeInOutCubic2.svg] ( img/easeInOutCubic2.svg ) |
26- | ` easeInCubic ` | ![ easeInOutCubic2.svg] ( img/easeInOutCubic2.svg ) |
27-
28-
29- ### Linear Function
30-
31- ### Cubic Bezier Function
32-
33- ### Step Function
34-
35-
36- ## Contributing
44+ ### Easing Functions
45+
46+ | Name | Formulae | Preview |
47+ | ------------------| ----------------------------------------------------------| ----------------------------------------------------|
48+ | ` easeOutCubic ` | $` 1 - pow(1 - x, 3) ` $ | ![ easeOutCubic PHP] ( img/easeOutCubic_line.svg ) |
49+ | ` easeInOutCubic ` | $` x < 0.5 ? 4 * pow(x, 3) : 1 - pow(-2 * x + 2, 3) / 2 ` $ | ![ easeInOutCubic PHP] ( img/easeInOutCubic_line.svg ) |
50+ | ` easeInQuart ` | $` pow(x, 4) ` $ | ![ easeInQuart PHP] ( img/easeInQuart_line.svg ) |
51+ | ` easeOutQuart ` | $` 1 - pow(1 - x, 4) ` $ | ![ easeOutQuart PHP] ( img/easeOutQuart_line.svg ) |
52+ | ` easeInOutQuart ` | $` x < 0.5 ? 8 * pow(x, 4) : 1 - pow(-2 * x + 2, 4) / 2 ` $ | ![ easeInOutQuart PHP] ( img/easeInOutQuart_line.svg ) |
53+ | ` easeInCubic ` | $` pow(x, 3) ` $ | ![ easeInCubic PHP] ( img/easeInCubic_line.svg ) |
54+ | ` easeInQuad ` | $` x * x ` $ | ![ easeInQuad PHP] ( img/easeInQuad_line.svg ) |
55+ | ` easeOutQuad ` | $` 1 - (1 - x) * (1 - x) ` $ | ![ easeOutQuad PHP] ( img/easeOutQuad_line.svg ) |
56+ | ` easeInOutQuad ` | $` x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2 ` $ | ![ easeInOutQuad PHP] ( img/easeInOutQuad_line.svg ) |
57+
58+ ### Time Comparison
59+
60+ | Function | 12.5% | 25% | 37.5% | 50% | 62.5% | 75% | 87.5% |
61+ | ------------| -------| ------| -------| -------| -------| -------| -------|
62+ | OutQuart | ██ | ███▎ | ████ | ████▌ | ████▊ | ████▊ | ████▊ |
63+ | OutCubic | █▌ | ██▊ | ███▊ | ████▎ | ████▌ | ████▊ | ████▊ |
64+ | OutQuad | █ | ██ | ███ | ███▊ | ████▎ | ████▌ | ████▊ |
65+ | InOutQuad | | ▌ | █▎ | ██▌ | ███▌ | ████▎ | ████▊ |
66+ | InOutCubic | | ▎ | █ | ██▌ | ███▊ | ████▌ | ████▊ |
67+ | InOutQuart | | | ▊ | ██▌ | ████ | ████▊ | ████▊ |
68+ | InQuad | | ▎ | ▌ | █▎ | █▊ | ██▊ | ███▊ |
69+ | InCubic | | | ▎ | ▌ | █ | ██ | ███▎ |
70+ | InQuart | | | | ▎ | ▊ | █▌ | ██▊ |
3771
3872## License
3973
74+ This project is licensed under the MIT License. See the [ LICENSE] ( ./LICENSE ) file for more information.
0 commit comments