All Projects → gre → Bezier Easing

gre / Bezier Easing

Licence: mit
cubic-bezier implementation for your JavaScript animation easings – MIT License

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Bezier Easing

Computational Geometry
Computational Geometry Unity library with implementations of intersection algorithms, triangulations like delaunay, voronoi diagrams, polygon clipping, bezier curves, ear clipping, convex hulls, mesh simplification, etc
Stars: ✭ 325 (-75.62%)
Mutual labels:  bezier
Mgs Skinnedmesh
Unity plugin for create flexible hose in scene.
Stars: ✭ 58 (-95.65%)
Mutual labels:  bezier
Curvejs
Made curve a dancer in HTML5 canvas - 魔幻线条
Stars: ✭ 1,251 (-6.15%)
Mutual labels:  bezier
Macsvg
macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
Stars: ✭ 789 (-40.81%)
Mutual labels:  bezier
Beziercurve
Bezier curve master
Stars: ✭ 43 (-96.77%)
Mutual labels:  bezier
Tweenkit
Animation library for iOS in Swift
Stars: ✭ 1,146 (-14.03%)
Mutual labels:  bezier
Beziermaker.js
arbitrary order bézier-curve generator
Stars: ✭ 277 (-79.22%)
Mutual labels:  bezier
Beziermaker
🔥 通过de Casteljau算法绘制贝塞尔曲线,并计算它的切线,实现1-7阶贝塞尔曲线的形成动画。
Stars: ✭ 1,325 (-0.6%)
Mutual labels:  bezier
Cpp Spline
Package provides C++ implementation of spline interpolation
Stars: ✭ 54 (-95.95%)
Mutual labels:  bezier
Waveview
🏄 WaveView 一个水波纹动画控件视图,支持波纹数,波纹振幅,波纹颜色,渐变色,波纹速度,波纹方向等属性完全可配。
Stars: ✭ 81 (-93.92%)
Mutual labels:  bezier
Cglm
📽 Highly Optimized Graphics Math (glm) for C
Stars: ✭ 887 (-33.46%)
Mutual labels:  bezier
Scenekit Bezier Animations
Create animations over Bezier curves of any number of points
Stars: ✭ 35 (-97.37%)
Mutual labels:  bezier
Maker.js
📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
Stars: ✭ 1,185 (-11.1%)
Mutual labels:  bezier
Contourview
🦄 利用本库绘制出贝塞尔曲线魔炫背景。Customize view:Draw the magic dazzle background with Bézier.
Stars: ✭ 542 (-59.34%)
Mutual labels:  bezier
Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-93.55%)
Mutual labels:  bezier
Nurbs Python
Object-oriented pure Python B-Spline and NURBS library
Stars: ✭ 295 (-77.87%)
Mutual labels:  bezier
Korma
Mathematics library focused on geometry for Multiplatform Kotlin 1.3
Stars: ✭ 65 (-95.12%)
Mutual labels:  bezier
Shapes
📐 Net standard geometry/shape manipulation library, can be used to merge / split shapes
Stars: ✭ 95 (-92.87%)
Mutual labels:  bezier
Bezierpath
Bezier path triangulation with Delaunay algorithm.
Stars: ✭ 88 (-93.4%)
Mutual labels:  bezier
Bezierpath Length
A simple API to get the length of a CGPath, UIBezierPath or NSBezierPath, written in Swift.
Stars: ✭ 78 (-94.15%)
Mutual labels:  bezier

bezier-easing Build Status

BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.

Implementing efficient lookup is not easy because it implies projecting the X coordinate to a Bezier Curve. This micro library uses fast heuristics (involving dichotomic search, newton-raphson, sampling) to focus on performance and precision.

It is heavily based on implementations available in Firefox and Chrome (for the CSS transition-timing-function property).

Usage

var easing = BezierEasing(0, 0, 1, 0.5);
// easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(1.0)); // 1.0

(this schema is from the CSS spec)

TimingFunction.png

BezierEasing(P1.x, P1.y, P2.x, P2.y)

Install

npm install bezier-easing

It is the equivalent to CSS Transitions' transition-timing-function.

In the same way you can define in CSS cubic-bezier(0.42, 0, 0.58, 1), with BezierEasing, you can define it using BezierEasing(0.42, 0, 0.58, 1) which have the `` function taking an X and computing the Y interpolated easing value (see schema).

License

MIT License.

Tests

Build Status

npm test

See also

Who use it?

More informations

Implementation based on this article.

Contributing

You need a node installed.

Install the deps:

npm install

The library is in index.js.

Ensure any modication will:

  • keep validating the tests (run npm test)
  • not bring performance regression (compare with npm run benchmark – don't rely 100% on its precision but it still helps to notice big gaps)
  • Run the visual example: npm run visual
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].