Discover excellent mobile live wallpapers created and uploaded by users - 发现由用户创建并上传的优秀手机动态壁纸

Learn more

Advanced use of fdwall

Fdwall 3.0 has done a lot of adaptation and exploration for Android applications. At present, there are a lot of advanced usages for elements in app. This article will describe each usage in detail.

Posted by on (updated ago)

  • Effect

Elements is no longer limited by the length and width of the image. You just need to select the length and size of the new image. The editing area is the image display area, and the grid area cannot be edited.

screenshot 2021 03 26 15 14 39 8screenshot 2021 03 26 15 14 39 8 1screenshot 2021 03 26 15 20 41 1

In any editing progress, you can light up the zoom button in the upper left to zoom in and out of the sketchpad, and then click fixed again at the appropriate size.

Most effects need to draw an effect mask to determine the range of the effect. In order to draw more effects and more accurate masks, fdwall provides brush size adjustment, brush blur adjustment, and range dectect based on pixel recognition. When drawing, you can adjust the tolerance range of selected colors according to your needs. Fdwall will automatically help you draw the same range of colors on the mask.

screenshot 2021 03 26 15 43 29 9

The preset effects are created based on the particle and Sprite system, and many optimization functions have been added to them. In the latest version, the slow in and slow out of particles have been added to make particles smoother. The slow in and slow out time of particles is calculated as time = (total life time of particles) * (slow in or slow out) / 100

screenshot 2021 03 26 15 51 38 1

In the editor, all parameters can be input directly by clicking the numbers behind, and the range can exceed the specified range of the slider.

  • HTML

HTML page creation is mainly based on a variety of front-end code, from index.html To start loading, it's better to consider the screen adaptation of mobile devices when writing code, such as

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable="1" />

And use% as much as possible in the page.

The advanced use of HTML mainly lies in the user customizable parameters. Just add listener in the JS to process the parameters passed by users to customize the page

  window.wallpaperPropertyListener = {
    applyUserProperties: properties => {

These are set in the page code, and you need to tell the name and type of the fdwall parameter to establish the connection. Click the green button to add parameters

screenshot 2021 03 26 16 10 34 7

The key is the definition that can be received by the properties parameter in JS. In the setting, text is the name presented to the user, and other parameters define the scope of customization. According to different types, there are six setting templates to choose from:

slider, checkbox, combo, color selector, file selector, textinput

screenshot 2021 03 26 16 10 57 4 img 20210326 161404

In the process of writing HTML, there may be a variety of problems, especially for the mobile device's Web adaptation. When the developer mode > USB debugging is turned on in the Android device, the HTML editor of fdwall can be debugged by the Chrome browser, just connect the mobile phone to the computer and input Inspect in the browser Find and debug WebView.

utools 1616747040462

  • Lottie

Lottie is a cross platform animation rendering library developed and open sourced by airbnb. Fdwall integrates it to make it a part of wallpaper. Lottie is fluency, high performance and vector. It can directly render animation made by AE with high performance.

To create a Lottie animation to fdwall, you first need to make animation in AE. The current supported effects are supported-features

After the animation is finished, the animation can be exported to a JSON file by using the bodymovin plug-in in AE, and can be created by opening the file in the Lottie editor of fdwall.

  • Workbench

The advanced use of workbench is mainly concentrated in the event, which integrates some scenarios that may appear in use.

Slide when outside bounds - for whose width or zoomed width is out of display, when touch to slide, it will slide according to the number of pages of launcher. When enabled, the horizontal placement of elements will be ignored.

screenshot 2021 03 26 17 41 34 6

Element touch event and visible event - when the element is touched, it can play animation or perform a task. You can also play animations when wallpaper is visible. Animation can be set to other elements, for example, touching the current element can make other elements act. Click animation to set, including zoom, rotation, translation, transparency. It can be set by sliding the slider or directly inputting the parameters in the digital output. The parameters are limited in range.

screenshot 2021 03 26 17 41 58 3 screenshot 2021 03 26 17 47 02 1


Join the community or sign in with your gaming account to join the conversation: