B4A Library SD: ImageTile (Image Swap Animation)

New library to move from one image to another with a brick animation. The image is decomposed into a tile, each tile is rotated and the new image appears in the back.
You can set the number of grids/tile from the Design

SD_ImageTile

Author: Star-Dust
Version: 0.02

• ImageRubik
  • Functions:
    • AddToListImage (Image As Bitmap) As ImageRubik
      
    • Class_Globals As String
      
    • ClearListImage As String
      
    • DesignerCreateView (Base As Panel, Lbl As Label, Props As Map) As String
      
    • DimentionMatrix (Cuts As Int) As ImageView()
      
    • GetBase As Panel
      
    • getIndex As Int
      
    • Initialize (Callback As Object, EventName As String) As String
      
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
    • ListImageCount As Int
      
    • RubikRotation As String
      
    • setIndex (Index As Int) As String
      
    • setIndexWithAnimation (Index As Int) As String
  • Properties:
    • Index As Int
      
    • IndexWithAnimation
• ImageTile
  • Functions:
    • AddToListImage (Image As Bitmap) As ImageTile
      
    • Class_Globals As String
      
    • ClearListImage As String
      
    • DesignerCreateView (Base As Panel, Lbl As Label, Props As Map) As String
      
    • GetBase As Panel
      
    • getIndex As Int
      
    • Initialize (Callback As Object, EventName As String) As String
      
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
    • ListImageCount As Int
      
    • setIndex (Index As Int) As String
      
    • setIndexWithAnimation (Index As Int) As String
      
    • TileRotation As String
  • Properties:
    • Index As Int
      
    • IndexWithAnimation

 

[Star-Dust]

Now I'm realizing to add this class.
It still has a lot of flaws ... we'll see if I can

It's not really what I wanted to achieve, I thought I would make something similar to Rubik's cube by rotating and horizontal stripes

 

[inakigarm]

New library to move from one image to another with a brick animation. The image is decomposed into a tile, each tile is rotated and the new image appears in the back.

This version doesn't work with B4J, isn't it? (I know the Post title but as you have made many B4X libraries before... ;-) )

 

[Star-Dust]

This version doesn't work with B4J, isn't it? (I know the Post title but as you have made many B4X libraries before... ;-) )

I'm taking advantage of the rotation on the X, Y, Z axis that exist for Android views.
On the b4x tracks there is only one rotation that corresponds to the one on the Z axis of Android, the one used for these animations and the rotation on the Y axis
You could even build such a rotation but it would take a long time for math / trigonometric calculations with Sin Cos for each pixel
At the moment I see it too demanding.
But if there were any native methods it would be easier

 

[LucaMs]

Now I'm realizing to add this class.
It still has a lot of flaws ... we'll see if I can
View attachment 67937
It's not really what I wanted to achieve, I thought I would make something similar to Rubik's cube by rotating and horizontal stripes

Pensa che molti mesi fa stavo pensando proprio ad una cosa del genere e crearci un'app.
Non dovrebbe essere difficile, partendo da quanto feci qui:


A long time ago I was thinking of creating an app based on this type of animation.
It should not be difficult, starting with this:


Use more than one image and play with rotation AND PIVOT.

 

[Star-Dust]

Then do it.

 

[LucaMs]

Then do it.

Tomorrow, just 2 hours

 

[LucaMs]

https://www.b4x.com/android/forum/threads/nineoldandroids-or-designer.76535/

 

[Star-Dust]

https://www.b4x.com/android/forum/threads/nineoldandroids-or-designer.76535/

It is not enough to turn a flat cure on an axis to give the idea of a rotating cube.
This is because the native commands for the rotation or even the nineold library allow to rotate on all 3 axes but the pivot point can be modified only for X and Y value but not for zeta value.

BUT it is necessary to move backwards with the zeta axis in order to make a complete turn with two faces that are at 90 degrees between them

_________________________________________________________

Anyway, please open a thread for this, do not fill this with non-library talk, this creates confusion . Thank you

 

[Star-Dust]

Now I'm realizing to add this class.
It still has a lot of flaws ... we'll see if I can
View attachment 67937
It's not really what I wanted to achieve, I thought I would make something similar to Rubik's cube by rotating and horizontal stripes

Update rel. 0.02

Add Class ImageRubik

 

[Eldad Onojetah]

Hi @Star-Dust,

Using this component, it always displays a number:

2560.0

in an toast. It appears even in release mode. It says for about 18 seconds before it disappears.

Any reason why?

 

[Star-Dust]

I did not understand, do you have an example of code and an image to show me?

 

[Eldad Onojetah]

I have attached a screenshot of your Sample 2.
If you notice, there is a number appearing 2560.0
This doesn't disappear until about 15 - 18secs later.

 

[Star-Dust]

it's a ToastMessage, now I've taken it off. Download the library from Post#1 again