Skip to content

Commit 129dd8a

Browse files
arqexarqex
committed
Converts all the translations to relative to center
1 parent 374a64b commit 129dd8a

6 files changed

Lines changed: 100 additions & 69 deletions

File tree

‎playground/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const styles = StyleSheet.create({
185185
flex: 1,
186186
alignItems: 'stretch',
187187
backgroundColor: 'white',
188-
width: 460
188+
width: 480
189189
},
190190
header: {
191191
height: isIphoneX ? 100 : (Platform.OS === 'ios') ? 70 : 60,

‎playground/src/examples/MoreChatHeads.js‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,42 +69,58 @@ export default class MoreChatHeads extends Component {
6969
}
7070

7171
renderLocalizedSprings() {
72+
let snap = [
73+
{x: -140, y: 0}, {x: -140, y: -120}, {x: -140, y: 120}, {x: -140, y: -250}, {x: -140, y: 250},
74+
{x: 140, y: 0}, {x: 140, y: 120}, {x: 140, y: -120}, {x: 140, y: -250}, {x: 140, y: 250}
75+
]
76+
let spring = [
77+
{x: 0, y:-120, tension: 4000, damping: 0.5, influenceArea: {left: -40, right: 40, top: -160, bottom: -80}, haptics: true},
78+
{x: 0, y: 120, tension: 4000, damping: 0.5, influenceArea: {left: -40, right: 40, top: 80, bottom: 160}, haptics: true}
79+
]
7280
return (
7381
<View style={styles.container}>
7482
<View style={styles.markerContainer}><View style={[styles.marker, {top: -120}]} /></View>
7583
<View style={styles.markerContainer}><View style={[styles.marker, {top: 120}]} /></View>
7684
<Interactable.View
77-
snapPoints={[
78-
{x: -140, y: 0}, {x: -140, y: -120}, {x: -140, y: 120}, {x: -140, y: -250}, {x: -140, y: 250},
79-
{x: 140, y: 0}, {x: 140, y: 120}, {x: 140, y: -120}, {x: 140, y: -250}, {x: 140, y: 250}]}
85+
snapPoints={ snap }
8086
dragWithSpring={{tension: 2000, damping: 0.5}}
81-
springPoints={[
82-
{x: 0, y:-120, tension: 4000, damping: 0.5, influenceArea: {left: -40, right: 40, top: -160, bottom: -80}, haptics: true},
83-
{x: 0, y: 120, tension: 4000, damping: 0.5, influenceArea: {left: -40, right: 40, top: 80, bottom: 160}, haptics: true}]}
87+
springPoints={ spring }
8488
initialPosition={{x: -140, y: -250}}>
8589
<View style={styles.head} />
8690
</Interactable.View>
91+
<View style={styles.phContainer}>
92+
{ this.renderPlaceholders( snap ) }
93+
{ this.renderPlaceholders( spring, true ) }
94+
</View>
8795
</View>
8896
);
8997
}
9098

9199
renderGravityWells() {
100+
let snap = [
101+
{x: -140, y: 0}, {x: -140, y: -120}, {x: -140, y: 120}, {x: -140, y: -250}, {x: -140, y: 250},
102+
{x: 140, y: 0}, {x: 140, y: 120}, {x: 140, y: -120}, {x: 140, y: -250}, {x: 140, y: 250}
103+
]
104+
let gravity = [
105+
{x: 0, y:-120, strength: 8000, falloff: 40, damping: 0.5, haptics: true},
106+
{x: 0, y: 120, strength: -8000, falloff: 40, damping: 0.5, haptics: true}
107+
]
92108
return (
93109
<View style={styles.container}>
94110
<View style={styles.markerContainer}><View style={[styles.marker, {top: -140}]} /></View>
95111
<View style={styles.markerContainer}><View style={[styles.marker, {top: 140}]} /></View>
96112
<Interactable.View
97-
snapPoints={[
98-
{x: -140, y: 0}, {x: -140, y: -120}, {x: -140, y: 120}, {x: -140, y: -250}, {x: -140, y: 250},
99-
{x: 140, y: 0}, {x: 140, y: 120}, {x: 140, y: -120}, {x: 140, y: -250}, {x: 140, y: 250}]}
113+
snapPoints={ snap }
100114
dragWithSpring={{tension: 2000, damping: 0.5}}
101-
gravityPoints={[
102-
{x: 0, y:-120, strength: 8000, falloff: 40, damping: 0.5, haptics: true},
103-
{x: 0, y: 120, strength: -8000, falloff: 40, damping: 0.5, haptics: true}]}
115+
gravityPoints={ gravity }
104116
onStop={this.onStopInteraction}
105117
initialPosition={{x: -140, y: -250}}>
106118
<View style={styles.head} />
107119
</Interactable.View>
120+
<View style={styles.phContainer}>
121+
{ this.renderPlaceholders( snap ) }
122+
{ this.renderPlaceholders( gravity, true ) }
123+
</View>
108124
</View>
109125
);
110126
}
@@ -130,6 +146,13 @@ export default class MoreChatHeads extends Component {
130146
const y = event.y;
131147
console.log(`stopped at x=${x}, y=${y}`);
132148
}
149+
150+
renderPlaceholders( points, fill ){
151+
this.idx = this.idx || 0;
152+
return points.map( (point, i) => (
153+
<View key={`ph${this.idx++}`} style={ [styles.placeholder, fill && styles.fill, {transform: [{ translateX: point.x }, {translateY: point.y}]}] }></View>
154+
))
155+
}
133156

134157
}
135158

@@ -170,5 +193,21 @@ const styles = StyleSheet.create({
170193
height: 70,
171194
backgroundColor: '#EE2C38',
172195
borderRadius: 35
196+
},
197+
phContainer: {
198+
position: 'relative',
199+
transform: [{translateX: -5}, {translateY: -40}]
200+
},
201+
placeholder: {
202+
position: 'absolute',
203+
top: 0, left: 0,
204+
height: 10, width: 10,
205+
borderRadius: 5,
206+
borderWidth:2,
207+
borderColor: '#ccc',
208+
borderStyle: 'solid'
209+
},
210+
fill: {
211+
backgroundColor: '#ccc'
173212
}
174213
});

