number
45 | * [.value](#Spring+value) : number
46 | * [.previous](#Spring+previous) : number
47 | * [.velocity](#Spring+velocity) : number
48 | * [.onStart](#Spring+onStart) : function
49 | * [.onStop](#Spring+onStop) : function
50 |
51 | Object | {} | Spring options. |
61 | | [options.initial] | number | 0 | Initial value / targetValue of your spring. |
62 | | [options.tension] | number | 0.1 | Tension/Stifness of your spring. |
63 | | [options.friction] | number | 0.2 | *From 0 to 1.* Friction (Damping) of your spring. |
64 | | [options.step] | number | 10 | Timestep of the physics solver (in ms). Step > 16.67ms will give you pretty bad results. |
65 | | [options.onStart] | function | | `onStart` will be called when the spring starts moving. |
66 | | [options.onStop] | function | | `onStop` will be called when your the spring stops moving. |
67 | | [options.precisionStop] | number | 0.0001 | Minimum distance between `value` and `target` to consider the spring stopped. |
68 | | [options.perfectStop] | boolean | false | Define if `value` is set precisely to targetValue when the spring stops moving. |
69 |
70 | **Example**
71 | ```js
72 | import { raf } from '@internet/raf'
73 | import Spring from '@internet/spring'
74 |
75 | const move = new Spring({ initial: 0 })
76 | move.setTarget(300)
77 | raf.add(dt => {
78 | move.update(dt)
79 | console.log(move.value)
80 | })
81 | ```
82 |
83 | * * *
84 |
85 |
86 |
87 | #### spring.setValue(newCurrent)
88 | Change the current position of the spring. Can retrigger onStart / onStop.
89 |
90 | **Kind**: instance method of [Spring](#Spring)
91 | **Category**: Methods
92 |
93 | | Param | Type | Description |
94 | | --- | --- | --- |
95 | | newCurrent | number | New current value. |
96 |
97 |
98 | * * *
99 |
100 |
101 |
102 | #### spring.setTarget(newTarget)
103 | Update target / resting position of the spring. Can retrigger onStart / onStop.
104 |
105 | **Kind**: instance method of [Spring](#Spring)
106 | **Category**: Methods
107 |
108 | | Param | Type | Description |
109 | | --- | --- | --- |
110 | | newTarget | number | New target value. |
111 |
112 |
113 | * * *
114 |
115 |
116 |
117 | #### spring.setTension(tensionValue)
118 | Update tension of the spring
119 |
120 | **Kind**: instance method of [Spring](#Spring)
121 | **Category**: Methods
122 |
123 | | Param | Type | Description |
124 | | --- | --- | --- |
125 | | tensionValue | number | New tension value. |
126 |
127 |
128 | * * *
129 |
130 |
131 |
132 | #### spring.setFriction(frictionValue)
133 | Update friction of the spring
134 |
135 | **Kind**: instance method of [Spring](#Spring)
136 | **Category**: Methods
137 |
138 | | Param | Type | Description |
139 | | --- | --- | --- |
140 | | frictionValue | number | New friction value. |
141 |
142 |
143 | * * *
144 |
145 |
146 |
147 | #### spring.start()
148 | Force re-start of the spring. Only needed if you force-stop the spring with `stop()`
149 |
150 | **Kind**: instance method of [Spring](#Spring)
151 | **Category**: Methods
152 |
153 | * * *
154 |
155 |
156 |
157 | #### spring.stop()
158 | Force-stop the spring.
159 |
160 | **Kind**: instance method of [Spring](#Spring)
161 | **Category**: Methods
162 |
163 | * * *
164 |
165 |
166 |
167 | #### spring.update(dt)
168 | Update the spring physic state
169 |
170 | **Kind**: instance method of [Spring](#Spring)
171 | **Category**: Methods
172 |
173 | | Param | Type | Description |
174 | | --- | --- | --- |
175 | | dt | number | Elapsed time since the last frame (in ms) |
176 |
177 |
178 | * * *
179 |
180 |
181 |
182 | #### spring.dispose()
183 | Stop the spring and remove callbacks referenced in onStart and onStop.
184 |
185 | **Kind**: instance method of [Spring](#Spring)
186 | **Category**: Methods
187 |
188 | * * *
189 |
190 |
191 |
192 | #### spring.initial : number
193 | Initial position of the spring
194 |
195 | **Kind**: instance property of [Spring](#Spring)
196 | **Category**: Properties
197 |
198 | * * *
199 |
200 |
201 |
202 | #### spring.value : number
203 | Current position of the spring
204 |
205 | **Kind**: instance property of [Spring](#Spring)
206 | **Category**: Properties
207 |
208 | * * *
209 |
210 |
211 |
212 | #### spring.previous : number
213 | Previous frame position of the spring
214 |
215 | **Kind**: instance property of [Spring](#Spring)
216 | **Category**: Properties
217 |
218 | * * *
219 |
220 |
221 |
222 | #### spring.velocity : number
223 | Current velocity of the spring
224 |
225 | **Kind**: instance property of [Spring](#Spring)
226 | **Category**: Properties
227 |
228 | * * *
229 |
230 |
231 |
232 | #### spring.onStart : function
233 | Optional function called when the spring starts
234 |
235 | **Kind**: instance property of [Spring](#Spring)
236 | **Category**: Properties
237 |
238 | * * *
239 |
240 |
241 |
242 | #### spring.onStop : function
243 | Optional function called when the spring stops
244 |
245 | **Kind**: instance property of [Spring](#Spring)
246 | **Category**: Properties
247 |
248 | * * *
249 |
250 |
--------------------------------------------------------------------------------
/demo/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pqml/spring/b025fdac71e31f20180fec84821a2ceeb04bdc8e/demo/.gitkeep
--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
1 | import Spring from '../lib'
2 | import { raf, fpsLimiter } from '@internet/raf'
3 | import * as dat from 'dat.gui'
4 |
5 | const FPS = [null, 10, 6]
6 | const gui = new dat.GUI()
7 |
8 | const params = { tension: 0.1, friction: 0.2, timestep: 8 }
9 | const els = Array
10 | .from(document.querySelectorAll('.dot'))
11 | .map((el, i) => createSpring(el, i, {
12 | precisionStop: 0.01,
13 | perfectStop: true,
14 | tension: params.tension,
15 | friction: params.friction,
16 | step: 8
17 | }))
18 |
19 | gui.add(params, 'tension', 0, 1).onChange(v => { els.forEach(el => el.setTension(v)) })
20 | gui.add(params, 'friction', 0, 1).onChange(v => { els.forEach(el => el.setFriction(v)) })
21 |
22 | document.addEventListener('mousemove', e => {
23 | for (let i = 0; i < els.length; i++) els[i].setTarget(e.clientX, e.clientY)
24 | })
25 |
26 | function createSpring (el, i, opts) {
27 | const x = new Spring(opts)
28 | const y = new Spring(opts)
29 | const update = !FPS[i] ? _update : fpsLimiter(FPS[i], _update)
30 | x.onStart = () => !y.stopped && raf.add(update)
31 | y.onStart = () => !x.stopped && raf.add(update)
32 | x.onStop = () => y.stopped && raf.remove(update)
33 | y.onStop = () => x.stopped && raf.remove(update)
34 |
35 | return { setTarget, setTension, setFriction, setStep }
36 |
37 | function setTension (v) {
38 | x.setTension(v)
39 | y.setTension(v)
40 | }
41 |
42 | function setFriction (v) {
43 | x.setFriction(v)
44 | y.setFriction(v)
45 | }
46 |
47 | function setStep (v) {
48 | x.setStep(v)
49 | y.setStep(v)
50 | }
51 |
52 | function setTarget (nx, ny) {
53 | x.setTarget(nx)
54 | y.setTarget(ny)
55 | }
56 |
57 | function _update (dt) {
58 | x.update(dt)
59 | y.update(dt)
60 | el.classList[x.stopped && y.stopped ? 'add' : 'remove']('stopped')
61 | el.style.transform = `translate3d(${x.value}px, ${y.value}px, 0)`
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | localStorage on exit.\n\n localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n\n GUI's constructor:\\n\\n \\n\\n localStorage on exit.\\n\\n localStorage will\\n override those passed to dat.GUI's constructor. This makes it\\n easier to work incrementally, but localStorage is fragile,\\n and your friends may not see the same values you do.\\n\\n