Coder Social home page Coder Social logo

easing's Introduction

Easing Logo

The Easing library is a comprehensive set of easing functions, useful for interactive transitions and other time-based calculations.

Features

  • Unified set of easing functions
  • Easy-to-use 'swifty' API to invoke calculations
  • Interpolation shorthands for commonly used types like CGPoint, CGSize, CGTransform, UIColor and UIBezierPath
  • Arbitrary cubic bezier based easings (see .cubicBezier(...))
  • Emulate default easings from iOS (see .caEaseIn, .caEaseOut, .caEaseInEaseOut)
  • Interactive demo app
  • Supports iOS 12.0+ / Mac OS X 10.13+ / tvOS 12.0+ / watchOS 4.0+ / visionOS 1.0+

Usage

Basic

let startValue = 20.0
let endValue = 60.0
let progress = 0.5  // Assume a progress variable that ranges from 0 to 1

let valueAtProgress = Easing.cubicEaseIn.calculate(
    d1: startValue,
    d2: endValue,
    g: progress
)

Real world example

Imagine an interaction with a UIScrollView where its header is fully visible when the content offset is zero and fades out completely as the content offset exceeds 100 points. You can express this behavior with the following code in your scrollViewDidScroll method:

let minOffset = 0.0
let alphaForMinOffset = 0.0
let maxOffset = 100.0
let alphaForMaxOffset = 1.0
let offset = scrollView.contentOffset.y

headerView.alpha = Easing.quadraticEaseInOut.calculate(
    g1: minOffset,
    d1: alphaForMinOffset,
    g2: maxOffset,
    d2: alphaForMaxOffset,
    g: offset
)

Interpolatable

let startTransform = CGAffineTransform.identity
let endTransform = CGAffineTransform(scaleX: 2, y: 2)
let progress = 0.5  // Assume a progress variable that ranges from 0 to 1

view.transform = startTransform.interpolate(to: endTransform,
                                      progress: progress,
                                        easing: .linear)

Reference

Easing Curve
.linear
.smoothStep
.smootherStep
.quadraticEaseIn
.quadraticEaseOut
.quadraticEaseInOut
.cubicEaseIn
.cubicEaseOut
.cubicEaseInOut
.quarticEaseIn
.quarticEaseOut
.quarticEaseInOut
.quinticEaseIn
.quinticEaseOut
.quinticEaseInOut
.sineEaseIn
.sineEaseOut
.sineEaseInOut
.circularEaseIn
.circularEaseOut
.circularEaseInOut
.exponentialEaseIn
.exponentialEaseOut
.exponentialEaseInOut
.elasticEaseIn
.elasticEaseOut
.elasticEaseInOut
.backEaseIn
.backEaseOut
.backEaseInOut
.bounceEaseIn
.bounceEaseOut
.bounceEaseInOut
.caEaseIn
.caEaseOut
.caEaseInEaseOut
.cubicBezier(0.11, 0.87, 0.21, -0.88)

Demo app

In the repo, you will find an interactive demo iOS app to experiment with different easings and discover the most suitable one for your needs.

Integration

Use Swift Package Manager and add dependency to Package.swift file.

  dependencies: [
    .package(url: "https://github.com/psharanda/Easing.git", .upToNextMajor(from: "3.0.0"))
  ]

Alternatively, in Xcode select File > Add Package Dependencies… and add Easing repository URL:

https://github.com/psharanda/Easing.git

References

The main set of easing functions is a Swift port of https://github.com/warrenm/AHEasing and https://github.com/ai/easings.net

CubicBezierInterpolator is a Swift port of nsSMILKeySpline code from Mozilla https://github.com/mozilla-services/services-central-legacy/blob/master/content/smil/nsSMILKeySpline.cpp

Contributing

We welcome contributions! If you find a bug, have a feature request, or want to contribute code, please open an issue or submit a pull request.

License

Easing is available under the MIT license. See the LICENSE file for more info.

easing's People

Contributors

psharanda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

roarforgood

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.