1+ # Animation and Transition
2+
13Scripting Animation & Transition System
24
3- # Animation Class
5+ ## Animation Class
46
57The ` Animation ` class describes how values animate in time.
68
@@ -156,7 +158,7 @@ repeatForever(autoreverses?: boolean): Animation
156158
157159***
158160
159- # Transition Class
161+ ## Transition Class
160162
161163` Transition ` describes how a view enters or leaves the hierarchy.
162164
@@ -185,7 +187,7 @@ combined(other: Transition): Transition
185187### Identity
186188
187189` ` ` ts
188- Transition .identity ()
190+ Transition .identity ();
189191` ` `
190192
191193### Move
@@ -209,7 +211,7 @@ Transition.pushFrom(edge: Edge)
209211### Opacity
210212
211213` ` ` ts
212- Transition .opacity ()
214+ Transition .opacity ();
213215` ` `
214216
215217### Scale
@@ -221,7 +223,7 @@ Transition.scale(scale?: number, anchor?: Point | KeywordPoint)
221223### Slide
222224
223225` ` ` ts
224- Transition .slide ()
226+ Transition .slide ();
225227` ` `
226228
227229### Fade
@@ -247,16 +249,16 @@ Transition.asymmetric(insertion: Transition, removal: Transition)
247249
248250***
249251
250- # withAnimation
252+ ## withAnimation
251253
252254` ` ` ts
253- function withAnimation(body : () => void ): Promise <void >
254- function withAnimation(animation : Animation , body : () => void ): Promise <void >
255+ function withAnimation(body : () => void ): Promise <void >;
256+ function withAnimation(animation : Animation , body : () => void ): Promise <void >;
255257function withAnimation(
256258 animation : Animation ,
257259 completionCriteria : " logicallyComplete" | " removed" ,
258- body : () => void
259- ): Promise <void >
260+ body : () => void ,
261+ ): Promise <void >;
260262```
261263
262264Wraps a state update and animates any affected values.
@@ -265,20 +267,20 @@ Example:
265267
266268``` ts
267269withAnimation (Animation .easeOut (0.3 ), () => {
268- visible.setValue(false)
269- })
270+ visible .setValue (false );
271+ });
270272```
271273
272274***
273275
274- # Correct Usage of the animation View Modifier
276+ ## Correct Usage of the animation View Modifier
275277
276278### (Important Correction)
277279
278280In Scripting, the ` animation ` prop is ** not** :
279281
280282``` tsx
281- animation={ anim} // incorrect
283+ animation = { anim }; // incorrect
282284```
283285
284286The correct format is:
@@ -354,7 +356,7 @@ const expanded = useObservable(false)
354356
355357***
356358
357- # Transition Usage Examples
359+ ## Transition Usage Examples
358360
359361### Simple visibility toggle with transition
360362
@@ -386,7 +388,7 @@ const visible = useObservable(true)
386388
387389***
388390
389- # Combined Example : Animation + Transition
391+ ## Combined Example: Animation + Transition
390392
391393```tsx
392394const visible = useObservable(true)
@@ -418,7 +420,7 @@ const anim = Animation.spring({ duration: 0.4, bounce: 0.25 })
418420
419421***
420422
421- # Summary
423+ ## Summary
422424
423425### Key Points
424426
0 commit comments