Javascript animations for android below 4.4?


#1

hello,

in my current ionic app i used the move.js framework for animations.
(i have a directive in which i use the move.js library to animate my divs: i need size changes and background color transitions)

it is working really well on all ios simulator devices and on my android 4.4 device.
but i figured that it does not work on android versions below 4.4, neither in the emulator nor on real devices.

Is there another way on how to do animations (like backgroundcolor transistions, size changes, …) in my ionic app so it’s working for Android 4.0 and upwards? (or is there any other library that is working on below 4.4?)

i already found the thread talking about wrapping an app in crosswalk (link) but thats no option for me since the size increases dramatically, i need the app to be as small as possible.

any suggestions? =)


#2

If you need just simple background-colors and size change animations, you can use css for that.

https://docs.angularjs.org/guide/animations


#3

yes i tried using that, with this animations: http://daneden.github.io/animate.css/

and in my directive then

elem.addClass('animated pulse');

but that triggers the animation only once, i need the animation every time the directive triggers (every time a value changes).

I tried it with removing and re adding the class to the element, but that all doesnt work for me :frowning:
Any suggestions on how i could re-trigger such css animations? (and not just on show or hide events)


#4

You can do something like this


#5

@v4rjo, add infinite class to the class attribute and you’ve got inifinite animation


#6

yeah i already tried something like that. but those animations then do not trigger that reliable, and also they’re not in sync (i need to trigger multiple events on the same time, so also the animations should be (atleast nearly) in sync…)

I switched to the javascript because it was much smoother and did work much better regarding timing and reliability.

so there isn’t any other way of doing animations in such a mobile app?

@rafaellop doesn’t that mean that the animation plays infinitely? i want to play it once on certain events. for example on every button click i want to flash the backgroundcolor from black to it’s original color. “infinite” as i understand it just keeps the animation going the whole time?


#7

Yes, that means it plays inifinitely. You can however create your own class for the animation and define any time in the CSS for the transition. You can also switch on/off the animations anytime you wish e.g. on events, timers, etc… Just use a scope variable for a switch and use it in the condition for ng-class. e.g:

<div ng-class="timerON == true ? 'inifinite' : ''">

You can turn on the animation in an event, e.g. ng-click?

<div ng-click="animateIT()">
function animateIT() {
  $scope.timerON = true;
  $timeout(function() {
     $scope.timerON = false;
  }, 3000);
}

BTW, CSS animations are faster than JavaScript because they are native code run by the browser.