Giter Club home page Giter Club logo

spr's Introduction

☄️ spr

Springs are powerful approach for describing fluid, physically-based animation.
spr is a high-performance and user-friendly motion library for Roblox based on springs.

Animations are a single line of code:

spr.target(part, springDamping, springFrequency, { CFrame = CFrame.new(0, 10, 0) })

Features

A small, easy-to-use API

  • spr is easy enough for designers and learning programmers to understand.
  • spr only needs a target value and motion parameters. It handles all other aspects of animation automatically.

Easy-to-tune motion

  • Motion is defined by frequency and damping ratio.
  • Frequency and damping ratio are easy to visualize without running the game. Tuning usually only takes one try.

A robust spring model

  • spr's robust analytical motion solver handles a wide variety of spring parameters that cause other spring solvers to fail.
  • If spr is given a nonconverging set of motion parameters, it will throw a clear error describing what is wrong and how to fix it.

Tight integration with Roblox datatypes

  • spr animates directly over Roblox properties without additional layers of indirection.
  • spr performs runtime type checking, providing stronger typing than Roblox instance property setters.
  • spr knows how to animate in the ideal space for each datatype.
    • For example, spr will automatically animate Color3 values in perceptually-uniform CIELUV space.

API

spr.target

spr.target(
   obj: Instance,
   dampingRatio: number,
   undampedFrequency: number,
   targetProperties: {[string]: any})

Animates the given properties towardes the target values.

spr.completed

spr.completed(obj: Instance, callback: ()->())

Registers a callback function that will be called the next time the instance stops animating. The callback is only called once. This is useful for tracking instance lifetime, such as destroying a part when it becomes invisible.

spr.stop

spr.stop(obj: Instance, property: string?)

Stops animations for a particular property. If a property is not specified, all properties belonging to the instance will stop animating.

Spring fundamentals

Damping ratio and undamped frequency are the two properties describing a spring's motion.

Damping ratio

  • Damping ratio < 1 overshoots and converges on the target. This is called underdamping.
  • Damping ratio = 1 converges on the target without overshooting. This is called critical damping.
  • Damping ratio > 1 converges on the target without overshooting, but slower. This is called overdamping.

Critical damping is recommended as the most visually neutral option with no overshoot. Underdamping is recommended for animations that need extra pop.

Damping ratio and frequency can be visualized here.

Type support

spr supports a subset of Roblox and native Luau types for which interpolation makes sense. Currently, those are:

  • boolean
  • CFrame
  • Color3
  • ColorSequence
  • number
  • NumberRange
  • UDim
  • UDim2
  • Vector2
  • Vector3

Setup

spr is a single-module library.

  1. Paste the source of spr.lua into a new ModuleScript
  2. Require the ModuleScript with local spr = require(<path to spr>)
  3. Follow the below code examples to get started with the API.

Documentation on how to use ModuleScripts can be found here.

Examples

spr.target

-- damping ratio 1 (critically damped), frequency 1
-- frame slowly moves to the middle of the screen without overshooting
spr.target(frame, 1, 1, {
    Position = UDim2.fromScale(0.5, 0.5)
})
-- damping ratio 0.6 (underdamped), frequency 4
-- frame quickly moves to the middle of the screen, overshoots, and wobbles around the target
spr.target(frame, 0.6, 4, {
    Position = UDim2.fromScale(0.5, 0.5)
})

spr.completed

spr.target(workspace.Part, 1, 1, {Transparency = 1})
spr.completed(workspace.Part, function() workspace.Part:Destroy() end)

spr.stop

spr.target(frame, 0.6, 1, {
    Position = UDim2.fromScale(1, 1)
})
-- spr is now animating frame.Position

task.wait(1)

spr.stop(frame, "Position")
-- spr is no longer animating frame.Position
spr.target(frame, 0.6, 1, {
    Position = UDim2.fromScale(1, 1),
    Size = UDim2.fromScale(0.5, 0.5)
})
-- spr is now animating Position and Size

task.wait(1)

spr.stop(frame)
-- spr is no longer animating Position or Size

spr's People

Contributors

fraktality avatar osyrisrblx avatar outofbears avatar web-flow avatar

Watchers

 avatar

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.