iOS Tutorial Animations

It is very simple to add nice animation effects to your layout. Animations are important. It makes it easier for the user to track the layout changes.

By default, when a layout is loaded (or resized) the layout is animated. You can control the dumping ratio and duration in the main page settings:

It also simple to add animations when you change the layout programmatically.
View.SetLayoutAnimated - Changes the view position and size and allows you to animate the change.
View.SetAlphaAnimated - Smoothly changes the alpha level (transparency level).
View.SetColorAnimated - Smoothly changes the background color.

The attached example demonstrates the three animations.
You can see it in this video (it looks better on a real device):
Make sure to switch to HD by clicking on the small gear button.

 

[LucaMs]

Erel, you have made b4i products (website, documentation, projects) these days in amounts greater than sliced bread produced by a food industry!

Amazing!

[NOTE: this is not a compliment, it's pure envy ]

 

[GiulioVale]

Erel with SetLayoutAnimated how I can animate a panel (slide) from right to left ?

 

[Erel]

Something like:

Panel1.SetLayoutAnimated(0, 0, 100%x, 0, 100%x, 100%y) 'put the panel in the initial position
Panel1.SetLayoutAnimated(1000, 0.5, 0, 0, 100%x, 100%y)

 

[GiulioVale]

Really strange but is like 100%y assume a different value in release mode. A first execution show an height, the second another one

 

[Erel]

Read about Page_Resize here: https://www.b4x.com/android/forum/threads/layouts-pages-and-viewcontrollers.45942/

 

[Fusseldieb]

Oh, "SetLayoutAnimated" is supported by B4i too?!
I'm seriously thinking of buying B4i
It seems that I can port my Android App without bigger troubles to iOS.

 

[Erel]

Actually B4i started with SetLayoutAnimated which was later imported to B4A (and B4J)

 

[Alberto Iglesias]

It´s possible in B4i to rotate a view like B4A?

Look this example in B4A.... How to do that in B4i

Dim a as Animation
a.InitializeRotateCenter("RotateCompass",0,360,MyView)
a.Duration = 2000
a.RepeatCount = 10
a.Start(MyView)

 

[Erel]

You can rotate a view with this code:

Sub RotateView(View As View, DurationMs As Int, Angle As Double)
   Dim no As NativeObject = Me
   no.RunMethod("rotateView:::", Array(View, DurationMs, Angle * cPI / 180))
End Sub

#If OBJC
- (void) rotateView:(UIView*)view :(int)DurationMs :(double)angle {
   [UIView animateWithDuration:DurationMs / 1000.0 delay:0.0f
     options:UIViewAnimationOptionCurveEaseOut animations:^{
  view.transform = CGAffineTransformMakeRotation(angle);
  } completion:^(BOOL finished) {

  }];
}
#End If

'Example:
RotateView(Button1, 1000, 180)

You will need a timer if you want to rotate it multiple times.

 

[Alberto Iglesias]

huuummm perfect! I will try right now!

Super thanks!

 

[MotoMusher]

I receive the following error when attempting to run

Sub RotateView(View As View, DurationMs As Int, Angle As Double)
   Dim no As NativeObject = Me
   no.RunMethod("rotateView:::", Array(View, DurationMs, Angle * cPI / 180))
End Sub

Method not found: rotateView::, target: <b4i_cdetail: (null)>

If instead of "Me" I use the page variable, I get
Method not found: rotateView:::, target: Page (vc): Claim

 

[Erel]

You can only pass views to this method.

The current module (me) is never a view. The same is true for a Page.

You can pass Page.RootPanel.

 

[MotoMusher]

I am passing an imagevew to the Sub RotateView. It's almost as if "rotateView:::" doesn't exist?

"pointer" is defined in process_globals as an imageview, and initialized in another sub, and already displayed on screen.

Calling it like this:

Sub loctimer_Tick
   RotateView(pointer, 1000, g.TrueHead)
End Sub

Sub RotateView(View As View, DurationMs As Int, Angle As Double)
   Dim no As NativeObject = Me
   no.RunMethod("rotateView:::", Array(View, DurationMs, Angle * cPI / 180))
End Sub

Other methods I have tried which generate same error are:

Dim no As NativeObject = pgCdetail

and
Dim no As NativeObject = pgCdetail.RootPanel

Error occurred on line: 147 (CDetail)
Method not found: rotateView:::, target: <b4i_cdetail: (null)>
Stack Trace: (
CoreFoundation <redacted> + 150
libobjc.A.dylib objc_exception_throw + 38
CoreFoundation <redacted> + 0
Centers +[B4I runDynamicMethod:method:throwErrorIfMissing:args:] + 426
Centers -[B4INativeObject RunMethod::] + 164
Centers -[b4i_cdetail _rotateview:::] + 1734
CoreFoundation <redacted> + 68
CoreFoundation <redacted> + 292
Centers +[B4I runDynamicMethod:method:throwErrorIfMissing:args:] + 1786
Centers -[B4IShell runMethod:] + 574
Centers -[B4IShell raiseEventImpl:method:args::] + 1998
Centers -[B4IShellBI raiseEvent:eventarams:] + 1340
Centers __24-[B4ITimer startTicking]_block_invoke + 290
libdispatch.dylib <redacted> + 10
libdispatch.dylib <redacted> + 66
libdispatch.dylib <redacted> + 22
libdispatch.dylib <redacted> + 2030
libdispatch.dylib <redacted> + 712
libdispatch.dylib <redacted> + 394
CoreFoundation <redacted> + 8
CoreFoundation <redacted> + 1574

 

[JanPRO]

Excepting you don't have forgotten to copy paste the Objc code, you have done everything right, click on Tools->Clean Project and compile your app again

 

[MotoMusher]

Ah. That was it (objc code). I had not worked with that before. Thank you! Working now.

 

[Alberto Iglesias]

Erel,

Can I identify WHEN finish animation?

Thanks

 

[Erel]

There is no event raised. You can use CallSubPlus to run a sub after the animation ended (based on its duration value).

 

[Alberto Iglesias]

OK Erel, it´s resolve my problem!

Thanks

 

[stanmiller]

You can control the dumping ratio and duration in the main page settings:

I believe this should be "damping" ratio. Where by the oscillations are dampened.