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

1.gif
2.gif
3.gif

4.gif
 

Attachments

  • Sample1.zip
    45.3 KB · Views: 222
  • sample2.zip
    45.3 KB · Views: 213
  • SD_ImageTile 0.02.zip
    10.9 KB · Views: 216
Last edited:

Star-Dust

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

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
 
Last edited:

inakigarm

Well-Known Member
Licensed User
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

Expert
Licensed User
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

Expert
Licensed User
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

Expert
Licensed User
Then do it.:D
 

Star-Dust

Expert
Licensed User
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.
upload_2018-5-16_13-59-28.png
upload_2018-5-16_13-59-36.png

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
upload_2018-5-16_14-0-28.png


_________________________________________________________

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

Star-Dust

Expert
Licensed User
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

Member
Licensed User
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

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

Eldad Onojetah

Member
Licensed User
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.
 

Attachments

  • Screenshot_20181109-201812.png
    Screenshot_20181109-201812.png
    49.6 KB · Views: 105

Star-Dust

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