B4A Library [Lib] AnimationPlus

Hello everybody,

Here's my new baby. The AnimationPlus library extends the Animation library by adding:
  • the interpolators (Bounce, Accelerate, Overshoot, Cycle, etc.)
  • two parameters:
    PersistAfter (boolean): if True, the animation does not revert to its initial state
    StartOffset (long): delay before the animation really starts
  • AnimationSet (animations on the same view are played together)
  • four new Drawables:
    AnimationDrawable: image-by-image animation
    ClipDrawable: drawable with automatic clipping (ideal for progress bars)
    LayerDrawable: multi-layer drawable
    TransitionDrawable: cross-fade between two drawables
  • for translation animations:
    PauseTranslation/ResumeTranslation/IsPaused: new functions to pause/resume the animation
    AnimationRepeat: new event
List of properties and methods

If you want a library with more possibilities, and easy to use, give a try to NineOldAndroids.

Examples : https://drive.google.com/file/d/0B-kneWWcCy7PUTNERGJIamlzSjA/view?usp=sharing&resourcekey=0-LK97oJs9aV-UHK4CWY0utw
 

Attachments

  • AnimationPlus v2.3.zip
    12.7 KB · Views: 4,603
Last edited:

ozgureffe

Member
Licensed User
Longtime User
Hi informatix, I am planning to develop an app relevant with animations...
It will be similar with sliders that we see on landing pages of web sites.
This link which is made with Javascript and css may give you some clues about what I am thinking.
http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

My b4a app doesn't have to be exatly same but I need some pleasing to the eye visuals.

And my question, is it theoretically possible to create this kind of effects with AnimationPlus & external JSON files like this,

PHP:
/*totally a stab in the dark JSON code sample which will be used by my AnimationPlus powered android app*/
FirstSlide = {
    slideFrom: left,
    duration: 3000,
    layers: [

        firstLayer = {
            'srcFile': 'sample1.png',
            'fadeTo': 0.6,
            'moveToX': 200,
            'moveToY': 120,
            'duration': 1500
        },

        secondLayer = {
            'srcFile': 'sample2.png',
            'fadeTo': 0.4,
            'moveToX': 400,
            'moveToY': 200,
            'duration': 1500
        }
    ]
}
;

Thank you.
 
Last edited:

Vincenzo Fabiano

Member
Licensed User
Longtime User
Guys you can trap the tap on objects "animated" by this library? I'm trying for a while but does not seem to be detected nothing ..
 

Informatix

Expert
Licensed User
Longtime User
Guys you can trap the tap on objects "animated" by this library? I'm trying for a while but does not seem to be detected nothing ..
No you can't. In fact, Android moves an image of your views, not really the views (that's why they are not positioned at the ending place by default). In september, I will release for free my NineOldAndroids lib which does not have this limitation.
 

Saverio

Member
Licensed User
Longtime User
@Informatix,
Hello.

I have some problem with your lib "AnimationPlus".
I have to say that it's a very good job, thank you.

My device is a Galaxy Note 2 with Android 4.1.2(API level 16).
I'm using B4A v3.82 and AnimationPlus v2.30 lib.

The problem that I met, happen when I use, at same time, Translation and PersistAfter.
I use a button to add a panel to the main activity and then apply the animation.
If I use the above combination the new panel will loose the click event at the animation end.
It's working fine if I use Translation mode without PersistAfter.
It's working fine in Alpha(fading) mode with or without PersistAfter.
I haven't tried the other modes.

So, please, can you take a look to the example below:
Thank you
 

Attachments

  • AnimationPlusTest1.zip
    6.6 KB · Views: 326

Informatix

Expert
Licensed User
Longtime User
@Informatix,
Hello.

I have some problem with your lib "AnimationPlus".
I have to say that it's a very good job, thank you.

My device is a Galaxy Note 2 with Android 4.1.2(API level 16).
I'm using B4A v3.82 and AnimationPlus v2.30 lib.

The problem that I met, happen when I use, at same time, Translation and PersistAfter.
I use a button to add a panel to the main activity and then apply the animation.
If I use the above combination the new panel will loose the click event at the animation end.
It's working fine if I use Translation mode without PersistAfter.
It's working fine in Alpha(fading) mode with or without PersistAfter.
I haven't tried the other modes.

So, please, can you take a look to the example below:
Thank you
The view does not lose anything. It's just that Animation or AnimationPlus does not move the view during the animation but an image of this view. You don't have events associated to this image. You have to move your view to the final position if you want clicks to work. A better alternative is to use the NineOldAndroids lib because it really moves the view.
 

Saverio

Member
Licensed User
Longtime User
Thanks for reply,
You have to move your view to the final position if you want clicks to work
I already did that with AnimationEnd event. I have tried it with the very nice AnimationSet.
I'd have hoped to use PersistAfter for a more easy way. But that's it.

Anyway, Great lib
 

Informatix

Expert
Licensed User
Longtime User
Thanks for reply,

I already did that with AnimationEnd event. I have tried it with the very nice AnimationSet.
I'd have hoped to use PersistAfter for a more easy way. But that's it.

Anyway, Great lib
The main purpose of PersistAfter is to avoid a visual glitch (the image of the view going back to its starting position while you move the view to the ending position).
 

luke2012

Well-Known Member
Licensed User
Longtime User
Hi @Informatix !
Is it possible to make a vertical slide in / slide out animation with this library?
For example: show / hide panel with vertical slide effect?
 

luke2012

Well-Known Member
Licensed User
Longtime User
Yes, but it's easier with a dedicated class. See my Sliding Sidebar class.
Thanks for the information!

Compliments for the outstanding work!
I'll try to integrate your class in my project (incoming donation) :)
 

Dave O

Well-Known Member
Licensed User
Longtime User
Nice library! The only glitch for me so far is figuring out what the unnamed parameters do in some of the methods.

For example, I tried using the InitializeScaleCenter method, and couldn't find a matching method in the Android docs, but eventually figured out the parameters as follows:

B4X:
InitializeScaleCenter(eventName as string, startingXScale as float, startingYScale as float, endingXScale as float, endingYScale as float, viewArg as view)

...where the 4 scale numbers are multipliers (e.g. 1 is original size, 2 is twice the size, 0.5 is half the size, etc.)

So, to start the view at its original width and height, and end at double its width and height, the scales would be (..., 1, 1, 2, 2, ...).

Hope this helps!
 

Informatix

Expert
Licensed User
Longtime User
Nice library! The only glitch for me so far is figuring out what the unnamed parameters do in some of the methods.

For example, I tried using the InitializeScaleCenter method, and couldn't find a matching method in the Android docs, but eventually figured out the parameters as follows:

B4X:
InitializeScaleCenter(eventName as string, startingXScale as float, startingYScale as float, endingXScale as float, endingYScale as float, viewArg as view)

...where the 4 scale numbers are multipliers (e.g. 1 is original size, 2 is twice the size, 0.5 is half the size, etc.)

So, to start the view at its original width and height, and end at double its width and height, the scales would be (..., 1, 1, 2, 2, ...).

Hope this helps!
The simplest method to fill the blanks is to look at the similar functions of the Animation library.
 

Dave O

Well-Known Member
Licensed User
Longtime User
Just tried using an AnimationSet to combine 3 animations of an ImageView.

Basically, I want the image to:
- move off the screen (translate)
- get smaller as it goes (scaleCenter)
- spin around its center (rotateCenter) as it goes.

Each animation works fine on its own, but when I combine them, instead of the image moving off the screen, while spinning around its center and scaling down to nothing, it disappears in an inward spiral.

It looks like the transformations of each animation frame are being combined, so that when the view is partly rotated, the translation is then being applied relative to the new rotation, and so on, so I get a spiral.

Cool effect, but I actually want them to working independently (as they would in an animation editor like Unity). Is there a way to play simultaneous animations on a view without them affecting each other?
 

Dave O

Well-Known Member
Licensed User
Longtime User
I had the same idea this morning, so i just tried swapping out AnimationPlus animations for NoA animations.

When NoA combines animations (in a set), it keeps them separate (e.g. translation, scaling, and rotation don't affect each other), unlike AnimationPlus (which combines them in weird and wonderful ways - see above). This gives me the effect I was originally trying for.

I am still trying to get NoA to reset view positions after the animation is done, but if I can't solve that, I'll post in the NoA thread.

Thanks!
 

LucaMs

Expert
Licensed User
Longtime User
I know you wrote also NineOldAndroids and this library is "old", but...

can you modify the comments of commands to get a better help (arg1, arg2,...)?

upload_2015-11-3_0-38-20.png


Thank you, @Informatix
 
Top