Creating a Shake-Effect

11 Feb


Join Community:

Drag, Drop, Snap Blocks, Build app

 Tutorial by Italo

Tutorial Difficulty: Medium
This tutorial assumes you already have experience building apps using AppyBuilder

Shake Effect 

A shake effect is a visual indicator that shows a window or component shaking when we type a wrong login information, such as a wrong password, username, etc.

In this tutorial, I’ll show you how how to create this effect using AppyBuilder by using the TextUtils extension which comes included in every AppyBuilder project.

This is how it looks when finished (You can make any component shake, by just changing the component ID in the procedure parameter).

This video shows the Shake-Effect in-action

Create app:

Use AppyBuilder to start a new app

Design Editor:
First, we need to add the AppyBuilder built-in TextUtils extension to design-editor

Next, add a clock, with properties shown below

Blocks Editor:

In the blocks editor, we create three variables as shown below:

Next, we create a procedure:

Next, from your components block, select the Clock that was added in design-editor and add blocks as shown block.  The image show blocks for the Timer event that once enabled will be triggered every 50 milliseconds until it is disabled:

  • First, it makes the device vibrate.
  • Then it uses the method TextUtils.Rotate to rotate the specified component in the angle provided. But here’s the trick: Every time it gets here the angle is NEGATED, so if the angle is 3 in the first event, next will be -3, then the next will be 3, -3, 3, -3 etc, etc. That way, the components gets rotated rapidly between 3 degrees and -3 degrees, simulating a shaking movement.
  • How do we negate a number? By multiplying it by -1 (i.e. 8x-1=-8, -4x-1=4)
  • Now we subtract 1 from ShakeDuration, which controls how many shakes we want to make.
  • If ShakeDuration = 0, then we need to stop shaking, but we can’t leave the component as it is, because it will be rotated.
  • So we do one last rotate to angle 0 to leave it straight.
  • And lastly we turn off the timer, to stop the effect.


Finally, we need to Call/Invoke the procedure to create the shake-effect; where: ShakeComponent: Is the ID of the component you want to shake (can be any component!), ShakeAngle: Is how much the component will rotate with each shake, and ShakeDuration is how many shakes you want the component to make before stopping.

Join forum community for tutorials, discussions, technical questions


Share, Like us below 🙂


Leave a comment

Posted by on February 11, 2018 in Uncategorized


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: