Join Community: http://Community.AppyBuilder.com
Drag, Drop, Snap Blocks, Build app
Tutorial by Italo
Tutorial Difficulty: Medium
This tutorial assumes you already have experience building apps using AppyBuilder
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
Use AppyBuilder to start a new app
First, we need to add the AppyBuilder built-in TextUtils extension to design-editor
Next, add a clock, with properties shown below
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 🙂