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

 

[Informatix]

hi informatix i have also paid for the animation plus lib can i get the oldnine library too please??

thanx

Sent.

 

[Munir Mehta]

Great work...

 

[ozgureffe]

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,

/*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.

 

[thedesolatesoul]

It can be done but u will have to write your own code to parse the json and translate it to the animation and layers.

 

[Vincenzo Fabiano]

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]

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.

 

[Vincenzo Fabiano]

It Informatix, in fact I solved just by using your other magnificent library! Thank you

 

[Saverio]

@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

 

[Informatix]

@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]

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]

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]

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?

 

[Informatix]

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?

Yes, but it's easier with a dedicated class. See my Sliding Sidebar class.

 

[luke2012]

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]

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:

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]

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:

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]

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?

 

[Informatix]

Is there a way to play simultaneous animations on a view without them affecting each other?

To play animations, my NineOldAndroids library is far superior to AnimationPlus so you should really change to NoA. You will have no problem of this kind with it.

 

[Dave O]

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]

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,...)?

Thank you, @Informatix