Shake effect


#1

I’m working on an ionic project. I’ve set up this simple directive:

app.directive('shaker', function ($timeout, $rootScope, $state) {
    return {
      restrict: 'A',
      controller:function($scope){
        $scope.save = function() {
            $rootScope.seed = Math.random();
            return $state.go('app.drawing');
        };
      },
      link: function (scope, element) {
         element.on('click', function() {
            element.addClass('shake shake-hard shake-constant');
            $timeout(function(){
               element.removeClass('shake shake-hard shake-constant');
               scope.save();

            },3000);
         });
      }
    };
  });

using this library http://elrumordelaluz.github.io/csshake in the browser it works fine but in the device (android) it doesn’t work.

How to make a shake effect working also in the mobile ?


#2

Depends on which device you are using? On android < 3, translates are not supported at al, and the library u mentioned basically uses translates all over the place.


#3

Thanks iwantwin for the quick reply.
I’m testing on an old samsung device with android 2.3 :frowning:
I’d like to provide the same effect for all the versions
Is there a way to do that ?


#4

I think you’d be better off with just using a fallback method for older devices, something that “just works” should be my advice for this specific problem.With the library you chose, you can’t really fix this. You could however mimick some behaviour by altering the position of the elements directly with javascirpt, something I would highly discourage because it will be both bad performance and not looking nice. I think you are better of by playing a popup on older devices with a text explaning “some graphical content will be static due to the lack of support on android devices lower then version 3.0” (users could opt to buy a 3.0 instead of 4.3 if they would want to update) and just fallback to “static” images on older devices

You could also look into packing chromium webview with your application, I’ve read this enables more modern features, but have not tried this out or have any experience with it. Have seen it appear on the ionic forums a few times, but while people recommend it for the extra features, your app package size will increase and performance might drop a bit. This should however enable you to use this library.


#5

Ok,I got the point thanks for the tips :slight_smile: