文档管理中心
我的
内容分发主题中心开发教程主题引擎HarmonyOS 4.X及以下版本主题引擎规范应用位置可交互桌面<CommonWallpaper>

可交互桌面<CommonWallpaper>

功能概述

可交互桌面基本全面继承现有锁屏的功能和写法,暂不支持的能力后面会陆续验证测试开放,桌面脚本使用前请注意是否支持。

目前支持的动效如下:

展开

标签

释义

<Text>

文本

<Image>

图片

<Time>

时间

<DateTime>

日期

<CountDownTime>

倒计时

<ImageNumber>

数字图片

<SourceImage>

帧解锁视图

<Mask>

遮罩

<GroupImage>

图片混合

<Geometrical figure>

几何图形

<PathUtil>

路径解析

<Group>

视图组

<VirtualScreen>

虚拟屏幕

<Var>

自定义变量

<GlobalVariable>

全局变量

<Array>

控件数组

<Expression>

数字表达式

<StringExpression>

字符串表达式

<VarSpeedFun>

变速函数

<SensorBinder>

传感器

<BatteryCharging>

充电状态

<shake>

摇一摇

<frameRate>

恒定帧率

<VariableFramerate>

可变帧率

<AlphaAnimation>

透明度动画

<PositionAnimation>

位移动画

<RotationAnimation>

旋转动画

<SizeAnimation>

缩放动画

<SourcesAnimation>

帧动画

<VariableAnimation>

变量动画

<TimeAnimation>

时间动画

<Command>

基础命令

<SoundCommand>

声音命令

<visibility>

可见性命令

<VariableCommand>

变量命令

<GroupCommands

命令组

<CycleCommand>

周期命令

<vibrate>

震动设置

<MultiScreens>

多屏幕展示

<LiveWallpaper>

视频桌面

<CommonWallpaper>

全景桌面

<WaterWallpaper>

水波纹

<PathRun>

路径动画

<Graph>

图形渲染

<MeshImage>

网格化

<VR>

全景动效

<Button>

按钮(pressed事件不起作用)

说明

在可交互桌面中,以下功能请谨慎使用,避免被桌面图标遮挡或与桌面交互冲突。

  • 文字类:时间<Time>、文本<Text>、日期<DateTime>、数字图片<ImageNumber>、倒计时<CountDownTime>。
  • 交互类:帧解锁视图<SourceImage>、多屏幕展示<MultiScreens>、水波纹<WaterWallpaper>、网格化<MeshImage>、按钮<Button>。

使用说明

  1. 可交互桌面不支持使用视频<Video>控件,如需在桌面上使用视频资源,请使用视频桌面<LiveWallpaper>。
  2. 配置主题包时,必须要在description.xml中添加以下新增项:HWThemeEngine,示例如下:
    收起
    自动换行
    深色代码主题
    复制
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <HwTheme>
    3. <title>video_0402</title>
    4. <title-cn>无声1</title-cn>
    5. <author>author_name</author>
    6. <designer>designer_name</designer>
    7. <screen>FHD</screen>
    8. <version>10.0.0</version>
    9. <font>Default</font>
    10. <font-cn>默认</font-cn>
    11. //新增项
    12. <wallpaper>HWThemeEngine</wallpaper>
    13. <briefinfo>请在这里输入对主题的描述</briefinfo>
    14. </HwTheme>

结构说明

wallpaper文件夹下有1个manifest.xml文件和素材资源。

设计师可在manifest.xml文件中调用素材资源,使用脚本编写各式各样的动态效果。

wallpaper文件夹资源示例:

manifest.xml

manifest.xml是视频桌面的描述文件,通过<CommonWallpaper>标签将描述内容包括在里面。

XML规范

收起
自动换行
深色代码主题
复制
  1. <CommonWallpaper version="" frameRate="" displayDesktop="" screenWidth="">
  2. </CommonWallpaper>

<CommonWallpaper>参数说明

