Fdwall

Fdwall

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

Learn more

FDwall的进阶使用

进阶使用中文指南, FDwall 3.0针对Android端应用进行了大量的适配和探索, 目前在应用中有大量针对元素的高级用法, 本文将详细描述各使用方法。

Posted by on (updated ago)


  • 1.特效Effect

在最新的FDwall 中特效元素的创建不再受到长宽等比例的限制, 只需选择图片并裁剪到任意希望的大小即可开始编辑。 编辑区域为图片显示区域, 网格区不可编辑。

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

在任意的编辑过程中都可以点亮左上角的缩放按钮进行画板的缩放, 并在合适的大小再次点击固定。

大多数的effect效果都需要绘制效果蒙版以确定效果的应用范围,为方便绘制更多效果和更精确的蒙版, FDwall提供了画笔大小调整及画笔硬度调整,以及基于像素识别的色彩范围选择。 绘制时可以根据需要调整选择色彩的容差范围, FDwall将自动帮你把相同范围的色彩绘制上蒙版。

screenshot 2021 03 26 15 43 29 9

预设特效是基于粒子和精灵系统创建, 并在其中加入了许多优化功能, 在最新的版本中加入了粒子的缓入缓出, 使粒子的出现和消失更加平滑, 粒子缓入缓出时间计算分别为 缓入\出时间=(粒子总生命时间)*(缓入\出大小)/100

screenshot 2021 03 26 15 51 38 1

在编辑器中所有的参数都可以点击后方的数字进行直接输入,其范围可以超过滑动条的规定范围。

  • 2.页面HTML

页面HTML的创作主要基于各种前端代码进行创建, 由入口index.html开始加载, 在编写代码时最好对移动设备的屏幕进行适配考虑, 例如在html头部加入

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

并在页面中尽可能使用%来设定位置等等。

HTML的进阶使用主要在于用户可定制参数, 只需在页面的JS中加入监听即可处理各种用户传递的参数来客制化页面

<script>
  window.wallpaperPropertyListener = {
    applyUserProperties: properties => {
        if(properties.define1){
              properties.define1.value;
         }
         if(properties.define2){
            properties.define2.value;
         }
    }
  };
</script>

这些是在页面代码中进行的设置, 还需要告诉FDwall参数的名字和类型来建立连接。 点击绿色按钮即可添加参数

screenshot 2021 03 26 16 10 34 7

其中键就是在js中可以由properties参数接收到的define, 设置中text为呈现给用户的名称, 其他参数划定了客制化的范围。 根据不同的类型, 有6种设置模版可供选择:

slider滑动条, bool复选框, combo下拉菜单, color颜色选择器, file文件选择器, textinput文字输入

screenshot 2021 03 26 16 10 57 4img 20210326 161404

在编写HTML中或完成编写后, 可能会出现各种问题, 特别是针对移动设备的Web有各种适配的问题出现, 当在Android设备中开启开发者模式->USB调试时, FDwall的HTML编辑器可以被chrome浏览器调试, 只需将手机连接电脑并在浏览器中输入chrome://inspect 即可发现Webview并调试

utools 1616747040462

  • 动画Lottie

lottie是由Airbnb开发并开源的跨平台动画渲染库, FDwall将其集成使其可以成为壁纸的一部分, lottie的特点是流畅, 高性能, 矢量。 它可以直接高性能地渲染由AE制作的动画。

要创建一个lottie动画到FDwall首先需要在AE中制作动画, 目前受支持的效果如下

utools 1616747628584utools 1616747643267utools 1616747658070utools 1616747676135

utools 1616747700255utools 1616747718957utools 1616747740936utools 1616747754121

完成动画制作后, 在AE中使用bodymovin插件即可导出动画为一个json文件,在FDwall的lottie编辑器中打开该文件即可创建。

  • 工作台

工作台的进阶使用主要集中在事件中,其中集成了一些使用过程中可能出现的场景。

元素超出滑动——针对长度或缩放长度超出可显示的屏幕, 在横向滑动的过程中会根据Launcher的页面数进行滑动。 开启后元素的横向放置将被忽略。

screenshot 2021 03 26 17 41 34 6

元素触摸事件及初始显示事件——元素在被触摸时可播放相应的动画或执行某个任务。 在息屏到亮屏的过程中也可以播放动画。 其中动画可以设置给其他元素, 例如触摸当前元素可以让其他元素动作。 点击动画即可进行设置, 包含缩放, 旋转, 平移, 透明度。 可以滑动滑条或直接在数字出输入参数进行设置,参数有范围限制。

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

  • 社区分享

mod.io可以由用户上传Guide文章, 在Guide页面点击加号即可书写编辑, 对于中文输入请注意mod.io限制单个词汇200长度, 中文标点符号也将算作长度, 可换做空格或添加空格进行间隔

Comments

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