Other Simple animations in B4A v4.00

Erel

B4X founder
Staff member
Licensed User
Longtime User
Three new features that will soon be available:

1. Screen video recording based on the new ADB feature:

SS-2014-12-03_17.13.03.png


This feature requires an Android 4.4 device. It is very useful for demonstrations.

2. Simple animations. Three new methods were added to the View objects which make animations very simple:
View.SetLayoutAnimated - Similar to View.SetLayout. Allows you to change the view size and position. The change is animated.
View.SetVisibleAnimated - Similar to View.Visible. Fades in or out the view.
View.SetColorAnimated - Similar to View.Color. Animates the color change (based on the HSV color space).

See this video for an example (it looks smoother on the device), click on the small gear button and change to HD:


The complete code:
B4X:
Sub Globals
   Private btnMove As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("1")
End Sub
Sub btnHide_Click
   btnMove.SetVisibleAnimated(500, False)
End Sub

Sub btnShow_Click
   btnMove.SetVisibleAnimated(500, True)
End Sub

Sub btnMove_Click
   btnMove.SetLayoutAnimated(1000, Rnd(0, 90%x), Rnd(0, 90%y), Rnd(50dip, 200dip), Rnd(50dip, 200dip)) 
End Sub

Sub btnColors_Click
   Activity.SetColorAnimated(1000, Colors.White, Colors.Red)
End Sub

3. Layout animations. Layouts created with the designer are optionally animated. The animation is based on the views anchors:


Note that the animations are based on APIs introduced in Android 4.0. On older devices the methods changes will be applied without animations.
 

Douglas Farias

Expert
Licensed User
Longtime User
1° = my sugestion *-*-*-*-*-*-* tyty

question, its possible save the video on the pc @Erel ?
for example, i make a app, now i want make a video for put on ggplay, its possible add a option to make a video and save on the pc?
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
question, its possible save the video on the pc @Erel ?
Yes, this is how it works. When you click on the Stop button the standard save file dialog appears and the file is saved on the PC. The temp file field is used during recording. In most cases you do not need to change it.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
The important point about these three methods is that they are very simple to use. For example instead of calling Button1.Visible = False you call Button1.SetVisible(1000, False) and you get a nice animated effect.
For more complex animations you can use the Animation or AnimationPlus libraries. You can also use a timer to chain animations.

Note that these three methods are similar to B4i animation methods.
 
Upvote 0

Shadow&Max

Active Member
Licensed User
Longtime User
Pretty slick Erel!
 
Upvote 0

Jim Brown

Active Member
Licensed User
Longtime User
One thing to be aware of, at least with my limited testing, is to avoid calling the same commands close together. Otherwise the followup command is ignored because the first is still running:

B4X:
Button1.SetVisible(1000, False)
Button1.SetVisible(250, True) ' Likely to be missed
 
Upvote 0

Troberg

Well-Known Member
Licensed User
Longtime User
Found a little bug (or oddity, depending on how you view it).

I have a panel with a few child views on it. When I use SetLayoutAnimated to move it and make it larger, the child views scale nicely and it looks like an entire unit being moved in and slightly enlarged, just like it should.

However, when I go the other way, and make it smaller, the child controls won't scale, instead, they'll remain full size as the panel shrinks.

Here's the relevant code:

B4X:
Sub ShowControls(Show As Boolean)

    If Show Then
        UpdatePlayButtons
        panControls.Top=100%y
        panControls.Left=20%x
        panControls.Width=60%x
        panControls.BringToFront
        panControls.SetLayoutAnimated(500, 0%x, 100%y -panControls.Height, 100%x, panControls.Height)
    Else
        panControls.SetLayoutAnimated(500, 20%x, 100%y, 80%x, panControls.Height)
    End If
  
End Sub

panControls, of course, is the panel with child views on it.
 
Last edited:
Upvote 0

Troberg

Well-Known Member
Licensed User
Longtime User
And, ignore my previous post. It's just me who can't type. 80<>60...

Edit: and, no, something's still strange. When making it smaller, it looks like it first places every child which, if they were large size, would fit on the smaller size (so, kind of stretched, and some of them at the right edge missing), then resize them to the smaller size.

To duplicate, just make a panel, add some view to it and toggle between large and small size.
 
Last edited:
Upvote 0
Top