通过主标签<CommonWallpaper>,能够设置帧率、震动开关、默认屏幕宽度等参数。

展开

参 数

类 型

选 项

注 释

frameRate

数值

选填

锁屏帧率设置,单位为(帧/秒),控制动画等动效刷新速率,默认值为60fps。

screenWidth

数值

选填

描述文件的虚拟的屏幕宽度,根据该宽度和手机屏幕的宽高比能够计算出相应的虚拟的屏幕的高度。描述文件中的数值基于该虚拟的屏幕的宽高,例如分辨率为1560*720的手机在设置screenWidth为1080的描述文件中,其#screen_width为1080,#screen_height为1920,能够保持在同一个屏幕宽高比例的手机中组件的相对位置保持不变。设定屏幕宽度标准。如果指定为720,锁屏中所有元素的位置都按720p的布局编写,1080p、480p等分辨率的手机会自动进行缩放。

说明
可交互桌面支持60帧,设置frameRate="60"即可。
收起
自动换行
深色代码主题
复制
  1. <CommonWallpaper version="1" frameRate="60" displayDesktop="true" screenWidth="1080">

应用示例

示例一:在桌面上使用流体动效。

  • wallpaper/manifest.xml 脚本
收起
自动换行
深色代码主题
复制
  1. <CommonWallpaper id="201805221979" screenWidth="1080" displayDesktop="true" frameRate="30" version="1">
  2. <Var const="true" persist="true" expression="#screen_width" name="w"/>
  3. <Var const="true" persist="true" expression="#screen_height" name="h"/>
  4. <Var expression="1" name="gravityRatio"/>
  5. <Var expression="0.1" name="viscosity"/>
  6. <FluidsView bgSrc="bg_0.jpg" waterAlpha="1" color="argb(255, 255, 255, 255)" viscosity="#viscosity" gravityRatio="#gravityRatio">
  7. <CircleShape yPosition="1.5" xPosition="0.7" radius="2"/>
  8. </FluidsView>
  9. </CommonWallpaper>

示例二:锁屏和桌面均支持点击屏幕切换壁纸。

  • unlock/lockscreen/manifest.xml 脚本
收起
自动换行
深色代码主题
复制
  1. <Lockscreen displayDesktop="true" frameRate="60" id="201905098326" screenWidth="1080" version="1" vibrate="false">
  2. <Var expression="1" name="cartoon" />
  3. <Button x="500" y="1800" w="#screen_width" h="#screen_height">
  4. <Trigger action="down">
  5. <VariableCommand name="cartoon" expression="#cartoon+1" condition="lt(#cartoon,6)"/>
  6. <VariableCommand name="cartoon" expression="1" condition="eq(#cartoon,6)"/>
  7. </Trigger>
  8. </Button>
  9. <Image x="0" y="0" w="#screen_width" h="#screen_height" src="tu/unlock_wallpaper.jpg" srcid="#cartoon" />
  10. <Text x="500" y="1800" size="60" color="#ffff0000" format="cartoon的值是:%d" paras="#cartoon"/>
  11. </Lockscreen>
  • wallpaper/manifest.xml 脚本
收起
自动换行
深色代码主题
复制
  1. <CommonWallpaper version="1" frameRate="30" displayDesktop="true" screenWidth="1080">
  2. <Var expression="1" name="cartoon" />
  3. <Button x="500" y="1800" w="#screen_width" h="#screen_height">
  4. <Trigger action="down">
  5. <VariableCommand name="cartoon" expression="#cartoon+1" condition="lt(#cartoon,6)"/>
  6. <VariableCommand name="cartoon" expression="1" condition="eq(#cartoon,6)"/>
  7. </Trigger>
  8. </Button>
  9. <Image x="0" y="0" w="#screen_width" h="#screen_height" src="tu/unlock_wallpaper.jpg" srcid="#cartoon" />
  10. <Text x="500" y="1800" size="60" color="#ffff0000" format="cartoon的值是:%d" paras="#cartoon"/>
  11. </CommonWallpaper>