‎playground/src/interactable/Animator.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,15 @@ export default class PhysicsAnimator {
3737

3838
let { physicsObject, behaviors, View } = this
3939
let hadMovement = false
40-
let {x,y} = View.getAnimated()
41-
42-
let coords = {
43-
x: x._value + x._offset,
44-
y: y._value + y._offset,
45-
dx: x._value,
46-
dy: y._value
47-
}
40+
let coords = View.getTranslation()
4841

4942
behaviors.forEach( behavior => {
5043
Behaviors[ behavior.type ].doFrame( behavior, deltaTime, physicsObject, coords, View )
5144
})
5245

5346
let dx = 0;
5447
let {vx,vy} = physicsObject
48+
console.log( physicsObject )
5549

5650
if ( Math.abs(vx) > ANIMATOR_PAUSE_ZERO_VELOCITY ) {
5751
dx = deltaTime * vx;

‎playground/src/interactable/Behaviors.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export default {
1111
),
1212
doFrame: (options, deltaTime, state, coords ) => {
1313
// Velocity = dx / deltaTime
14-
state.vx = (options.x0 - coords.dx) / deltaTime
15-
state.vy = (options.y0 - coords.dy) / deltaTime
14+
state.vx = (options.x0 - coords.x) / deltaTime
15+
state.vy = (options.y0 - coords.y) / deltaTime
1616
}
1717
},
1818

@@ -25,15 +25,14 @@ export default {
2525
priority: 3,
2626
isTemp
2727
}),
28-
doFrame: ({minPoint, maxPoint, bounce}, deltaTime, state, {x,y,dx,dy}, target ) => {
28+
doFrame: ({minPoint, maxPoint, bounce}, deltaTime, state, {x,y}, target ) => {
2929
// Apply limits
3030
if (minPoint.x > x) target.setTranslationX(minPoint.x);
3131
if (minPoint.y > y) target.setTranslationY(minPoint.y);
3232
if (maxPoint.x < x) target.setTranslationX(maxPoint.x);
3333
if (maxPoint.y < y) target.setTranslationY(maxPoint.y);
3434

3535
let { vx, vy } = state
36-
console.log( vx, vy, bounce )
3736

3837
if (minPoint.x >= x && vx < 0) {
3938
state.vx = -vx * bounce
@@ -109,16 +108,13 @@ export default {
109108
priority: 1
110109
}),
111110
doFrame: ( options, deltaTime, state, coords) => {
112-
console.log( coords )
113111
if( !Utils.isPointInArea( coords, options.influence) ) return;
114-
115-
let {tension} = options
116112

117-
let dx = coords.dx - options.x0;
118-
let ax = (-tension * dx) / state.mass;
113+
let dx = coords.x - options.x0;
114+
let ax = (-1 * options.tension * dx) / state.mass;
119115

120-
let dy = coords.dy - options.y0;
121-
let ay = (-tension * dy) / state.mass;
116+
let dy = coords.y - options.y0;
117+
let ay = (-1 * options.tension * dy) / state.mass;
122118

123119
state.vx = state.vx + deltaTime * ax
124120
state.vy = state.vy + deltaTime * ay

‎playground/src/interactable/InteractableView.js‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function injectDependencies( Animated, PanResponder ){
1919
gravityPoints: PropTypes.array,
2020
horizontalOnly: PropTypes.bool,
2121
verticalOnly: PropTypes.bool,
22-
dragWithSpring: PropTypes.bool,
22+
dragWithSpring: PropTypes.objet,
2323
dragEnabled: PropTypes.bool,
2424
animatedValueX: PropTypes.instanceOf(Animated.Value),
2525
animatedValueY: PropTypes.instanceOf(Animated.Value),
@@ -64,9 +64,6 @@ export default function injectDependencies( Animated, PanResponder ){
6464
// Cache when the view is inside of an alert area
6565
this.insideAlertAreas = {}
6666

67-
// Save the last animation end position to report good coordinates in the events
68-
this.lastEnd = {x: 0, y: 0}
69-
7067
// cache calculated areas
7168
this.propAreas = {
7269
alert: [],
@@ -82,13 +79,13 @@ export default function injectDependencies( Animated, PanResponder ){
8279
let {x,y} = this.getAnimated( props )
8380
x.setValue( props.initialPosition.x )
8481
y.setValue( props.initialPosition.y )
82+
83+
// Save the last animation end position to report good coordinates in the events
84+
this.lastEnd = {...this.initialPosition}
8585
}
8686

8787
render() {
8888
let { x, y } = this.getAnimated()
89-
this.lastX = x
90-
this.lastY= y
91-
9289

9390
let position = {
9491
transform: [
@@ -106,26 +103,21 @@ export default function injectDependencies( Animated, PanResponder ){
106103
}
107104

108105
getTranslation(){
109-
let animated = this.getAnimated()
110-
return {
111-
x: animated.x._value,
112-
y: animated.y._value
113-
}
114-
}
115-
getAbsoluteTranslation(){
116-
let {x,y} = this.getAnimated()
106+
let {x, y} = this.getAnimated()
117107
return {
118108
x: x._value + x._offset,
119109
y: y._value + y._offset
120110
}
121111
}
122112

123113
setTranslationX( tx ){
124-
( this.props.animatedValueX || this.animated.x ).setValue( tx )
114+
let animated = this.props.animatedValueX || this.animated.x
115+
animated.setValue( tx - animated._offset )
125116
}
126117

127118
setTranslationY(ty) {
128-
( this.props.animatedValueY || this.animated.y ).setValue( ty )
119+
let animated = this.props.animatedValueY || this.animated.y
120+
animated.setValue( ty - animated._offset )
129121
}
130122

131123
setTranslation( tx, ty ){
@@ -148,6 +140,8 @@ export default function injectDependencies( Animated, PanResponder ){
148140

149141
animate( dx, dy ){
150142
if(!dx && !dy) return
143+
let animated = this.getAnimated()
144+
console.log( dx + animated.x._value + animated.x._offset )
151145

152146
let {x,y} = this.getTranslation()
153147
this.setTranslation( x + dx, y + dy )
@@ -177,9 +171,6 @@ export default function injectDependencies( Animated, PanResponder ){
177171

178172
onPanResponderRelease: () => {
179173
this.endDrag()
180-
let {x,y} = this.getAnimated()
181-
x.flattenOffset()
182-
y.flattenOffset()
183174
}
184175
})
185176
}
@@ -214,6 +205,7 @@ export default function injectDependencies( Animated, PanResponder ){
214205

215206
// Save the offset for triggering events with the right coordinates
216207
this.lastEnd = offset
208+
console.log( offset )
217209

218210
// Set relative boundaries to not to drag after them
219211
if( this.propAreas.boundaries ){
@@ -228,8 +220,8 @@ export default function injectDependencies( Animated, PanResponder ){
228220
}
229221

230222
// Prepare the animation
231-
let pos = this.getTranslation()
232-
this.props.onDrag({state: 'start', x: pos.x + this.lastEnd.x, y: pos.y + this.lastEnd.y})
223+
let pos = {x: 0, y: 0}
224+
this.props.onDrag({state: 'start', x: offset.x, y: offset.y})
233225
this.dragStartLocation = { x: ev.x, y: ev.y }
234226
this.animator.removeTempBehaviors();
235227
this.animator.isDragging = true
@@ -246,22 +238,28 @@ export default function injectDependencies( Animated, PanResponder ){
246238
}
247239

248240
onDragging({dx, dy}){
241+
let animated = this.getAnimated()
242+
let x = dx + animated.x._offset
243+
let y = dy + animated.y._offset
244+
249245
let {minPoint, maxPoint} = this.dragBoundaries
250246
if( !this.props.verticalOnly ){
251247
if (minPoint) {
252-
if (minPoint.x > dx) dx = minPoint.x
253-
if (maxPoint.x < dx) dx = maxPoint.x
248+
if (minPoint.x > x) x = minPoint.x
249+
if (maxPoint.x < x) x = maxPoint.x
254250
}
255-
this.dragBehavior.x0 = dx
251+
this.dragBehavior.x0 = x
256252
}
257253

258254
if (!this.props.horizontalOnly) {
259255
if (minPoint) {
260-
if (minPoint.y > dy) dy = minPoint.y
261-
if (maxPoint.y < dy) dy = maxPoint.y
256+
if (minPoint.y > y) y = minPoint.y
257+
if (maxPoint.y < y) y = maxPoint.y
262258
}
263-
this.dragBehavior.y0 = dy
259+
this.dragBehavior.y0 = y
264260
}
261+
262+
console.log( this.dragBehavior )
265263
}
266264

267265
endDrag(){
@@ -279,19 +277,23 @@ export default function injectDependencies( Animated, PanResponder ){
279277
let toss = dragWithSprings && dragWithSprings.toss || this.props.dragToss;
280278
let {x,y} = this.getTranslation()
281279
let projectedCenter = {
282-
x: x + this.lastEnd.x + toss * velocity.x,
283-
y: y + this.lastEnd.y + toss * velocity.y
280+
x: x + toss * velocity.x,
281+
y: y + toss * velocity.y
284282
};
285283

286-
console.log( 'pc', projectedCenter, velocity, this.lastEnd )
284+
console.log( 'pc', projectedCenter, velocity)
287285
let snapPoint = Utils.findClosest(projectedCenter, this.props.snapPoints);
288286
let targetSnapPointId = snapPoint && snapPoint.id || "";
289287

290-
this.props.onDrag({ state: 'end', x: x + this.lastEnd.x, y: y + this.lastEnd.y, targetSnapPointId })
288+
this.props.onDrag({ state: 'end', x: x, y: y, targetSnapPointId })
291289

292290
this.addTempSnapToPointBehavior(snapPoint);
293291
this.addTempBoundaries();
294292

293+
let animated = this.getAnimated()
294+
animated.x.flattenOffset()
295+
animated.y.flattenOffset()
296+
295297
// Restore text selection
296298
if (document) {
297299
document.body.userSelect = this.userSelectCache || ''
@@ -314,7 +316,7 @@ export default function injectDependencies( Animated, PanResponder ){
314316
}
315317

316318
addTempSnapToPointBehavior( snapPoint ) {
317-
if (!snapPoint == null) return;
319+
if (!snapPoint) return;
318320
let { snapPoints, onSnap, onSnapStart } = this.props
319321

320322
let index = snapPoints.indexOf(snapPoint)
@@ -346,8 +348,8 @@ export default function injectDependencies( Animated, PanResponder ){
346348

347349
setVelocity( velocity ) {
348350
if ( this.dragBehavior ) return;
349-
this.velocity = velocity;
350-
this.animator.setTargetVelocity(this, this.velocity);
351+
this.animator.vx = velocity.x
352+
this.animator.vy = velocity.y
351353
this.endDrag();
352354
}
353355

‎playground/src/real-life-examples/RowActions1.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ class Row extends Component {
176176
</View>
177177
);
178178
}
179-
onSnap({nativeEvent}) {
179+
onSnap(nativeEvent) {
180180
const { index } = nativeEvent;
181181
this.setState({position: index});
182182
}
@@ -186,7 +186,7 @@ class Row extends Component {
186186
this.interactableElem.snapTo({index: 1});
187187
}
188188
}
189-
onDrag({nativeEvent}) {
189+
onDrag(nativeEvent) {
190190
const { state } = nativeEvent;
191191
if (state === 'start') {
192192
this.setState({isMoving: true});

0 commit comments

Comments
 (0)