B4A Library SD: ImageTile (Image Swap Animation)

Discussion in 'Additional libraries, classes and official updates' started by Star-Dust, May 15, 2018.

  1. Star-Dust

    Star-Dust Expert 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.
    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
     

    Attached Files:

    Last edited: May 16, 2018 at 6:40 PM
  2. Star-Dust

    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: May 16, 2018 at 9:07 AM
    inakigarm likes this.
  3. inakigarm

    inakigarm Well-Known Member 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... ;-) )
     
  4. Star-Dust

    Star-Dust Expert Licensed User

    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
     
    inakigarm likes this.
  5. LucaMs

    LucaMs Expert Licensed User

    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.
     
  6. Star-Dust

    Star-Dust Expert Licensed User

  7. LucaMs

    LucaMs Expert Licensed User

    Tomorrow, just 2 hours :cool:
     
  8. LucaMs

    LucaMs Expert Licensed User

  9. Star-Dust

    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: May 16, 2018 at 1:03 PM
    Jorge M A likes this.
  10. Star-Dust

    Star-Dust Expert Licensed User

    Update rel. 0.02

    Add Class ImageRubik
     
    Salvatore Montoro likes this.
Loading...