引擎概述
引擎制作锁屏，基于xml用特定的语法描述锁屏界面。在一定需求下可用于开发风格多变的用户界面。可方便地通过更换皮肤改变界面风格、动画甚至交互方式。框架支持动态帧率，不必按照固定帧率不停渲染。在没有动画和更新的时侯停止渲染，此时仅占用极少资源，对于缓慢变化的动画使用低帧率渲染，高动态的动画开始后立即调整到高帧率全速渲染。全速渲染时全屏帧率基本可以达到60帧。合理使用可以既炫酷又不费电。
动态脚本在锁屏中的应用
引擎通过解析资源中的描述脚本manifest.xml文件，生成一个丰富多彩符合设计者预期的画面，应用在锁屏中，使锁屏变得生动有趣
锁屏资源包含的文件
manifest.xml
<Lockscreen version="1" frameRate="30" vibrate="false" screenWidth="1080" id="201906225469"> <Var name="notification" expression="1"/> <Image src="bj.jpg"/> <Time x="540" y="155" align="center" alignV="center" src="time.png"/> <Group x="170" y="10"> <Image x="200" y="230" srcid="#year/1000" src="date.png"/> <Image x="200+20" y="230" srcid="#year/100%10" src="date.png"/> <Image x="200+40" y="230" srcid="#year%100/10" src="date.png"/> <Image x="200+60" y="230" srcid="#year%10" src="date.png"/> <Image x="200+80" y="230" src="date_dot.png"/> <Image x="200+100" y="230" src="date.png" srcid="(#month+1)/10"/> <Image x="200+120" y="230" src="date.png" srcid="(#month+1)%10"/> <Image x="200+140" y="230" src="date_dot.png"/> <Image x="200+160" y="230" src="date.png" srcid="#date/10"/> <Image x="200+180" y="230" src="date.png" srcid="#date%10"/> <Image x="200+220" y="230" src="week.png" srcid="#day_of_week"/> </Group> <Unlocker name="unlocker" bounceInitSpeed="2000" bounceAcceleration="3000"> <StartPoint x="0" y="0" w="1080" h="#screen_height"></StartPoint> <EndPoint x="0" y="-350" w="1080" h="200"> <Path x="0" y="0" w="1080" h="#screen_height"> <Position x="0" y="0"/> <Position x="0" y="-180"/> </Path> </EndPoint> </Unlocker> <!-- 电量不足提醒 --> <Text x="#screen_width/2" y="(#screen_height)-10" category="BatteryLow" alignV="bottom" color="#000000" size="48" text="电量 不足！" alpha="180" align="center"/> <!-- 充电中提醒 --> <Text x="#screen_width/2" y="(#screen_height)-10" category="Charging" alignV="bottom" color="#000000" align="center" size="42" format="充电中 %d%%" alpha="180" paras="#battery_level"/> <!-- 电量充满提醒 --> <Text x="#screen_width/2" y="(#screen_height)-10" category="BatteryFull" alignV="bottom" color="#000000" size="42" text="充电 完成!" alpha="180" align="center"/></Lockscreen>
基础功能
视图
文本-Text
功能概述
按照特定格式来显示文本，支持对文字大小、颜色、行间距、是否自动换行（当文字实际宽度超过设置的宽度时）等进行设置；此外，还提供文字跑马灯、文字阴影以及文字路径（即可以将文字按照设定的路径轨迹来进行展示）等高级的文字效果。
XML规范
xxxxxxxxxx<Text color="" size="" format="" paras="" textExp="" width="" autoLineFeed="" bold="" spaceTimes="" spaceExtraAdd="" shadowDx="" shadowDy="" Radius="" shadowColor="" marquee="" showTime="" showStyle="" marqueeColor="" tileMode="" canPath=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注释 |
|---|---|---|---|
| color | 字符串 | 选填 | 文字颜色，支持6位或8位16进制颜色表示，如：#FFFFFF . #FFFFFFFF，8位中前两位表示透明度， 后六位依次表示红. 绿. 蓝；支持函数argb(255,255,255,255) (argb(透明度，红，绿，蓝)， 每个数值在[0-255]范围内）；支持字符串变量，如：@abc，字符串变量需为无#的6或8位16进制表示： "ffffff". “ffffffff"，或argb函数。注意：设置color后通用属性alpha设置无效。 |
| size | 数值 | 选填 | 文字大小，取值正数，默认40，单位为像素。 |
| format | 字符串 | 选填 | 支持在文字中引用数值或字符串变量，用%d，%s 指定变量位置，并在paras参数中指定对应变量表达式； 支持引用多个变量；%d表示数值表达式，%s表示字符串表达式。 |
| paras | 字符串 | 选填 | 如果使用format参数, 则需要在paras参数中指定%d，%s对应的变量表达式；多个变量表达式用"," 隔开； %d表示数值表达式，%s表示字符串表达式。 |
| textExp（text） | 字符串 | 选填 | 文字表达式，可直接引用单变量，不支持由多个变量构建的表达式。示例：想要输出“现在时间是9点”， 则可以写成textExp="'现在时间是'+#hour+'点'"；text与textExp效果相同。使用text方式， 则可以写成text="现在时间是9点"。 |
| width | 数值 | 选填 | 文字宽度，当文字超过该宽度时会被切掉。如果设置了自动换行，则会折行显示文字。 |
| autoLineFeed | 字符串 | 选填 | true/false，控制是否支持自动换行。true为支持自动换行，默认false。为true时须设置width， 否则不会自动换行。 |
| textalign | 字符串 | 选填 | 文字的对齐方式，可选输入为left, right, center，分别为左对齐，右对齐和居中对齐。 |
| bold | 字符串 | 选填 | true/false，字体是否加粗，true表示加粗，默认false。 |
| spaceTimes | 数值 | 选填 | 行间距倍数，类似于word行间距，默认1。 |
| spaceExtraAdd | 数值 | 选填 | 行间距的额外增加值，即在基础行距上增加多少行间距。单位像素，默认0。 |
| shadowDx | 数值 | 选填 | 文字阴影横向偏移距离，单位为像素。 |
| shadowDy | 数值 | 选填 | 文字阴影纵向偏移距离，单位为像素。 |
| radius | 数值 | 选填 | 模糊半径，建议范围[1-24],值越小文字阴影越清晰。（模糊半径相同时， size大的文本阴影相对size小的文本模糊程度略小一些）注意：小于等于0无阴影效果。 |
| shadowColor | 字符串 | 选填 | 阴影颜色，颜色取值见color参数解释；不设置该参数则无文字阴影效果。 |
| marquee | 字符串 | 选填 | true/false，控制是否使用文字跑马灯效果，true为使用，默认false。 注意：若同时使用文字跑马灯和文字阴影，则文字阴影颜色会被跑马灯颜色覆盖。 |
| showTime | 数值 | 选填 | 跑马灯移动间隔时长，单位为ms。 |
| showStyle | 数值 | 选填 | 0/1，默认为0，控制跑马灯效果。0表示单向闪动，1表示来回闪动。 |
| marqueeColor | 字符串 | 选填 | 跑马灯灯的颜色，颜色取值见color参数解释。 |
| tileMode | 字符串 | 选填 | 跑马灯颜色平铺模式，支持两种模式。STRETCH：跑马灯颜色边缘拉伸，是默认值； LOOP：color和marqueeColor在水平方向上重复。注意：如果无法清楚地看到两种模式的区别， 可以将text内容设置为，中文字符7个以上，英文字符10个以上。 |
| canPath | 字符串 | 选填 | true/false，控制是否将文字按照path路径进行展示，其中路径由一系列PathItem定义。 Text标签中x，y参数表示路径起始点； PathItem标签参数解析：PathItem 表示一小段路径， 其中type表示路径类型（quadTo或者lineTo）；controlX, controlY表示路径控制点的横纵坐标 （路径控制点类似PS中钢笔工具两点之间锚点的位置坐标，用于控制弧度大小）； PathItem标签中x，y参数表示路径结束点的横纵坐标；注意：controlX, controlY 仅在type类型为 quadTo时生效，为lineTo时无须设置。 |
应用示例
示例一：演示文本行间距、自动换行、文字阴影、文字跑马灯等效果。
x<Text x="100" y="400" size="38" text="华为引擎文本1.4倍行间距，支持自动换行" width="300" autoLineFeed="true" spaceTimes="1" spaceExtraAdd="0.4" Radius="5" shadowDx="3" shadowDy="3" shadowColor="#FFFFFFFF" format="您有%d个未读信息和大约%d个未接来电" paras="#sms_unread_count,#call_missed_count" visibility="#sms_unread_count"/><Text x="500" y="400" text="演示跑马灯效果" size="48" color="#ff0000" marquee="true" showTime="100" showStyle="0" tileMode="STRETCH" marqueeColor="#00ff00"/>示例二：演示文本路径效果，支持将文字按照PathItem中定义的路径进行展示。
xxxxxxxxxx<Text x="50" y="700" text="此文字可以根据，路径展示的例子，演示文字" canPath="true" > <PathItem type="quadTo" controlX="80" controlY="50" x="120" y="50"/> <PathItem type="quadTo" controlX="230" controlY="150" x="330" y="300"/> <PathItem type="quadTo" controlX="430" controlY="400" x="540" y="400"/> <PathItem type="quadTo" controlX="630" controlY="400" x="700" y="400"/> <PathItem type="lineTo" x="900" y ="600"/></Text>
图片-Image
功能概述
用于在锁屏界面上展示一张图片，可以指定图片路径，模糊程度等属性，支持通用属性来设置图片的位置、大小以及旋转等等。
XML规范
模式1：使用src解析图片资源。
xxxxxxxxxx<Image src="" srcid="" blur=""/>模式2：使用srcExp解析图片资源。
xxxxxxxxxx<Image srcExp="" blur=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 选填 | 图片名称的相对路径，图片文件名image.png，可在前加文件夹，如wenjianjia/image.png。 src与srcExp两个参数必须填写一个，以指定显示的图片内容。图片支持用户自动义， 自定义路径必须为sd卡下路径，须以“../../../../../sdcard”开头，例如“../../../../../sdcard/Pictures/123.png”， 后续路径可自定义。图片必须为png/jpg格式。图片大小须小于10M。 |
| blur | 字符串 | 选填 | 模糊半径值的设置，其值为0到24，设置值越大则图片模糊程度越高。 |
| srcid | 数值 | 选填 | 图片序列后缀数字，一般用变量表示，可以根据变量显示不同的图片，如果src="pic.png" srcid="1" 则最后会显示图片 "pic_1.png"，大于0， 正整数，支持数字表达式。 |
| scaleType | 字符串 | 选填 | 图片的缩放模式，目前支持三种模式：fill、center_crop和hold_center_crop，默认为center_crop模式。 1. fill 表示填充满屏幕，若图片比例与屏幕不匹配会导致图片拉伸。 2. center_crop 表示按照屏幕宽高的比例进行缩放，使图片居中充满整个屏幕，多余部分裁剪。 3. hold_center_crop 表示图片不进行缩放处理，居中裁剪脚本中设置的w、h区域。 |
| srcExp | 字符串 | 选填 | 图片源表达式，解析字符串表达式指定图片的源地址。无法与src共存，当存在src值时， 图片使用src作为地址。 |
| useVirtualScreen | 字符串 | 选填 | 是否支持虚拟屏幕，true/false，默认false，若为true支持虚拟屏幕则src参数必须为虚拟屏幕的名称。 |
应用示例
示例：左上角(120,500)显示一张图片，距离左上角点x方向110，y方向80像素的位置为旋转中心，根据旋转中心x轴有一个50度，根据旋转中心y轴有一个50度的旋转，加载图片源名为yun_#id.png。图片包含位移动画和旋转动画，并且有一个模糊半径为15的模糊效果。
xxxxxxxxxx<Image x="120" y="500" pivotX="110" pivotY="80" rotationX="50" rotationY="50" src="yun.png" blur="15" srcid="#id"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="3500" y="0" time="31000"/> </PositionAnimation> <RotationAnimation > <Rotation angle="0" time="0"/> <Rotation angle="360" time="60000"/> </RotationAnimation></Image>
动态图片-Image
动效概述
Image的增强功能，支持Gif类型图片循环播放。
场景举例
可用于鬼畜类型的gif图播放。
特定场景下播放gif，比如游戏中的传送门。
更换IP形象的搞笑表情：点击头像，可切换动态表情，循环播放。
XML规范
xxxxxxxxxx<Image src="" loop="" save=""/>| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 图片文件名，如：image.gif，也可在前加文件夹，如wenjianjia/image.gif。当图片名称中包含.gif， 循环播放Gif图片;图片的大小、位置等参数与Image设置相同，只需要在src参数中填入gif图片名称即可。 小于5.0MB动态显示，大于或等于5.0MB静态显示，设计师应提供大小合适图片资源。 |
| loop | 字符串 | 选填 | 该参数不配置或空，默认循环播放gif动画；若显式配置该参数true循环播放或false只播放一次。 |
| save | 数值 | 选填 | 可为表达式；大于1是保存Gif至Gallary；等于或小于1时不保存。 |
代码展示和效果
Gif背景动态图显示播放。
xxxxxxxxxx<Var const="false" expression="1" name="gallary"/><Image x="0" y="0" src="shuiwa.gif" loop="true" save="#gallary"/>
视频-Video
功能概述
视频播放控件，将一段视频加入到视图中，能够设置播放、循环播放、声音控制等功能；支持AVI，MP4，MOV等多种格式的本地视频的播放。
XML规范
xxxxxxxxxx<Video name="" x="" y="" w="" h="" living="" src="" defaultBitmap="" sound="" scaleType="" play="" looping="" visibility=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 视频命名，可用于videoCommand的定位Video对象，以控制视频的播放、换源和音量等。 |
| x | 数值 | 选填 | 视频左上角x位置，支持数字表达式，默认值为0。 |
| y | 数值 | 选填 | 视频左上角y位置，支持数字表达式，默认值为0。 |
| w(width) | 数值 | 选填 | 视频显示的宽，单位像素，默认为屏幕大小。 |
| h(height) | 数值 | 选填 | 视频显示的高，单位像素，默认为屏幕大小。 |
| play | 字符串 | 选填 | 是否加载之后自动开始播放，true/false，默认值为true。 |
| looping | 字符串 | 选填 | 视频是否循环播放，true/false，默认值为false不循环播放。 |
| sound | 数值 | 选填 | 视频播放声音控制，值为0~1之间的值，值越大声音越大。 |
| living | 字符串 | 选填 | 路径是否为URI路径而非本地路径，true/false。living为true则src需为uri路径，默认false， 默认为本地路径。 |
| src | 字符串 | 必填 | 视频的文件路径，可带文件夹路径，例如aa/exmple.mp4，js.mp4等。 |
| scaleType | 字符串 | 选填 | 支持fill、fit_width二种模式，默认为fill模式。fill表示填充满width和height宽高， 若视频比例与屏幕不匹配会导致视频拉伸。fit_width表示宽匹配功能，视频缩放到设置的width那么宽， 按照视频比例调整height，若视频宽高比例大于屏幕，则填充不满屏幕，若视频宽高比小于屏幕， 则会有部分视频不在显示区域中。 |
| visibility | 数值 | 选填 | 视频组件的可见性，支持true/false和1/0来分别调整视频的可见或者不可见。 |
| defaultBitmap | 字符串 | 选填 | 选填，默认图片，即视频未加载时或者停止时默认显示的图片。 普通手机/折叠屏手机折叠态/平板竖屏态时使用。图片需要和普通手机/折叠屏手机折叠态/平板竖屏态 原本的视频保持一致的宽高，推荐使用视频首帧图片。因为视频加载需要时间，先显示一张首帧图， 让视频显示有个平滑的过渡效果。 |
| defaultBigBitmap | 字符串 | 选填 | 选填，默认图片，即视频未加载时或者停止时默认显示的图片。折叠屏手机展开态/平板横屏态时使用。 图片需要和折叠屏手机展开态/平板横屏态原本的视频保持一致的宽高，推荐使用视频首帧图片。 因为视频加载需要时间，先显示一张首帧图，让视频显示有个平滑的过渡效果 |
应用示例
示例一：插入一段视频，视频左上角坐标是x=0，y=0，宽高为屏幕的宽高，采用的模式是fit_width，那么最终显示的宽度为屏幕宽度，显示的高度为原视频高宽比例乘以屏幕宽度。视频的源是目录下的js.mp4文件，并且在视频未加载的时候会展示bg.jpg这张图片。视频加载之后会自动播放，并且没有声音，视频设置为循环播放。
xxxxxxxxxx<Video name="js" src="js.mp4" defaultBitmap="bg.jpg" play="true" sound="0" looping="true" scaleType="fit_width"/>示例二：插入一段有声视频。
xxxxxxxxxx<!-- 有声视频需要增加参数 sound="1" 无声为 sound="0" --> <Video name="js" src="video.mp4" play="true" sound="1" looping="true"/>
时间-Time
功能概述
这里的时间，其实是由10个数字图片和分隔符图片依时间格式（HH:mm）组成的图片组合。使用该功能需要准备“0”-“9” 10张数字图片和“：”时间间隔图片。该组合图片也支持通用属性和图片的透明度、缩放、旋转动画。
XML规范
xxxxxxxxxx<Time src="" space=""/>参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 时间图片的前缀和后缀组合字符串，例如src=“time.png"， 此时文件夹中的数字图片和分隔符图片名称为”time_0.png“，...，"time_9.png"和”time_dot.png" |
| space | 数值 | 选填 | 时间图片的间隔，单位为像素，数值越大图片之间的间距越大，小于0时图片会有重叠，默认值为0 |
应用示例
示例一：显示时间，space为10可以使所有数字和时间间隔图片间的间隔增加10个像素。
xxxxxxxxxx<Time x="#screen_width/2" align="center" y="220" src="time.png" space="10"/>图片展示时间的另一种自定义写法：通过根据时间变量计算得到Image的srcid，从而实现利用图片显示时间。
xxxxxxxxxx<Group x="350" y="60"> <Image x="50" y="100" src="time.png" srcid="int((#hour24)/10)"/> <Image x="190" y="100" src="time.png" srcid="int((#hour24)%10)"/> <Image x="295" y="100" src="time_dot.png"/> <Image x="390" y="100" src="time.png" srcid="int((#minute)/10)"/> <Image x="530" y="100" src="time.png" srcid="int((#minute)%10)"/> </Group>示例二：带透明度动画效果时间。设置时间图片在每个1000ms内从透明到不透明变化，呈现闪动效果。
xxxxxxxxxx<Time x="#screen_width/2" align="center" y="220" src="time.png"> <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="1000"/> </AlphaAnimation> </Time>
日期-DateTime
功能概述
显示指定格式（format）的日期文本，会根据手机默认语言显示该语言下format中特殊字符对应的表示。该功能也支持通用属性和透明度、旋转、缩放动画。
XML规范
xxxxxxxxxx<DateTime color="" size="" format=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| format | 字符串 | 必填 | 通过格式化字符，输出期望格式的日期，字符含义如下表。（实际功能： 替换format中出现在格式化字符含义表格中的字符，其余字符保持原位）。 如果没有format则会根据区域和语言显示月日星期的信息 |
| color | 字符串 | 选填 | 日期文本颜色，支持6或8位16进制颜色表示，如#ffffff |
| size | 数值 | 必填 | 日期文本的大小，默认为0，支持表达式 |
格式化字符的含义
时间格式化通用字符：
| 字 母 | 表 示 | 数据格式 | 示 例 |
|---|---|---|---|
| y | 年 | Year | yyy，yyyy：四位数字年，2019y，yy：两位数年，19 |
| M | 年中的月份 | Month | M ： 7MM ： 07MMM ： Jul，7月MMMM ： July，七月MMMMM ： J，7 |
| d | 月份中的天数 | Number | d ：5dd ：05 |
| E | 星期中的天数 | Text | E，EE，EEE ： Fri，周五EEEE ： Friday 星期五EEEEE ： F，五 |
| a | （Am/pm）. （上午/下午） 标记 | Text | AM PM /上午 下午 |
| H | 一天中的小时数（0-23） | Number | 0，会根据手机时间设置更换成12/24小时制显示 |
| k | 一天中的小时数（1-24） | Number | 24，会根据手机时间设置更换成12/24小时制显示 |
| K | am/pm 中的小时数（0-11） | Number | 0，会根据手机时间设置更换成12/24小时制显示 |
| h | am/pm 中的小时数（1-12） | Number | 12，会根据手机时间设置更换成12/24小时制显示 |
| m | 小时中的分钟数 | Number | m ： 7mm ： 07mmm ： 007mmmm ： 0007 |
| s | 分钟中的秒数 | Number | s ： 7ss ： 07sss ： 007ssss ： 0007 |
| z | 时区 | Text | zzzz：“中国标准时间”ZZZZZ：“+08:00”ZZZZ：“GMT+08:00”z/Z/ZZ/ZZZ：“+0800” |
时间格式化特殊字符：
| 字 母 | 表 示 | 数据格式 | 示 例 |
|---|---|---|---|
| NNNN | 农历 | Text | 六月初八，手机系统默认语言对功能无效，始终显示中文 |
| AA | 生肖 | Text | 十二生肖，手机系统默认语言对功能无效，始终显示中文 |
| YY | 年干支 | Text | “己亥” 年干支 目前只支持2019及以后的年份，手机系统默认语言对功能无效，始终显示中文 |
| NN | 月干支 | Text | ”壬申” 等月干支，手机系统默认语言对功能无效，始终显示中文 |
| ee | 日干支 | Text | “癸未” 等日干支，手机系统默认语言对功能无效，始终显示中文 |
| II | 时辰干支 | Text | “甲子”等 时辰干支，手机系统默认语言对功能无效，始终显示中文 |
| I | 地支时辰 | Text | “子” 等地支时辰，手机系统默认语言对功能无效，始终显示中文 |
| N | 农历月 | Text | “正月”，...，“腊月”等 农历月，手机系统默认语言对功能无效，始终显示中文 |
| e | 农历日 | Text | “初一”，...，“廿十” 等 农历日，手机系统默认语言对功能无效，始终显示中文 |
| aa | 时间段描述 | Text | 0-5点 凌晨；5-11点 上午； 11-13点 中午； 13-17点 下午；17-19点傍晚；19-24点 晚上。 手机系统默认语言对功能无效，始终显示中文 |
| G | 公元 | Text | "公元"，手机系统默认语言对功能无效，始终显示中文 |
| Y | 公元年 | Text | 如“二〇一九”，手机系统默认语言对功能无效，始终显示中文 |
| CM | 汉字月 | Text | “一”，...，“十二” 等汉字月，手机系统默认语言对功能无效，始终显示中文 |
| DD | 汉字日 | Text | "一"，...，"三十一"等汉字日，手机系统默认语言对功能无效，始终显示中文 |
| D | 一年的第几天 | Number | 一年的第几天 |
| t | 二十四节气 | Text | 二十四节气 目前只支持2019-2050年的节气查询，手机系统默认语言对功能无效，始终显示中文 |
应用示例
示例一：带动画效果日期。添加透明度动画效果，设置日期文本在每个1000ms内从透明到不透明变化，呈现闪动效果。
xxxxxxxxxx<!--带动画效果日期--><DateTime x="20" y="450" color="#000000" size="40" format="yyyy.M.d. E" > <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="1000"/> </AlphaAnimation> </DateTime>示例二：部分格式化字符使用展示。
xxxxxxxxxx<!--注意：手机系统语言为中文时显示2019年11月5日 星期二，英文时显示2019年11月5日 Tuesday--><DateTime x="20" y="450" color="#000000" size="40" format="yyyy年MM月d日 EEEE" /><!--干支年月日时辰--><DateTime x="400" y="800" size="30" format="YY年 NN月 ee日 II时" color="#69000000"/><!--生肖、公元年、汉字月--><DateTime x="50" y="1000" size="30" format="生肖AA年 GY年CM月DD日 一年的第D天" color="#69000000"/><!--时区--><DateTime x="50" y="1100" size="30" format="目前是aa 时区Z" color="#69000000"/><!--节气--><DateTime x="200" y="900" size="30" format="t" color="#69000000"/>
倒计时-CountDownTime
功能概述
能够计算目前时间到另外一个日期时间所剩余的时间，提供了多个不同粒度的时间显示以及不同的目标日期的设定方法。
XML规范
xxxxxxxxxx<CountDownTime name="" date="" countDownType=""/>倒计时标签为-CountDownTime其中仅仅包含了时间的设定以及显示的粒度设定，其中name为全局变量的设定，使用直接对全局变量进行引用，具体见全局变量。
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 设定全局变量的名称，能够使用该名称对全局变量进行值的设置和获取， 注意使用全局变量一定要在声明之后。 |
| countDownType | 字符串 | 必填 | 输入日期的类型，分为concrete和loop，详情见后文 |
| date | 字符串 | 必填 | 目标日期，根据不同的日期或者时间的格式，结合类型判断目标时间 |
| unit | 字符串 | 选填 | 粒度单位，提供不同粒度的倒计时显示，默认为day |
xxxxxxxxxx* 其中countDownType指定了不同的计时时间 （日期值必须为正常存在的日期）* concrete：固定日期的倒计时 2020-01-01 、2020-01-01 09:00 计算为绝对值* loop: 循环日期的倒计时* 提供 1. 每年日期 01-01* 2. 每月日期 01* 3. 每周 Sunday Wednesday 等星期全称* 4. 相对日期： yesterday tomorrow theDayAfterTomorrow theDayBeforeYesterday* 5. 每天时间: 09:00* unit能够提供不同的粒度来表示衡量时间包括：* 1. day 天* 2. hour 小时* 3. minute 分钟* 4. second 秒* 5. hourOnly 将剩余时间全部转化成小时* 6. minuteOnly 将剩余时间全部转化成分钟* 7. secondOnly 将剩余时间全部转化成秒
注意：
无论是过去的时间还是将来还剩下来的时间的输出都是正值，方便自定义文字的输出。
unit 中hour、minute、second等只包含不满一个周期的时间，即hour范围为为0-23、 minute为0-59、 second为0-59。如果需要全部计算请使用后面带Only的unit字段。
注意所有填写的日期必须是真实存在的日期。
应用示例
示例：不同concrete和loop以及不同粒度的倒计时的应用。
xxxxxxxxxx<!--显示离下一个星期天的天数--><CountDownTime name="shijian" date="Sunday" countDownType="loop"/><Text x="540" y="400" color="#ff000000" size="60" text="'离下一个星期天 ' + #shijian + '天'" align="center"/><!--显示离下一个1月1日的天数--><CountDownTime name="shijian1" date="01-01" countDownType="loop"/><Text x="540" y="500" color="#ff000000" size="60" text="'离下一个1月1日 ' + #shijian1 + '天'" align="center"/><!--显示离下一个1日的天数--><CountDownTime name="shijian2" date="01" countDownType="loop"/><Text x="540" y="600" color="#ff000000" size="60" text="'离下一个1日 ' + #shijian2 + '天'" align="center"/><!--显示离2020-01-24的天数--><CountDownTime name="shijian3" date="2020-01-24" countDownType="concrete"/><Text x="540" y="700" color="#ff000000" size="60" text="'离2020年春节 ' + #shijian3 + '天'" align="center"/><!--显示离下一个国庆节的天数--><CountDownTime name="shijian4" date="10-01" countDownType="loop"/><Text x="540" y="800" color="#ff000000" size="60" text="'离国庆节 ' + #shijian4 + '天'" align="center"/><!--显示离昨天24点的小时数--><CountDownTime name="shijian5" date="yesterday" countDownType="loop" unit="hour"/><Text x="540" y="900" color="#ff000000" size="60" text="'离昨天 ' + #shijian5 + '小时'" align="center"/><!--显示离明天的小时和分钟数--><CountDownTime name="shijian6" date="tomorrow" countDownType="loop" unit="minute"/><CountDownTime name="shijian7" date="tomorrow" countDownType="loop" unit="hour"/><Text x="540" y="1000" color="#ff000000" size="60" text="'离明天 ' + #shijian7 + '小时' + #shijian6 + '分钟'" align="center"/><!--显示离后天总共的分钟数--><CountDownTime name="shijian8" date="theDayAfterTomorrow" countDownType="loop" unit="minuteOnly"/><Text x="540" y="1100" color="#ff000000" size="60" text="'离后天 ' + #shijian8 + '分钟'" align="center"/><!--显示离明天的总共的秒数--><CountDownTime name="shijian9" date="tomorrow" countDownType="loop" unit="secondOnly"/><Text x="540" y="1200" color="#ff000000" size="60" text="'离明天 ' + #shijian9 + '秒'" align="center"/><!--显示离元旦的天小时分钟和秒数--><CountDownTime name="shijian10" date="01-01" countDownType="loop" unit="minute"/><CountDownTime name="shijian11" date="01-01" countDownType="loop" unit="hour"/><CountDownTime name="shijian12" date="01-01" countDownType="loop" unit="second"/><CountDownTime name="shijian13" date="01-01" countDownType="loop" unit="day"/><Text x="540" y="1300" color="#ff000000" size="60" text="'离元旦 ' + #shijian13 + '天' + #shijian11 + '小时' + #shijian10 + '分钟' + #shijian12 + '秒'" align="center"/><!--显示离2020-01-01 09:00的天小时分钟和秒数--><CountDownTime name="shijian17" date="2020-01-01 09:00" countDownType="concrete" unit="minute"/><CountDownTime name="shijian18" date="2020-01-01 09:00" countDownType="concrete" unit="hour"/><CountDownTime name="shijian19" date="2020-01-01 09:00" countDownType="concrete" unit="second"/><CountDownTime name="shijian20" date="2020-01-01 09:00" countDownType="concrete" unit="day"/><Text x="540" y="1400" color="#ff000000" size="50" text="'离2020元旦早上9点 ' + #shijian20 + '天' + #shijian18 + '小时' + #shijian17 + '分钟' + #shijian19 + '秒'" align="center"/><!--显示离下一个09:00的小时分钟和秒数--><CountDownTime name="shijian14" date="09:00" countDownType="loop" unit="hour"/><CountDownTime name="shijian15" date="09:00" countDownType="loop" unit="minute"/><CountDownTime name="shijian16" date="09:00" countDownType="loop" unit="second"/><Text x="540" y="1500" color="#ff000000" size="60" text="'离明天上班还有' + #shijian14 + '小时' + #shijian15 + '分钟' + #shijian16 + '秒'" align="center"/>
数字图片-ImageNumber
功能概述
数字图片能够对输入的数值或者数值表达式进行解析，并按照表达式中数字顺序拼接字符图片。例如,src="number.png" 则会使用 number_0.png，number_1.png 等字符图片来显示数字（即映射"_"字符后的数字字符）。串联图片-ImageSeries已包含了数字图片的功能，在使用ImageNumber的时候较长的数值会导致不精确的问题，建议使用串联图片ImageSeries。
XML规范
xxxxxxxxxx<ImageNumber number="" src=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| number | 数值 | 必填 | 要显示的数值或者数值表达式，取值需为有效数值，且位数小于8位。 有效数值示例：1234，1023456；无效数值示例：0123 |
| src | 字符串 | 必填 | 字符图片源的文件名，例如图片前缀是pre，则需要准备pre_0~pre_9等10张图片， 图片后缀保持与src一致 |
应用示例
示例一：该示例展示了number取数值1234567的情景。由于图片前缀为number，则会取number_1.png,...,number_7.png这7张字符图片，拼接为数字串并进行显示。
xxxxxxxxxx<ImageNumber x="200" y="300" number="1234567" src="number.png"/>示例二：该示例展示了number取全局变量#screen_width（屏幕宽度）得到参数值并且与src使用下划线进行拼接，加载相应的图片。例如#screen_width等于720, 则取number_7.png、number_2.png、number_0.png这几张图进行显示。
xxxxxxxxxx<ImageNumber x="200" y="300" number="#screen_width" src="number.png"/>
串联图片-ImageSeries
功能概述
串联图片ImageSeries提供了根据输入字符串进行图片串联的功能，即能够按照字符顺序将字符图片拼在一起并显示；相比较ImageNumber，串联图片能够解析字符而不仅限于数字，提供了更强的解析能力。例如，可以用字符图片显示 '2020.01.01'（包含两个'.'）或者 'Moon Festival 8.15'(包含字符)，而这些功能数字图片均无法支持。
XML规范
xxxxxxxxxx<ImageSeries src="" space="" string="" mapList=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 待拼接的字符图片前缀，前缀与后缀通过“_”连接 |
| string | 表达式 | 必填 | 按照字符串的形式提供待拼接的多张字符图片后缀，支持字符串和字符串表达式。 例如，letter_0.png表示一张完整字符图片名称，其中letter表示前缀，0表示后缀，通过“_”相连 |
| space | 数值 | 选填 | 待拼接的字符图片之间的间隔，默认为0 |
| mapList | 字符串 | 必填 | 映射列表，用英文逗号分隔。其中，每项第一个字符表示原字符（对应string中的字符）， 后续字符串（一个或多个）表示映射字符串（对应字符图片名称） |
应用示例
示例一：该示例展示了string为字符串"Aa/Bb/Cc/Dd"的情形，可以支持字母以及斜杠字符的展示。关键在于mapList设置字符对应关系。
xxxxxxxxxx<Text x="400" y="600" color="#00ff00" size="50" text="测试字符串Aa/Bb/Cc/Dd拼接功能" align="center"/><ImageSeries x="200" y="750" src="letter.png" space="10" string="Aa/Bb/Cc/Dd/" mapList="aa,bb,cc,dd,Aaa,Bbb,Ccc,Ddd,/dot" />示例二：该示例展示string为字符串变量的情形，实现显示农历日期的功能。string中使用了ifelse、plus、#month以及#date等函数和变量。0表示汉字“初”，1-9为汉字“一”- “九”，a表示汉字“十”，b表示汉字“廿”，c表示“冬”，d表示“腊”，“/”表示“月”。如果月份小于9则加1（#month取值为0-11），等于9则将其转化为a，等于10则转化为c，等于11则转化为d; #date则分别计算十位和个位数字，并找到对应字符图片。注意：这时需要把string中可能出现的字符在mapList中做字符映射，否则无法显示。
xxxxxxxxxx<ImageSeries src="date.png" x="400" y="830" mapList="00,11,22,33,44,55,66,77,88,99,aa,bb,cc,dd,/dot" string="ifelse(lt(#month,9),plus(#month,1),eq(#month,9),a,eq(#month,10),c,d)+'/'+ifelse(lt(#date,11),0,lt(#date,20),a,lt(#date,30),d,3)+ifelse(lt(#date,11),1*#date%11,lt(#date,30),1*#date%10,a)" />说明
- 因目录中图片英文名称不区分大小写，所以用两个小写字母表示大写字母；如：C 图片名称可用letter_cc.png来进行表示;
- xml文档中不合法的字符不要用，比如：&，<、>、单引号，双引号等。
帧解锁视图-SourceImage
功能概述
根据设定的图片和时间间隔顺序播放图片，是另外一种形式的帧动画。它提供解锁的功能，当触摸时帧数大于等于设定值时能够调用解锁操作，若未大于等于设定值时抬起手指，则加速递减回首帧。但是，帧解锁视图会在一定程度上牺牲流畅度，降低系统的内存占用，适用于不需要高流畅度的帧动画效果。
应用场景
- 鸟在天空一直飞翔
- 星星夜空不停地闪烁
- 花儿在草中绽放等连续性的动画场景
XML规范
xxxxxxxxxx<SourceImage sourceName="" format="" from="" to="" loop="" space="" direction="" unlockTo=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| sourceName | 字符串 | 必填 | 指定图片名的前缀，例如name="aa/pic_"，表示aa文件夹中pic开头的图片 |
| format | 字符串 | 必填 | 图片后缀名，.jpg/.png，组合成的图片的文件名，例如 aa/pic_0.jpg |
| from | 数值 | 选填 | 动画首帧图片名字的序号，正整数，默认0，支持表达式 |
| to | 数值 | 必填 | 动画末帧图片名字的序号，正整数，默认0，支持表达式 |
| space | 数值 | 选填 | 每帧动画播放的间隔时间（毫秒），正整数，默认30 |
| loop | 字符串 | 选填 | 动画是否需要循环，true/false，默认为true。true时循环播放， 可与direction和unlockTo配合设置触发解锁。false时只播放一次，direction无效， 即不能触发解锁，unlockTo参数依旧有效，在小于unlockTo时点击屏幕加速递减回到首帧并停止， 若长按至unlockTo则停止在unlockTo；若大于等于unlockTo时点击屏幕则停止在当前帧； 若不点击则在to帧时停止。 |
| direction | 数值 | 选填 | 0/1，如果需要使用帧动画解锁，direction设置为0，loop必须为true，unlockTo必须有值。 如果不需要解锁，设置direction为1，loop为true时，会正常从首帧到末帧循环播放。direction默认值1 |
| unlockTo | 数值 | 选填 | 触发解锁的帧序号，(from,to)间正整数，如果需要使用帧动画解锁，必须设置触发解锁的帧序号。 触摸屏幕后，当当前图片序号大于等于这一帧序号-1时解锁。如果unlock直接设置为末帧或者超过末帧， 序号会直接增大到末帧并解锁。注意解锁功能需要与一个button区域结合使用，即需要一个button区域才能够触发。 |
应用示例
示例一：图片从aa/pic_0.png到aa/pic_30.png以时间间隔为500ms进行循环播放，在没有触摸操作时，图片顺序增大，当到末帧时图片从递增变为递减播放帧图片。当触摸屏幕的时候，如果当时播放帧数大于unlock帧-1则执行解锁操作，否则当前帧数以3帧每次的速度回退到首帧。使用一个全屏的button区域作为触发区域。
xxxxxxxxxx<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="true" space="500" direction="0" unlockTo="10"/><Button x="0" y="0" w="#screen_width" h="#screen_height"/>示例二：图片从aa/pic_0.png到aa/pic_30.png以时间间隔为500ms进行循环播放，在没有触摸操作时，图片顺序增大，当到末帧时图片从首帧开始循环播放帧图片。当触摸屏幕的时候，则当前帧数以3帧每次的速度回退到首帧。若长按屏幕，如果当前帧小于等于unlock帧则一直在首帧到unlock帧循环，若当前帧大于unlock帧则回到首帧开始循环。使用一个全屏的button区域作为触发区域。
xxxxxxxxxx<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="true" space="500" direction="1" unlockTo="10"/><Button x="0" y="0" w="#screen_width" h="#screen_height"/>示例三：图片从首帧aa/pic_0开始以时间间隔500ms播放到aa/pic_30帧之后停止播放，最后显示的为末帧。若在动画播放到第10帧前点击屏幕，则以3帧每次的速度退回到首帧；若在动画播放到第10帧前长按屏幕，则最终停止在第10帧；若在动画播放到第10帧或以后点击屏幕，则停止在当前帧。使用一个全屏的button区域作为触发区域。
xxxxxxxxxx<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="false" space="500" unlockTo="10"/><Button x="0" y="0" w="#screen_width" h="#screen_height"/>
遮罩-Mask
功能概述
该功能需要与Image共同使用，对Image标签中的图片（tgt.png）和mask标签中的图片（ori.png）进行混合，支持12种混合模式。例如，通过混合可起到遮罩效果，即按照ori图片对tgt图片进行裁剪，使tgt图片显示与ori图片重叠区域的内容。通过设置align参数，可以达到tgt图片移动但ori图片不移动的效果。
应用场景
- 可用于给图片增加一个蒙版的效果。
- 可用于对图片的一部分进行遮罩。
- 固定遮罩可制作局部展示，做头像。
XML规范
xxxxxxxxxx<Image src=""> <Mask src="" align="" xfermode=""/></Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | src为遮罩图片的源地址 |
| align | 字符串 | 选填 | 取值为absolute或relative。其中，absolute表示绝对位置，即ori图片不随着tgt图片移动而移动， 遮罩(Mask)x,y坐标为相对于屏幕左上角的坐标；如果为相对位置relative，则ori会随着tgt而移动， 遮罩(Mask)x,y坐标为相对于图片左上角的坐标。 默认情况下为relative。 |
| xfermode | 字符串 | 选填 | 设置两张图片之间的混合模式，共提供12种混合模式供选择：clear(0)，src(1)，dst(2)，src_over(3)， dst_over(4)， src_in(5)， dst_in(6)， src_out(7)，dst_out(8)，src_atop(9)， dst_atop(10)， xor(11)。 可以通过输入字符串或者对应的数字编号来选择混合模式，默认为6 |
混合模式示例
应用示例
示例一：通过输入字符串来选择混合模式，同时采用绝对位置，当移动源图片时，遮罩图片不移动。
xxxxxxxxxx<Image x="0" y="#screen_height-92" src="src_out.png"> <Mask x="0" y="#screen_height-92" src="ori.png" align="absolute" xfermode="src_out"/></Image>示例二：通过输入数字编号来选择混合模式，同时采用相对位置，当移动源图片时，遮罩图片跟随移动。
xxxxxxxxxx<Image x="0" y="#screen_height-92" src="dst.png"> <PositionAnimation> <Position x="480" y="0" time="1000"/> <Position x="480" y="0" time="2000"/> </PositionAnimation> <Mask x="0" y="#screen_height-92" src="ori.png" align="relative" xfermode="6"/></Image>效果展示
图片混合-GroupImage
功能概述
基于Group标签，可以对组内的多张图片实现混合模式的效果。其中，Group作为容器，组内最后一张图片设置混合模式参数，用于对之前所有的图片进行一个混合操作（除最后一张图片外所有图片作为一个整体）。不支持Mask标签中的绝对位置方式。
应用场景
- 可用于将多张图片叠加显示组成一个新的图片。
- 可以通过图层混合叠加达到微立体的效果。
XML规范
xxxxxxxxxx<Group x="" y="" w="" h="" layered=""> <Image x="" y="" align="" alignV="" src=""/> <Image x="" y="" align="" alignV="" src="" xfermode=""/></Group>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| layered | 字符串 | 必填 | true/false，是否开启图片混合功能；开启后会对Group中的图片进行混合操作 |
| xfermode | 字符串 | 必填 | 图片混合模式，支持12种混合模式，具体参考Mask标签。 |
应用示例
示例一：该示例在Group标签种设置layered参数为true，开启了图片混合操作，并在最后一个Image标签中设置了xor混合模式。
xxxxxxxxxx<Group x="100" y="100" w="800" h="800" layered="true"> <Image x="100" y="100" align="center" alignV="center" src="dst1.png"/> <Image x="200" y="200" align="center" alignV="center" src="dst2.png"/> <Image x="261" y="261" align="center" alignV="center" src="src.png" xfermode="11"/></Group>
几何图形-Geometrical figue
功能概述
在一些内存要求高的场景下，使用绘制几何图形的方式替代-Image以减小内存，目前支持矩形-Rectangle、圆角矩形-Rectangle、圆形-Circle、椭圆-Ellipse、扇形-Arc、弧线-Arc、直线-Line。
应用场景
- 可以写固定几条路线，点击按钮随机播放路线动画
- 可写几何图形拼七巧板之类拼图效果
XML规范
xxxxxxxxxx<Rectangle x="" y="" w="" h="" cornerRadius="" strokeColor="" fillColor="" weight="" cap="" dottedLine=""> <!-- FillGradient 填充渐变；StrokeGradient 描边渐变 --> <FillGradient> <!-- 线性、放射、扫描渐变 --><!--选择其一--> <Linear/Radial/Sweep x="" y="" x1="" y1="" tileMode=""> <GradientPoint color="" position=""/> <GradientPoint color="" position=""/> <GradientPoint color="" position=""/> </Linear>/</Radial>/</Sweep> </FillGradient> <StrokeGradient> <!--与FillGradient中设置相同，此处省略--> </StrokeGradient></Rectangle>其余几何图形与Rectangle写法一致。
参数说明
通用属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 图形坐标点x坐标；Rectangle 为左上角坐标x坐标，直线为起点坐标x坐标， 其余的几何图形均为中心点坐标x坐标，默认为0，单位为像素，支持表达式 |
| y | 数值 | 选填 | 图形坐标点y坐标；Rectangle 为左上角坐标y坐标，直线为起点坐标y坐标， 其余的几何图形均为中心点坐标y坐标，默认为0，单位为像素，支持表达式 |
| strokeColor | 字符串 | 选填 | 描边颜色。支持6位或8位16进制颜色表示，如：#FFFFFF 、#FFFFFFFF， 8位中前两位表示透明度，后六位依次表示红、绿、蓝；支持函数argb(255,255,255,255) (argb(透明度，红，绿，蓝)，每个数值在[0-255]范围内）；支持字符串变量， 如：@abc，字符串变量需为无#的6或8位16进制表示："ffffff"、“ffffffff"，或argb函数。默认黑色 |
| fillColor | 字符串 | 选填 | 填充色，支持strokeColor中三种颜色表示。同时，支持通过变量动态改变填充颜色和 渐变填充色（FillGradient）。注意：在需要动态改变渐变填充色时需要先设置 @color="argb(0,0,0,0)+argb(15,5,5,5)+argb(25,3,10,0)"， 并且此时FillGradient中颜色、位置依旧得设置，只是后期可以通过改变@color变量的值动态修改渐变色 |
| weight | 数值 | 选填 | 描边宽度，自然数，默认0无描边，支持表达式 |
| cap | 字符串 | 选填 | 线头形状，semicircle/square。semicircle（半圆）, square（方形）,不写表示无线头 |
| dottedLine | 字符串 | 选填 | 虚线模式。格式“线长,间隔,线长,间隔….”。如dottedLine=”10,20,30,40”，表示10像素宽的线段， 20像素的间隔，30像素的线段，40像素的间隔，以上虚线重复出现构成几何图形描边。 注：至少两个参数 |
矩形与圆角矩形属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| cornerRadius | 字符串 | 选填 | 矩形圆角半径，格式”x向半径,y向半径”，例如："10,10"， 半径为正整数，默认为0，单位为像素 |
| w | 数值 | 必填 | 矩形宽，自然数，默认为0，单位为像素，支持表达式 |
| h | 数值 | 必填 | 矩形高，自然数，默认为0，单位为像素，支持表达式 |
圆形属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| r | 数值 | 必填 | 圆半径，自然数，默认为0，单位为像素，支持表达式 |
椭圆属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| w | 数值 | 必填 | 椭圆宽，自然数，默认为0，单位为像素，支持表达式 |
| h | 数值 | 必填 | 椭圆高，自然数，默认为0，单位为像素，支持表达式 |
扇形、圆弧属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| w | 数值 | 必填 | 扇形所在椭圆的宽，自然数，支持表达式 |
| h | 数值 | 必填 | 扇形所在椭圆的高，自然数，支持表达式 |
| startAngle | 数值 | 选填 | 起始角，-360-360度，默认为0，时钟3点钟方向为0度，支持表达式 |
| sweepAngle | 数值 | 必填 | 扫描角（扇形的角度），-360-360度，默认为0，起始角开始顺时针方向扫描角度，支持表达式 |
| closure | 字符串 | 选填 | true/false。true 表示闭合，绘制的是扇形；false 表示不闭合，绘制的是弧线。默认false |
直线属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x1 | 数值 | 必填 | 直线终点坐标x坐标，默认为0，单位为像素，支持表达式 |
| y1 | 数值 | 必填 | 直线终点坐标y坐标，默认为0，单位为像素，支持表达式 |
FillGradient 与 StrokeGradient
Linear
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 渐变轴线(x , y，x1 , y1)，是参照图形的相对坐标x坐标，默认为0，单位为像素，支持表达式 |
| y | 数值 | 选填 | 渐变轴线(x , y，x1 , y1)，是参照图形的相对坐标y坐标，默认为0，单位为像素，支持表达式 |
| x1 | 数值 | 选填 | 渐变轴线(x , y，x1 , y1)，是参照图形的相对坐标x1坐标，默认为0，单位为像素，支持表达式 |
| y1 | 数值 | 选填 | 渐变轴线(x , y，x1 , y1)，是参照图形的相对坐标y1坐标，默认为0，单位为像素，支持表达式。 注意：x，y，x1，y1不可同时全为0 |
| tileMode | 字符串 | 选填 | 线性渐变平铺模式。stretch ：渐变色在几何图形中沿渐变轴拉伸渐变（默认）；mirror ： 渐变色以abbaab...镜像模式沿渐变轴渐变；loop：渐变色以ababab... 循环模式沿渐变轴渐变 |
Radial
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 圆心位置x坐标，是参照图形的相对坐标，默认为0，单位为像素，支持表达式 |
| y | 数值 | 选填 | 圆心位置y坐标，是参照图形的相对坐标，默认为0，单位为像素，支持表达式 |
| r | 数值 | 选填 | 半径，取值正整数，默认10，单位为像素，支持表达式 |
| tileMode | 字符串 | 选填 | 放射渐变平铺模式。stretch ：渐变色在几何图形中从圆心向外拉伸渐变（默认）； mirror ：渐变色以abbaab...镜像模式从圆心向外重复渐变； loop：渐变色以ababab... 循环模式从圆心向外渐变 |
Sweep
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 中心点坐标x坐标，是参照图形的相对坐标，默认为0，单位为像素，支持表达式 |
| y | 数值 | 选填 | 中心点坐标y坐标，是参照图形的相对坐标，默认为0，单位为像素，支持表达式 |
GradientPoint
渐变子标签，用于设置渐变颜色和渐变位置。
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| color | 字符串 | 必填 | 渐变点的颜色，支持6位或8位16进制颜色表示，如：#FFFFFF 、#FFFFFFFF， 8位中前两位表示透明度，后六位依次表示红、绿、蓝； 支持函数argb(255,255,255,255) (argb(透明度，红，绿，蓝)，每个数值在[0-255]范围内）； 支持字符串变量，如：@abc，字符串变量需为无#的6或8位16进制表示："ffffff"、“ffffffff"，或argb函数。 |
| position | 数值 | 必填 | 渐变点位置，0~1.0的小数 |
注意：
1.有面积的几何图形可同时设置描边和填充的颜色或渐变，线条类几何图形只支持设置描边；
2.若fillColor/strokeColor与FillGradient/StrokeGradient同时存在，则绘制FillGradient/StrokeGradient；
3.位移、透明度等动画需要写在渐变方式之前，否则无法解析到。
应用示例
示例一：圆角矩形。圆角矩形左上角坐标为(10,20)，宽100，高200，描边宽度为5，右下角坐标为(10+100+52, 20+200+52)=(120,230)。填充渐变以填充矩形的左上角为坐标原点，(0,0)->(100,200)即填充矩形左上角到右下角的直线为线性渐变轴实现颜色线性变化。
xxxxxxxxxx<Rectangle x="10" y="20" w="100" h="200" cornerRadius="5,10" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle" dottedLine="20,15" > <!-- FillGradient 填充着色；StrokeGradient 描边着色 --> <FillGradient> <!-- 线性渐变 --> <Linear x="0" y="0" x1="100" y1="200" tileMode="stretch"> <GradientPoint color="#aa0000" position="0"/> <GradientPoint color="#00aa00" position="0.5"/> <GradientPoint color="#0000aa" position="1"/> </Linear> </FillGradient></Rectangle>
示例二：椭圆。椭圆圆心坐标为(100,400)，x轴半径为rx=50，y轴半径为ry=100，描边宽度为weight=5。放射渐变的圆心坐标为(rx+weight, ry+weight) = (55,105)，放射渐变的圆半径为60。
xxxxxxxxxx<Ellipse x="100" y="400" w="100" h="200" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle" dottedLine="10,20,13,24"> <FillGradient> <!-- 放射渐变 --> <Radial x="55" y="105" r="60"> <GradientPoint color="#aa0000" position="0.2"/> <GradientPoint color="#00aa00" position="0.7"/> </Radial> </FillGradient></Ellipse>示例三：圆形。圆心坐标为(600,200)，圆半径为50，描边宽度为weight=5，扫描渐变的中心坐标为(r+weight, r+weight)=(55,55)。
xxxxxxxxxx<Circle x="600" y="200" r="50" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle"> <FillGradient> <!-- 扫描渐变 --> <Sweep x="55" y="55" > <GradientPoint color="#aa0000" position="0.2"/> <GradientPoint color="#00aa00" position="0.7"/> </Sweep> </FillGradient></Circle>示例四：扇形。扇形所在椭圆的圆心为(400,200)，x轴半径为100，y轴半径为200，closure设置为true。以时钟3点钟方向为起始0°角，角度小于0位逆时针方向，角度大于0位顺时针方向，所以startAngle=-10，sweepAngle=50为截取椭圆上逆时针10°开始扫描角度为50的扇形区域。渐变中心点计算与椭圆一致。（扇形描边宽度不宜设置过大）。
xxxxxxxxxx<Arc x="400" y="200" w="200" h="400" startAngle="-10" sweepAngle="50" closure="true" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle"> <FillGradient> <!-- 扫描渐变 --> <Sweep x="105" y="205" > <GradientPoint color="#aa0000" position="0.2"/> <GradientPoint color="#00aa00" position="0.7"/> <GradientPoint color="#0000aa" position="1"/> </Sweep> </FillGradient></Arc>示例五：弧线。当closure设置为false时绘制的即为示例四中扇形的弧线边。
xxxxxxxxxx<Arc x="400" y="400" w="100" h="200" startAngle="-10" sweepAngle="50" closure="false" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle"/>示例六：直线。
xxxxxxxxxx<Line x="10" y="20" x1="100" y1="200" strokeColor="#ff00ff00" weight="5" cap="semicircle"/>示例七：动态修改填充渐变色。首先声明@color变量，变量类型为string，@color变量中多个颜色以+号拼接，颜色个数需要与渐变颜色个数相等。动态修改渐变color需要先给fillColor参数设置为@color变量，并在GradientPoint中赋予初始渐变色。在运行过程中通过button改变@color值已达到动态修改填充。
xxxxxxxxxx<!--需要预制与FillGradient中GradientPoint个数相等的颜色以+号拼接--><Var name="color" expression="argb(0,0,0,0)+argb(15,5,5,5)+argb(25,3,10,0)" type="string"/><!--动态修改@color，也可以通过变量动画自动改变渐变颜色--><Button x="0" y="0" w="420" h="420"> <Trigger action="up"> <VariableCommand name="c" expression="argb(255,141,183,255)+argb(255,83,187,180)+argb(255,107,205,164)" type="string"/> </Trigger></Button><Rectangle cornerRadius="15,15" dottedLine="10,20,30" fillColor="@color" h="400" strokeAlign="center" strokeColor="#ff00ff00" w="200" weight="5" x="510" y="610"> <StrokeGradient> <Linear tileMode="stretch" x="0" x1="0" y="0" y1="100"> <GradientPoint color="#ff0f0f" position="0" /> <GradientPoint color="#00425D" position="0.5" /> <GradientPoint color="#4ccfff" position="1" /> </Linear> </StrokeGradient> <FillGradient> <Linear tileMode="stretch" x="0" x1="130" y="0" y1="0"> <GradientPoint color="#000000" position="0" /> <GradientPoint color="#00ff00" position="0.5" /> <GradientPoint color="#ffffff" position="1" /> </Linear> </FillGradient></Rectangle>
路径解析-PathUtil
动效概述
路径解析工具是对一段命令描述的路径字符串进行解析，实际是解析SVG路径。跑马灯动效(标签Marquee)可以通过pathname调用该路径，实现按照路径跑马灯的效果，注意跑马灯标签应该在该标签之后。路径指令中大写字母表示绝对位置，小写字母表示相对位置。
应用场景
- 可以实现图形用线条的方式展示，如爱心的形状
- 可以实现字体用线条展示，例如可以实现空心的“新年快乐”字体
- 可用于实现屏幕四周的跑马灯效果
XML规范
xxxxxxxxxx<PathUtil name="" path=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 路径名称 |
| path | 字符串 | 必填 | 路径的SVG指令描述，其中Path中以命令标志开头后接命令规定数量的参数。命令与参数之间可以用空格、 逗号也可以没有任何字符分割，参数与参数之间用空格、逗号或者换行来分割。 |
path svg指令说明
| 指 令 | 参 数 | 注 释 |
|---|---|---|
| M,m | x,y | 该命令将绘制点移动至（x,y）点开始绘制 |
| L,l | x,y | 从路径当前绘制点绘制直线到（x,y）点，并将绘制点移动到(x,y)点 |
| H,h | x | 从路径当前绘制点绘制横线到x位置，并将绘制点移动到(x,y)点 |
| V,v | y | 从路径当前绘制点绘制竖线到x位置，并将绘制点移动到(x,y)点 |
| Z,z | 无 | 路径闭合参数，将当前绘制点与M指令的起始绘制点连接一条直线 |
| Q,q | x1,y1,x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，控制点为（x1,y1），并移动绘制点至(x,y) |
| T,t | x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，并移动绘制点至(x,y)。 若前一个指令为Q或T，控制点为前一个控制点关于前一个指令终点的对称点， 若前一个指令不为Q或T，则控制点与终点相同 |
| C,c | x1,y1,x2,y2,x,y | 从路径当前绘制点绘制三次贝塞尔曲线至（x,y）点，控制点1为（x1,y1）控制点2为（x2,y2）， 并移动绘制点至(x,y) |
| S,s | x2,y2,x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，并移动绘制点至(x,y)。若前一个指令为C或S， 控制点1为前一个控制点2关于前一个指令终点的对称点，若前一个指令不为C或S，则控制点1与控制点2相同 |
| A,a | rx,ry,x-axis-rotation, large-arc-flag,sweep-flag,x,y | 弧形命令A的前两个参数分别是x轴半径和y轴半径，弧形命令A的第三个参数表示弧形的旋转情况， large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是 大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向， 0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧 |
基础图形指令
在SVG指令基础上新增圆角矩形、弧线（椭圆）、圆形、爱心基础图形的解析，与上述指令不可同时使用：
| 指 令 | 参 数 | 注 释 |
|---|---|---|
| Rect | left,top,right, bottom,rx,ry,direction | 绘制矩形，left,top,right,bottom表示矩形的左（x）、上(y)、右(x)、下(y)； rx,ry表示矩形圆角的x,y轴半径；direction为0表示路径为顺时针，1表示逆时针 |
| Circle | x,y,r,direction | 绘制圆形，x,y表示圆心坐标；r表半径；direction与矩形一致； |
| Arc | left,top,right,bottom, startAngle,sweepAngle | 绘制圆弧，left,top,right,bottom表示绘制的椭圆所在矩形的左（x）、上(y)、右(x)、下(y)； startAngle表示弧线绘制的起始角度；sweepAngle表示绘制弧线的角度。 起点为矩形右边中点位置，顺时针方向。 |
| Love | 无 | 绘制爱心，爱心左上角坐标为（200,130）,w=200，h=170 |
应用示例
示例一：生成左上角坐标为（200,130）,w=200，h=170的爱心路径，路径的name为love，其中跑马灯可以用pathname属性来引用。
xxxxxxxxxx<PathUtil name="love" path="love"/>示例二：生成左边x坐标为0，顶部y坐标为0，右边x左边为100，底部y坐标为100，圆角的x和y的半径都为15的圆角矩形路径。
xxxxxxxxxx<PathUtil name="rect" path="Rect 0,0,100,100,15,15,0"/>示例三：以x坐标100，y坐标100，生成一个半径为100的圆形路径。
xxxxxxxxxx<PathUtil name="circle" path="Circle 100,100,100,0"/>示例四：以左边x坐标100，顶部y坐标100，右边x坐标300，底部y坐标400生成一个椭圆，其中椭圆的y方向轴为300，x方向轴为200。生成一个沿着椭圆，从最右边点开始，以矩形中点为旋转中心，顺时针360度的路径。
xxxxxxxxxx<PathUtil name="Arc" path="Arc 100,100,300,400,0,360"/>示例五：沿着Path的规划绘制相关的路径，其中c是按照三次贝塞尔曲线连接并移动绘制点，Z是封闭路径的绘制点和初始绘制点，M是移动绘制点并设置成初始绘制点。 该条路径是抠图后由GIMP软件生成路径得到的“新年快乐”四个字描边路径。
xxxxxxxxxx<PathUtil name="d" path="M 0.00,0.00 C 0.00,0.00 0.00,178.00 0.00,178.00 0.00,178.00 418.00,178.00 418.00,178.00 418.00,178.00 418.00,0.00 418.00,0.00 418.00,0.00 0.00,0.00 0.00,0.00 Z M 68.02,18.34 C 72.55,17.82 75.53,17.69 78.77,21.47 82.61,25.93 80.10,31.06 75.98,32.05 69.92,33.51 56.15,22.09 68.02,18.34 Z M 362.00,31.00 C 362.00,31.00 352.00,29.00 352.00,29.00 348.89,35.59 344.64,37.48 340.56,43.00 337.52,47.10 337.06,50.69 334.64,55.00 333.50,57.04 331.22,59.82 330.84,62.00 330.51,63.88 331.43,66.09 331.75,68.00 332.80,74.21 333.83,85.23 341.01,87.83 345.45,89.44 347.05,84.20 347.79,81.00 350.53,69.04 347.66,68.13 347.00,58.00 355.79,60.74 351.11,65.66 352.80,72.00 353.92,76.20 356.47,78.67 359.00,82.00 361.78,79.09 367.22,72.67 371.00,71.64 375.82,70.33 382.28,76.08 381.39,81.01 379.98,88.75 367.27,98.51 365.02,103.00 363.33,106.38 364.01,119.52 364.00,124.00 363.98,133.49 362.58,134.22 355.07,139.58 352.99,141.07 350.34,143.82 347.62,141.99 345.26,140.40 344.46,136.35 344.18,133.72 344.18,133.72 343.30,123.00 343.30,123.00 343.38,119.72 344.71,115.28 343.30,112.11 341.05,106.40 335.76,109.91 328.00,104.36 319.34,98.18 315.12,86.35 315.00,76.00 314.88,64.75 315.94,65.94 318.86,56.00 318.86,56.00 322.83,41.04 322.83,41.04 326.16,34.47 331.39,31.00 336.83,26.53 340.05,23.88 342.68,21.07 346.99,20.43 349.90,19.45 352.21,20.38 355.09,20.43 355.09,20.43 360.72,20.43 360.72,20.43 364.19,21.48 369.66,26.68 370.77,30.04 372.05,33.86 373.85,46.80 366.05,44.34 360.93,42.73 362.00,35.20 362.00,31.00 Z M 187.00,44.00 C 181.43,45.37 175.73,45.99 170.00,46.00 166.63,46.01 162.00,45.46 159.60,48.31 156.66,51.81 158.43,61.68 159.00,66.00 162.38,65.55 170.09,64.82 172.42,62.44 174.48,60.32 174.25,56.32 176.49,55.17 179.12,53.82 180.93,57.05 181.66,59.02 184.23,65.89 185.98,70.58 186.00,78.17 187.80,78.02 190.26,77.98 191.98,78.17 194.29,78.83 196.34,79.78 197.22,82.13 199.43,88.05 192.54,92.16 189.14,95.51 187.84,96.79 186.78,97.91 186.81,99.85 186.81,99.85 189.71,108.00 189.71,108.00 191.27,114.95 191.01,120.03 191.00,127.00 191.00,130.08 191.20,134.06 189.55,136.77 187.15,140.70 178.78,141.31 175.98,137.57 173.16,133.79 174.09,119.20 174.00,114.00 173.74,100.16 164.42,109.97 152.00,110.40 149.70,110.48 145.29,109.97 144.17,107.57 142.11,103.20 151.31,99.35 153.03,95.83 154.38,93.04 152.45,90.82 152.35,87.00 152.35,87.00 154.00,72.00 154.00,72.00 151.29,71.63 146.72,71.19 144.70,69.27 139.00,63.84 142.36,46.19 148.18,41.82 153.93,37.50 155.92,42.66 159.17,43.12 159.17,43.12 169.00,40.58 169.00,40.58 176.01,39.09 184.39,33.80 187.00,44.00 Z M 233.00,38.00 C 237.78,44.71 236.58,50.52 237.09,58.00 237.09,58.00 238.00,68.00 238.00,68.00 238.00,68.00 238.00,104.00 238.00,104.00 238.00,104.00 236.17,128.00 236.17,128.00 234.35,147.06 236.21,152.07 227.00,170.00 224.05,167.19 222.33,165.18 222.05,160.96 221.82,157.47 223.47,141.88 224.20,138.00 224.20,138.00 227.92,111.00 227.92,111.00 229.11,104.43 231.07,103.99 231.03,100.56 231.03,100.56 230.04,93.00 230.04,93.00 230.04,93.00 231.72,51.00 231.72,51.00 232.23,46.65 231.37,42.10 233.00,38.00 Z M 94.00,40.00 C 101.03,50.11 91.58,50.28 89.55,59.00 88.65,62.85 90.96,65.17 90.51,69.00 90.51,69.00 88.01,77.00 88.01,77.00 88.01,77.00 88.01,90.00 88.01,90.00 88.01,90.00 86.65,96.00 86.65,96.00 85.72,102.37 93.89,109.47 92.16,114.82 90.64,119.49 79.96,122.15 76.60,127.10 72.33,133.39 84.16,142.56 73.96,145.89 64.19,149.08 62.17,133.81 59.69,131.51 57.05,129.06 51.57,128.88 48.00,128.00 51.49,119.61 54.08,122.06 59.82,117.37 63.13,114.65 69.32,105.21 70.00,101.00 70.00,101.00 57.00,100.00 57.00,100.00 59.89,95.05 68.58,93.30 74.00,91.00 74.00,91.00 74.00,89.00 74.00,89.00 63.67,85.29 62.85,81.75 60.00,72.00 66.56,75.90 66.32,83.43 71.05,83.91 74.08,84.21 78.36,80.82 79.12,77.96 79.62,76.06 79.03,65.89 77.98,64.31 76.25,61.73 72.73,62.02 70.00,62.00 70.00,62.00 54.00,62.69 54.00,62.69 51.68,62.24 46.50,59.23 44.00,58.00 44.00,58.00 59.00,53.01 59.00,53.01 59.00,53.01 65.00,49.45 65.00,49.45 65.00,49.45 80.00,41.84 80.00,41.84 80.00,41.84 94.00,40.00 94.00,40.00 Z M 270.00,142.00 C 264.26,136.19 268.17,129.17 264.41,125.72 261.37,122.93 253.41,124.89 253.34,120.75 253.29,118.14 257.16,115.15 259.00,113.66 266.35,107.74 279.37,98.86 270.84,88.76 268.79,86.33 268.17,85.42 265.00,85.00 267.52,75.73 274.57,74.09 275.77,67.00 276.44,63.05 273.92,56.09 277.47,54.17 279.26,53.20 280.71,54.80 281.64,56.15 284.00,59.59 284.06,64.50 287.39,67.28 291.08,70.34 298.30,69.51 301.69,72.56 303.98,74.62 303.94,77.16 304.00,80.00 304.00,80.00 302.69,101.91 302.69,101.91 301.21,107.33 289.48,111.53 285.28,116.18 281.71,120.13 281.97,125.33 279.81,130.00 277.60,134.80 273.67,138.32 270.00,142.00 Z M 221.00,65.00 C 223.33,72.19 225.52,88.10 222.28,95.00 221.03,97.65 218.06,103.66 215.79,105.25 210.88,108.70 207.34,105.17 207.04,100.00 206.85,96.68 207.14,92.03 208.93,89.17 210.57,86.55 213.43,85.00 214.98,81.99 214.98,81.99 219.00,65.00 219.00,65.00 219.00,65.00 221.00,65.00 221.00,65.00 Z M 118.00,69.00 C 114.73,75.55 111.50,78.37 113.00,86.00 113.00,86.00 133.00,76.25 133.00,76.25 133.00,76.25 141.00,80.00 141.00,80.00 136.58,86.86 124.80,87.46 118.15,93.53 111.83,99.28 117.38,109.19 113.69,114.49 111.22,118.02 105.13,116.70 102.99,113.47 101.76,111.60 102.00,108.20 102.00,106.00 101.99,99.80 101.23,87.17 103.98,82.00 105.07,79.94 107.03,77.88 108.49,76.00 112.07,71.38 111.85,69.49 118.00,69.00 Z M 168.01,71.74 C 161.47,75.34 161.16,80.25 162.90,87.00 163.81,90.51 165.48,94.62 169.99,93.21 174.12,91.91 174.55,88.43 175.85,85.00 176.48,83.35 178.06,80.57 178.15,79.00 178.45,73.44 172.85,70.72 168.01,71.74 Z M 246.00,91.00 C 253.45,90.26 255.18,94.10 254.98,101.00 254.86,104.93 252.99,109.65 248.13,108.16 241.89,106.29 248.03,102.05 248.13,98.95 248.27,97.23 246.56,93.01 246.00,91.00 Z M 131.00,99.00 C 133.28,107.07 138.99,117.39 134.55,125.96 133.40,128.18 129.21,133.26 126.30,132.30 123.08,131.24 122.99,125.70 123.29,123.00 124.38,113.10 125.65,107.56 131.00,99.00 Z M 292.33,114.64 C 300.35,113.42 312.21,122.36 307.97,128.44 307.09,129.71 304.40,130.85 303.00,131.57 301.76,132.21 300.39,133.06 299.02,133.34 297.39,133.67 296.03,133.44 294.81,132.26 292.88,130.39 289.87,118.81 290.77,116.31 291.27,114.90 292.05,114.88 292.33,114.64 Z M 384.17,118.87 C 394.20,119.95 396.44,137.61 385.00,139.13 380.67,139.70 376.83,135.03 376.64,131.00 376.44,126.44 380.29,120.85 384.17,118.87 Z M 325.79,121.17 C 333.23,124.76 333.03,141.36 323.00,143.11 318.24,143.93 314.25,141.03 314.71,136.00 315.22,130.55 320.26,122.10 325.79,121.17 Z M 86.17,124.17 C 87.96,124.01 91.13,123.95 92.98,124.17 103.95,126.69 93.93,142.41 87.85,133.85 87.04,132.71 86.62,131.35 86.17,130.00 85.98,128.22 86.02,125.83 86.17,124.17 Z M 20.00,139.00 C 21.25,140.51 23.88,144.06 25.37,144.98 32.86,149.58 46.76,140.71 54.00,139.00 51.19,144.23 40.22,154.45 34.00,154.57 31.90,154.61 29.93,153.61 28.00,152.93 28.00,152.93 22.06,150.84 22.06,150.84 17.38,148.13 17.01,143.06 20.00,139.00 Z"/>跑马灯-Marquee
动效概述
跑马灯功能，需要和路径解析-PathUtil联合使用，可实现屏幕跑马灯、心形、椭圆形等跑马灯效果。
XML规范
xxxxxxxxxx<Marquee color="" deltaAngle="" enableMove="" marqueeColor="" marqueePos="" pathname="" rotate="" scaleX="" scaleY="" showTime="" state="1" translateX="" translateY="" weight="" />
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| state | 数值 | 选填 | 是否开启跑马灯，当值等于1时可见，其余值为不可见状态，默认为1，支持数字表达式 |
| showTime | 数值 | 选填 | 跑马灯执行一次旋转位移的时间间隔，单位毫秒(ms),正整数，默认20ms，支持数字表达式 |
| deltaAngle | 数值 | 选填 | 跑马灯一次旋转位移的旋转角度，单位为度，范围建议为-360~360，其中正值为顺时针旋转，负值为逆时针旋转，可与showTime配合控制跑马灯跑动速度，默认为5°，支持数字表达式 |
| pathname | 字符串 | 必填 | 路径名称，依赖于PathUtil，首先得通过PathUtil解析路径，跑马灯的路径为PathUtil中的路径，参数值为路径PathUtil的名称 |
| scaleX | 数值 | 选填 | 对路径宽度进行缩放，scaleX是x轴的缩放倍数。缩放时以路径外接矩形的左上角为中心点，例如路径为一个宽高均为100的矩形，左上角坐标为（100,100），右下角坐标为（200,200），scaleX为2，则放大后矩形左上角仍为（100,100），右下角为（300,200）。取值为大于0的实数，默认1，支持表达式 |
| scaleY | 数值 | 选填 | 对路径宽度进行缩放，scaleY是y轴的缩放倍数。缩放时以路径外接矩形的左上角为中心点，例如路径为一个宽高均为100的矩形，左上角坐标为（100,100），右下角坐标为（200,200），scaleY为2，则放大后矩形左上角仍为（100,100），右下角为（300,200）。取值为大于0的实数，默认1，支持表达式 |
| translateX | 数值 | 选填 | 对path进行x轴偏移，单位为像素，默认0，支持表达式解析。大于0，向右移动；小于0，向左移动 |
| translateY | 数值 | 选填 | 对path进行y轴偏移，单位为像素，默认0，支持表达式解析。大于0，向下移动；小于0，向上移动 |
| rotate | 数值 | 选填 | 对PathUtil的path路径进行旋转的角度，以路径外接矩形的左上角点为旋转中心，单位为度，取值范围为-360~360 |
| weight | 数值 | 选填 | 绘制路径的宽度，单位为像素，正整数，默认15像素，支持表达式 |
| color | 字符串 | 必填 | 跑马灯渐变的背景颜色，支持6/8位十六进制颜色表示、变量、argb函数，如#ffffff，#ffffffff,@abc, argb(255, 255, 255, 255), 若@abc字符串为16进制颜色表示则不可包含#号，如ffffff |
| marqueeColor | 字符串 | 必填 | 跑马灯渐变的灯颜色，支持6/8位十六进制颜色表示，变量、argb函数。其中颜色渐变为设置的color的颜色到marqueeColor的颜色产生一个线性的颜色过渡 |
| marqueePos | 数值 | 选填 | 跑马灯颜色渐变位置控制，颜色渐变点，其值为0~1之间的小数，表示color与marqueeColor颜色渐变位置，默认0.3，支持表达式 |
应用示例
示例一：心形跑马灯
xxxxxxxxxx <PathUtil name="love" path="love"/> <Marquee color="#fff05b72" deltaAngle="6" enableMove="true" marqueeColor="#fffeeeed" marqueePos="0.2" pathname="love" rotate="0" scaleX="2" scaleY="2" showTime="10" state="1" translateX="160" translateY="60" weight="20" />示例二：圆形跑马灯
xxxxxxxxxx <PathUtil name="circle" path="Circle 300,300,100,0" /> <Marquee color="#ff426ab3" deltaAngle="6" enableMove="true" marqueeColor="#ffd93a49" marqueePos="0.2" pathname="circle" rotate="0" scaleX="1" scaleY="1" showTime="20" state="1" translateX="7" translateY="7" weight="25" />示例三：云朵形跑马灯
xxxxxxxxxx<PathUtil name="d" path="M897.28,942.08h-614.4C133.55,948.82 7.08,836.27 0.34,691.11c-6.83,-145.32 108.71,-268.46 258.05,-275.03 -0.43,-176.64 140.12,-323.16 321.02,-334.93 180.99,-11.69 340.31,115.29 364.03,290.39 152.58,22.87 261.21,156.41 249.09,306.17 -12.12,149.76 -140.88,265.05 -295.25,264.45h-0.09zM318.72,846.51h578.56c70.23,0 135.17,-36.52 170.24,-95.66a186.88,186.88 0,0 0,0 -191.32,197.55 197.55,0 0,0 -170.24,-95.66c-13.06,0 -25.6,-5.12 -34.73,-14.08A47.19,47.19 0,0 1,848.04 416c0,-132.1 -109.91,-239.19 -245.68,-239.19 -135.68,0 -245.76,107.09 -245.76,239.19v10.07c116.22,32.17 196.44,135.42 196.61,253.01 0,17.07 -9.39,32.85 -24.58,41.47a50.35,50.35 0,0 1,-49.15 0,47.62 47.62,0 0,1 -24.49,-41.47c0,-92.25 -76.8,-167.17 -171.61,-167.42 -94.98,0 -172.03,74.92 -172.03,167.42 0,92.42 77.06,167.42 172.03,167.42h19.2a49.49,49.49 0,0 1,16.21 0z"/><Marquee color="#ffcec2d6" deltaAngle="6" enableMove="true" marqueeColor="#ffc6e0fb" marqueePos="0.2" pathname="d" rotate="0" scaleX="0.6" scaleY="0.6" showTime="20" state="1" translateX="7" translateY="507" weight="25" />组
视图组-Group
功能概述
Group作为一个若干子控件元素的视图组，可以包住他元素，子控件元素比如图片Image、按钮Button、文字Text、时间DateTime等元素。 视图组内可以调整坐标以及宽与高，亦可以调整多个元素的位置和大小；此外Group可以添加各种基础动效动画，比如位移PositionAnimation、旋转RotationAnimation、透明度AlphaAnimation、缩放SizeAnimation等。
应用场景
- 可以用于设置日期的显示。
- 可以将两张图片组合到一起进行位移旋转动画。
- 可用于游戏中的两个人物同时进行多种动画，实现打斗场景。
XML规范
xxxxxxxxxx<Group name="" x="" y="" w="" h="" alpha="" angle="" visibility="" clip="" layered=""> <Image/> <Time/> <DateTime/> <Text/> <PositionAnimation/> <SizeAnimation/> <RotationAnimation/> <AlphaAnimation/></Group>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 选填 | 组控件的名称 |
| x | 数值 | 选填 | 相对于屏幕左上角的x坐标 |
| y | 数值 | 选填 | 相对于屏幕左上角的y坐标 |
| w | 数值 | 选填 | 容器宽 |
| h | 数值 | 选填 | 容器高 |
| alpha | 数值 | 选填 | 透明度，0-255,小于等于0不显示 |
| rotation 或(angle) | 数值 | 选填 | 旋转角度，一周360度 |
| visibility | 数值 | 选填 | 元素可见性，支持表达式<=0 不可见， >0可见，true为可见，false为不可见 |
| clip | 字符串 | 选填 | 缺省为false；裁剪设置true则是测量整个Group长宽而不是测量元素的长宽， 会裁剪掉超出w h标注范围的内容，不给予显示；设置为false测量元素的大小。 |
| layered | 字符串 | 选填 | 分层，设为true时，如可以对多图片进行混合处理，这个时候group中的最后一个Image 需要具有hybridMode属性，前面的view都不能有hybridMode属性 |
| align | 字符串 | 选填 | 水平方向对齐方式，默认为left，可选参数为left,center,right；使用时如果子view有自身的x坐标， 则不会受Group设置的align参数影响，即子view的x坐标优先级大于Group的align参数。 |
| alignV | 字符串 | 选填 | 垂直方向对齐方式，默认为top，可选参数为top,center,bottom；使用时如果子view有自身的Y坐标， 则不会受Group设置的alignV参数影响，即子view的y坐标优先级大于Group的alignV参数。 |
应用示例
示例一：将多张图片组合在一起同时控制展示。
xxxxxxxxxx<Group x="520" y="120"> <Image x="200" y="230" srcid="#year/1000" src="date.png"/> <Image x="200+20" y="230" srcid="#year/100%10" src="date.png"/> <Image x="200+40" y="230" srcid="#year%100/10" src="date.png"/> <Image x="200+60" y="230" srcid="#year%10" src="date.png"/> <Image x="200+80" y="230" src="date_dot.png"/> <Image x="200+100" y="230" src="date.png" srcid="(#month+1)/10"/> <Image x="200+120" y="230" src="date.png" srcid="(#month+1)%10"/> <Image x="200+140" y="230" src="date_dot.png"/> <Image x="200+160" y="230" src="date.png" srcid="#date/10"/> <Image x="200+180" y="230" src="date.png" srcid="#date%10"/> <Image x="200+210" y="230" src="week.png" srcid="#day_of_week"/></Group>示例二：将2张图片组合在一起进行位移和旋转的组合动画。
xxxxxxxxxx<Text x="250" y="1800" align="left" alignV="top" color="#ffffff" size="40" text="组合动画：位移、旋转变化" /><Group x="0" y="200" w="160" h="1000" alpha="155" rotation="90" visibility="1" clip="true"> <Image x="300" y="500" align="center" alignV="center" src="ty.png"/> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="150" y="0" time="600"/> <Position x="0" y="0" time="1800"/> </PositionAnimation> <Image x="550" y="500" align="center" alignV="center" src="aixin7.png"/> <RotationAnimation> <Rotation angle="0" time="0"/> <Rotation angle="20" time="600"/> <Rotation angle="0" time="1800"/> </RotationAnimation></Group>
虚拟屏幕-VirtualScreen
功能概述
虚拟屏幕允许一系列的View的复用，虚拟屏幕给一系列的View提供了容器，减少设计师的工作量。
XML规范
xxxxxxxxxx<VirtualScreen name=""> <Image x="" y="" src=""/> <Image x="" y="" src=""/></VirtualScreen>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 虚拟屏幕的标注，Image的src属性调用的名称 |
注意其中Image标签的src属性的值是被调用的VirtualScreen的标签name的值，其可以将一系列的元素重复使用; 如果使用自定义宽高的虚拟屏幕，需要在使用虚拟屏幕的标签上同时填写宽高限制。
应用示例
示例一：将多张图片同时控制在虚拟屏幕中展示；注意：Image标签的宽、高会设置为虚拟屏幕的宽和高，绘制起点的坐标为Image标签的x和y。
xxxxxxxxxx<VirtualScreen name="vs"> <Image x="0" y="0" src="dianhua.png"/> <Image x="100" y="100" src="ty.png"/></VirtualScreen><Image x="0" y="0" w="1080" h="1920" src="vs" useVirtualScreen="true"/><Image x="200" y="200" w="1080" h="1920" src="vs" useVirtualScreen="true"/><Image x="400" y="400" w="1080" h="1920" src="vs" useVirtualScreen="true"/>
控件
按钮-Button
功能概述
按钮标签，在锁屏界面有一块显示区域，能够触发Trigger等一系列的操作和命令，可以通过不同的状态标签来展现对应状态下设置的图片或者文字等。
应用场景
- 设置好按钮热区，点击该区域，切换壁纸。
- 滑动热区，播放动画的下一帧。
- 点击热区，大雨下起或者雪花飘落。
- 点击热区，花儿绽放。
XML规范
xxxxxxxxxx<Button name="" x="" y="" w="" h="" visibility="" longTouchTime="" interceptButtonTouch=""> <Trigger action=""> <Command target="" value=""/> </Trigger> <Normal> <Image/> </Normal> <Pressed> <Image/> <Text/> </Pressed></Button>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 选填 | 按钮的名称 |
| visibility | 字符串 | 选填 | 元素可见性支持表达式<=0 不可见 >0可见 |
| longTouchTime | 数值 | 选填 | 单位毫秒，设定时间，在长按时间超过一定时间的时候触发Trigger action="long"的命令， 默认1000ms |
| interceptButtonTouch | 字符串 | 选填 | 判断Button是否已经被触发，若interceptButtonTouch为true，则Button仅能够被触发一次 |
| Trigger | 字符串 | 必填 | 用来定义按钮、Unlocker、Slider等动作引发相关的操作，可以控制某元素的属性。 其规定了触发的动作(action)，并且触发了一系列命令(Command)的执行 |
| Normal | 字符串 | 选填 | 表示按钮在正常状态时显示的内容，可加入Image，Text，SourceImage，Time， DateTime，ImageNumber，Group |
| Pressed | 字符串 | 选填 | 表示按钮在按下状态时显示的内容，可加入内容与Normal相同， 区别是Button在正常状态的时候是非激活以及不可见状态。当按钮被按下的时候， Normal状态下的元素都被设置非激活和不可见，而Pressed状态下的元素都设置为激活和可见 |
Trigger的属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| action | 字符串 | 必填 | 按钮动作： down (按下), up (抬起), double (双击)，resume（亮屏触发）,pause（熄屏触发）， long（长按），click（点击） |
应用示例
示例一：正常状态下显示白色normal文字和小太阳图片，按下时触发Pressed且显示白色pressed文字和红心图片状态，松开时又恢复正常状态。
xxxxxxxxxx<Button name="zk1" x="300" y="300" w="470" h="300"> <Pressed> <Image x="300" y="300" src="ax.png"/> <Text x="300" y="280" text="press" visibility="1"/> </Pressed> <Normal> <Image x="300" y="300" src="ty.png"/> <Text x="300" y="280" text="normal" visibility="1"/> </Normal></Button>示例二：没点击按钮之前，按钮可见、text文本框显示"可见性：visibility为false，按钮不变"；单击之后，单击按钮不可见、text文本框显示"可见性：visibility为true,按钮消失"。
xxxxxxxxxx<!-- 可见性--><Image x="22" y="1030" w="180" h="180" src="7.png" visibility="eq(#kj,0)"/><Text x="250" y="1090" align="left" alignV="top" color="#ffffff" size="45" text="可见性：visibility为true,按钮消失" visibility="eq(#kj,1)"/><Text x="250" y="1090" align="left" alignV="top" color="#ffffff" size="45" text="可见性：visibility为false，按钮不变" visibility="eq(#kj,0)"/><Button x="22" y="1030" w="180" h="180"> <Trigger action="down"> <VariableCommand name="kj" expression="#kj+1" condition="le(#kj,2)" persist="true"/> <VariableCommand name="kj" expression="0" condition="eq(#kj,2)" persist="true"/> </Trigger></Button>
滑块-Slider
功能概述
通过滑动来激活某些操作，Slider是一个滑动的命令，其规定了滑动的起始点(StartPoint)和结束点(EndPoint)，包括滑动时的速度和加速度等参数的值。
应用场景
- 滑动解锁。
- 滑动进行下一帧动画。
- 滑动切换壁纸。
- 可制作翻书动作。
XML规范
xxxxxxxxxx<Slider name="" bounceInitSpeed="" bounceAcceleration="" keyPoint="" always=""> <StartPoint x="" y="" w="" h=""> <NormalState> <Image x="" y="" src=""/> </NormalState> </StartPoint> <EndPoint x="" y="" w="" h=""> <PressedState> <Image x="" y="" src=""/> </PressedState> <Path x="" y=""> <Position x="" y=""/> <Position x="" y=""/> </Path> </EndPoint></Slider>
参数说明
- Slider
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 滑动组件的名称 |
| bounceInitSpeed | 数值 | 选填 | 回弹动画的初始速度(距离单位为像素，时间单位为秒)，支持表达式，最小100，默认值为0 |
| bounceAcceleration | 数值 | 选填 | 回弹动画的加速度(距离单位为像素，时间单位为秒)，支持表达式，最小10，默认值为0 |
| keyPoint | 数值 | 选填 | 回弹点，可实现回弹多次的效果；默认值“0,0”即触发完回到开始效果。 另外：如“0,0.7,0,0.5,0,0.2,0” 表示逐渐回弹到原点 |
| always | 字符串 | 选填 | 当always的值变为true或1时，表示仅仅只显示这个滑块，其他的滑块全部隐藏 ； 当always的值变为false或0时，表示所有的滑块全部显示出来 |
| StartPoint | 字符串 | 必填 | 起始点标签，包括了x, y, weight, height坐标长宽以及Normal、Pressed、reached等状态的View 集合和声音文件，也包括了Intent相关操作。注意:每个Slider仅能包括一个StartPoint |
| EndPoint | 字符串 | 必填 | 结束点标签，其与起始点标签相同，但是Slider中可以有多个EndPoint |
- StartPoint (EndPoint)
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 必填 | 起始点相对于屏幕左上角的x坐标 |
| y | 数值 | 必填 | 起始点相对于屏幕左上角的y坐标 |
| w | 数值 | 选填 | 起始点响应区域的大小，宽 |
| h | 数值 | 选填 | 起始点响应区域的大小，高 |
| NormalState | 字符串 | 选填 | 正常状态标签，表示在非触摸时的状态 |
| PressedState | 字符串 | 选填 | 按下状态标签，表示在点击区域按下开始触发的状态信息 |
| ReachedState | 字符串 | 选填 | 到达状态标签，表示到达目标区域时的状态信息 |
| Path | 字符串 | 选填 | 定义了Slider滑动允许的范围，滑动的范围位于Position的连线上面，Path中给予了Position一个基础值， 可以简单的认为是从Path定义的x加上Position的x，Path的y加上Position的y的两个Position之间的连线 |
| normalSound | 字符串 | 选填 | 普通状态下播放的音效 |
| pressedSound | 字符串 | 选填 | 解锁控件在press状态播放的音效 |
应用示例
示例一：Slider起始点：起始点中包含的元素都会跟随当前操作的拖动移动位置。三个状态都可以不指定，可以使用变量来改变其他界面元素状态来表示触发过程。
xxxxxxxxxx<StartPoint x="30" y="120" w="90" h="90" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3"> <!--正常状态，可以包含若干元素--> <NormalState> <Image/> <!--从其他状态切换到NormalState时，触发该Trigger--> <Trigger> <Command target="test_trigger.visibility" value="false"/> </Trigger> </NormalState> <!--在点击区域按下，表示开始触发操作，拖动，隐藏其他状态元素，显示这些元素--> <PressedState> <Image/> <!--从其他状态切换到PressedState时，触发该Trigger--> <Trigger> <Command target="test_trigger.visibility" value="true"/> </Trigger> </PressedState> <!--达到触发目标后，隐藏其他元素，显示这些元素--> <ReachedState> <Image/> <!--从其他状态切换到ReachedState时，触发该Trigger--> <Trigger> <SoundCommand sound="reached.mp3" volume="1"/> </Trigger> </ReachedState></StartPoint>示例二：Slider目标点：当起始点的x,y点落入EndPoint目标区域矩形时，达到触发位置，此时松开手指即可以有mp3音乐播放并执行Intent中指定的打开相机动作。
xxxxxxxxxx<EndPoint x="300" y="400" w="90" h="90" reachedSound="sound_reached.mp3"> <!--Slider执行的动作，可以指定不同的IntentCommand--> <IntentCommand action="android.intent.action.MAIN" package="com.huawei.camera" class="com.huawei.camera"/></EndPoint>示例三：Slider，其中包括了一个StartPoint和一个EndPoint， 回弹的初速度为2000，加速度为1000。起始点的横坐标为30，纵坐标由表达式确定的屏幕高度-120，宽度90，高度90，其中NormalState显示一张图片；同理EndPoint的坐标解释同上，在PressedState显示另一张图片，同时在EndPoint包括了解锁路径；
Path标签定义了EndPoint可以移动的范围，当手指丛EndPoint往左滑的时候其坐标为 x=30 y = #screen_height-120，当往右滑的距离超过了 360 – 30时，其坐标为x = 360 y = #screen_height-120，而在往右滑距离在0-330中间值得时候，其x = 30 + delaX, y = #screen_height-120。
xxxxxxxxxx<Slider name="slider" bounceInitSpeed="2000" bounceAcceleration="1000"> <StartPoint x="30" y="#screen_height-120" w="90" h="90"> <NormalState> <Image x="30" y="#screen_height-120" src="unlock_button.png"/> </NormalState> </StartPoint> <EndPoint x="360" y="#screen_height-120" w="90" h="90"> <PressedState> <Image x="360" y="#screen_height-120" src="unlock_target.png"/> </PressedState> <Path x="0" y="#screen_height-120"> <Position x="30" y="0"/> <Position x="360" y="0"/> </Path> </EndPoint></Slider>
解锁-Unlocker
功能概述
Unlocker是一个滑动解锁的命令，与滑动组件Slider用法类似，当起始点（StartPoint）的x,y点随手指移动落入EndPoint目标矩形区域时，松开手指则触发解锁。
应用场景
- 用滑动动作，切西瓜，西瓜分半，触发解锁。
- 用滑动动作擦黑板，触发解锁。
- 用滑动动作，大雾散去，触发解锁。
XML规范
xxxxxxxxxx<Unlocker name="" bounceInitSpeed="" bounceAcceleration=""> <StartPoint x="" y="" w="" h="" normalSound="" pressedSound=""/> <EndPoint x="" y="" w="" h="" reachedSound=""/></Unlocker>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 解锁控件的变量名，通过[name].move_y可以得到解锁部件在y轴的偏移量 |
| bounceInitSpeed | 数值 | 选填 | 回弹动画的初始速度(距离单位为像素，时间单位为秒)，都支持表达式，最小100，默认值为0 |
| bounceAcceleration | 数值 | 选填 | 回弹动画的加速度(距离单位为像素，时间单位为秒)，都支持表达式，最小10，默认值为0 |
StartPoint (EndPoint)的属性说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 必填 | 起始点相对于屏幕左上角的x坐标 |
| y | 数值 | 必填 | 起始点相对于屏幕左上角的y坐标 |
| w | 数值 | 选填 | 起始点响应区域的大小，宽 |
| h | 数值 | 选填 | 起始点响应区域的大小，高 |
| normalSound | 字符串 | 选填 | 普通状态下播放的音效 |
| pressedSound | 字符串 | 选填 | 解锁控件在press状态播放的音效 |
| reachedSound | 字符串 | 选填 | 到达EndPoint所在区域时播放的音效 |
| Path | 字符串 | 选填 | 定义了Slider滑动允许的范围，滑动的范围位于Position的连线上面， Path中给予了Position一个基础值，可以简单的认为是从Path定义的x加上Position的x， Path的y加上Position的y的两个Position之间的连线 |
应用示例
示例一：y轴滑动解锁，当用户触发解锁操作并处于起始区域时，播放sound_pressed.mp3音乐，当到达目标区域时，播放sound_reached.mp3音乐。
xxxxxxxxxx<Unlocker name="unlocker"> <StartPoint x="0" y="440" w="480" h="400" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3"/> <EndPoint x="0" y="640" w="480" h="400" reachedSound="sound_reached.mp3"/></Unlocker>示例二:滑动到目标区域解锁，如果未达到目标区域则回弹到起始区域。
xxxxxxxxxx<Unlocker name="unlocker1" bounceInitSpeed="2000" bounceAcceleration="3000" > <StartPoint x="540" y="320" w="400" h="300"/> <EndPoint x="540" y="320-500" w="400" h="300"> <Path x="540" y="320" w="400" h="300"> <Position x="0" y="0"/> <Position x="0" y="-300"/> </Path> </EndPoint></Unlocker>示例三：演示任意上滑解锁，当上滑距离在100-150像素之间解锁。
xxxxxxxxxx<!-- 任意上滑解锁 --><Unlocker name="unlocker" bounceInitSpeed="2000" bounceAcceleration="3000" > <StartPoint x="0" y="0" w="#screen_width" h="#screen_height"></StartPoint> <EndPoint x="0" y="-300" w="#screen_width" h="200"> <Path x="0" y="0" w="#screen_width" h="#screen_height"> <Position x="0" y="0"/> <Position x="0" y="-150"/> </Path> </EndPoint></Unlocker>
变量
自定义变量-Var
功能概述
用户自定义变量，其标签为Var，用户指定变量名称、变量类型和变量值等，并被放入到全局变量中，供其他功能或者表达式调用。数组变量是放入到全局变量中的，其索引名字为 数组名+[索引值]，例如当name = sss时index=1，取变量sss[1]的值， 数组索引从0开始。对于不是数组的普通变量，type 的属性值不为number[] 或者string[] 即可，如果type为空默认为数字变量。
XML规范
xxxxxxxxxx<Var name="" expression="" type="" threshold="" persist="" index="" values="" const=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 变量名，也是全局变量的调用索引名，在支持表达式的情况中使用#+变量名来调用该变量目前的值。 |
| expression | 表达式 | 选填 | 变量对应的表达式或常量 注意：如果定义字符串常量需要多一套单引号: expression="'my string'"。 |
| type | 字符串 | 选填 | 定义数值变量或字符串变量，数字为number，字符串为string，如果是数字数组为number[]， Unlocker字符串数组为string[]， 默认为"number"。 |
| threshold | 数值 | 选填 | 阈值，当变量值的变化超过阈值时，可以触发一些命令。 |
| persist | 字符串 | 选填 | 变量持久化；默认为true，开启变量持久化之后，会优先读取本地同名变量是否有值， 如果没有则赋予expression或者默认值，如果有值则会忽略设置的expression值。 |
| index | 字符串 | 选填 | 如果使用数组型的变量则需要添加该项，标识数组的索引，索引值从0开始，index等于0代表值name[0]的取值。 |
| values | 字符串 | 选填 | 格式为values="val, val, val, ..."。该参数会写入所有需要赋的值，然后自动计算数组变量的大小， 并且给每一个变量赋值。type类型不同，输出的值的类型也不同，例如：values="10,20"， type为number时，输出的值为10.0,20.0；type为string时，输出的值为10,20。 |
| const | 字符串 | 选填 | true或者false，变量值是否为常量，表示该变量只要被赋值一次之后其值就不会再改变，默认：false。 |
应用示例
示例一：变量的变量动画，设置name等于sss的全局变量在0~300ms内值从#ani_begin_x变化到0，然后一直保持不变。
xxxxxxxxxx<Var name="sss"> <VariableAnimation> <AniFrame value="#ani_begin_x" time="0"/> <AniFrame value="0" time="300"/> <AniFrame value="0" time="100000000000000"/> </VariableAnimation></Var>示例二：演示设置阈值，当expression的值大于或等于阈值threshold时，则执行Trigger中的命令，设置图片的visibility属性为toggle。
xxxxxxxxxx<Image name="img" x="540" y="300" w="200" h="200" src="123.jpg"/><Var name="timeTest" expression="#second % 2" threshold="1"> <Trigger> <Command target="img.visibility" value="toggle"/> </Trigger></Var>数组变量
数组变量通过声明能够在全局变量中生成数组变量，方便循环操作，能够节省大量的开发者的时间。由于与变量的功能大致相似，所以将其集成在了-Variable的标签之中。
数组变量声明方法：
①声明同时给一个变量赋值
xxxxxxxxxx<Var name="sss" type="number[]" index="0" expression="1" size="4" const="true" /><Var name="sss" type="number[]" index="1" expression="2" const="true" /><Var name="sss" type="number[]" index="2" expression="3" const="true" /><Var name="sss" type="number[]" index="3" expression="4" const="true" /><Text x="100" y="400" textExp="#sss[0]+' '+#sss[1]+' '+#sss[2]+' '+#sss[3]" size="30" color="#ffffff" />通过name来定义数组变量的名字，通过size去声明数组变量的容量。在使用数组变量之前，一定要先声明数组变量的容量大小。
其中number[]表示的是数字数组，将其换成string[]能够容纳字符串数组变量。其中index表示数组变量的索引，expression的结果为该索引数组变量对应的值。
②只声明不赋值
xxxxxxxxxx<Var name="sss" type="number[]" size="4" const="true" />其中声明了一个name为sss的数组变量，其大小为4，数组的类型为数字，声明了const为true，表明在给变量赋初值之后便不能再改变。
③声明同时全部赋值
xxxxxxxxxx<Var name="_Num" type="number[]" values="100,200,300,666,888" /><Text x="200" y="500" textExp="#_Num[0]+' '+#_Num[1]+' '+#_Num[2]+' '+#_Num[3]+' '+#_Num[4]" size="30" color="#FFFFFF" />利用values写入所有需要赋的值，该类会自动计算变量数组的大小，并且给每一个变量赋值。
全局变量-GlobalVariable
功能概述
全局变量是指在引擎中已经预置好的固定名字的变量，可供直接使用，全局变量为放置在项目VariableManager中的一系列全局变量，在整个项目的任意位置都能够调用获取最新的全局变量的值，使用#取数值，使用@取字符串。
应用场景
- 在一个人脸或者动物脸的图片上，引用touch_x/y来实现眼睛跟随手指的方向转动。
- 引用时间全局变量，控制壁纸的更换或者在日历上图片上显示时间。
XML规范
xxxxxxxxxx<Var name="" expression="#screen_width" />变量说明
触摸
| 参 数 | 注 释 |
|---|---|
| touch_x | 当前触摸点的x坐标 |
| touch_y | 当前触摸点的y坐标 |
| touch_begin_x | 按下屏幕时的初始x坐标 |
| touch_begin_y | 按下屏幕时的初始y坐标 |
| touch_begin_time | 触摸开始的时间，单位ms，是当前时间与协调世界时 1970 年 1 月 1 日午夜之间的时间差 |
| touch_pressure | 按屏幕的压力值【需要设备支持，和厂商适配】，该参数需要生效，必须在lockscreen标签下写入pressure="true" |
解锁
| 参 数 | 注 释 |
|---|---|
| name.move_x | 解锁部件在x方向的偏移 |
| name.move_y | 解锁部件在y方向的偏移 |
| name.move_dist | 解锁部件移动的距离 |
| name.state | 解锁部件的状态：NORMAL_STATE（0）,PRESSED_STATE（1）,REACHED_STATE（2）,INVISIBLE_STATE（3） |
时间/日期
| 参 数 | 注 释 |
|---|---|
| time | 当前时间毫秒值 |
| year | 年 |
| month | 月（取值范围是0~11，0表示一月，1表示二月，以此类推） |
| date | 日 |
| day_of_week | 星期（1表示星期日，2表示星期一，等等） |
| hour | 当前小时，显示24小时制 |
| hour12 | 12小时制小时数，显示与系统时间制一致 |
| hour24 | 24小时制小时数，显示与系统时间制一致 |
| minute | 分钟 |
| second | 秒 |
| ishour12 | 字符串类型，是否是12小时制（true，false） |
| lunarYear | 农历年 |
| lunarMonth | 农历月 |
| lunarDay | 农历日 |
| time_sys | 系统时间，时间格式为 yyyy-MM-dd hh:mm:ss:SSS |
| system.time.hour1 | 小时的第一位，例如09:00显示0，时间在12小时制12点显示1，24点显示0 |
| system.time.hour2 | 小时的第二位，例如09:00显示9，时间在12小时制12点显示2，24点显示0 |
| system.time.min1 | 分钟的第一位，例如09:30显示3 |
| system.time.min2 | 分钟的第二位，例如09:30显示0 |
| system.time.ampm | ampm显示，根据不同的区域和语言显示不同的结果。该值当ishour12为true时才有值显示，为false时显示为空 |
| system.date | 日期格式化显示，根据不同的区域和语言显示不同的格式和语言的日期 |
电量
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| battery_level | 数值 | 当前电量，1~100 |
| battery_state | 数值 | 电池的状态，“Normal”(0)，“Charging”(1)，“BatteryLow”(2)，”BatteryFull“(3) |
系统深色模式
仅支持获取系统深色模式设置状态，并根据该状态进行显示效果的适配，不支持通过命令改变系统深色模式设置状态。
| 参数 | 类型 | 注释 |
|---|---|---|
| darkMode | 数值 | 当前模式：1 浅色模式 ，2 深色模式 ，0 不支持任何模式 |
音乐时长/进度
| 参数 | 类型 | 注释 |
|---|---|---|
| musicTotalDuration | 字符串 | 获取当前播放音乐的总时长，形式为分:秒，如 04:52 |
| musicPlayDuration | 字符串 | 获取当前音乐播放进度，形式为分:秒，如 02:30 |
| musicTotalSecond | 数值 | 获取当前播放音乐的总时长，形式为秒，如 650 |
| musicPlaySecond | 数值 | 获取当前音乐播放进度，形式为秒，如 180 |
幕宽高
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| screen_width | 数值 | 屏幕宽度 |
| screen_height | 数值 | 屏幕高度 |
图片宽高
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| name.actual_w | 数值 | 图片实际宽度 |
| name.actual_h | 数值 | 图片实际高度 |
文本宽高
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| name.text_width | 数值 | 文本的宽度，name为文本功能中指定的name，例如：-Text name="a" text="hahaha" size="50"/，可通过a.text_width取得a文本的文本宽度 |
| name.text_height | 数值 | 文本的高度 |
组件
其中的name都为组件的名字。
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| name.visibility | 数值 | 组件的可见性，1为可见 |
| name.actual_x/name.actual_y | 数值 | 元素实际x/y坐标 |
| name.actual_w/name.actual_h | 数值 | 元素实际高度与宽度 |
日历基本数据
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| festival | 数值 | [0~21] ，国家法定节假日具体映射关系如下表。说明同一天是双节假日的，返回唯一假日那个值， 例如2020-10-01，中秋节 国庆节同时一天，返回中秋节，其他2号~8号返回国庆节。 |
| is_work_day | 布尔值 | true：国家法定工作日；false: 国家法定休息日。 |
xxxxxxxxxx { "", //0:缺省值，非节假日 "元旦", //1:年度节假日* "除夕", //2:年度节假日* "春节", //3:年度节假日* "元宵节", //4: "情人节", //5: "妇女节", //6: "愚人节", //7: "清明节", //8:年度节假日* "劳动节", //9:年度节假日* "母亲节", //10: "儿童节", //11: "父亲节", //12: "端午节", //13:年度节假日* "中秋节", //14:年度节假日* "国庆节", //15:年度节假日* "重阳节", //16: "万圣节", //17: "感恩节", //18: "平安夜", //19: "圣诞节", //20: "调班", //21: 周六、周日调班日 };
应用示例
示例一：触摸屏幕时会显示它的坐标、压力。
xxxxxxxxxx<Text x="40" y="200" alignV="top" color="#ffffff" size="44" text="当前触摸点的x坐标touch_x: +#touch_x"/><Text x="40" y="240" alignV="top" color="#ffffff" size="44" text="当前触摸点的y坐标touch_y: +#touch_y"/><Text x="40" y="280" alignV="top" color="#ffffff" size="44" text="按下屏幕时的初始x坐标touch_begin_x:+#touch_begin_x" /><Text x="40" y="320" alignV="top" color="#ffffff" size="44" text="按下屏幕时的初始y坐标touch_begin_y:+#touch_begin_y" /><Text x="40" y="360" alignV="top" color="#ffffff" size="44" text="按屏幕的压力值touch_pressure:+#touch_pressure" />示例二：获取系统的日期、时间、一周中的第几天、12和24小时制、时分秒、是否为12小时制。
xxxxxxxxxx<Text x="40" y="500" alignV="top" color="#ffffff" size="44" format="year：%d年" paras="#year"/><Text x="40" y="540" alignV="top" color="#ffffff" size="44" format="month：%d月" paras="#month+1"/><Text x="40" y="580" alignV="top" color="#ffffff" size="44" format="date：%d号" paras="#date"/><Text x="40" y="620" alignV="top" color="#ffffff" size="44" format="time：%d" paras="#time"/><Text x="40" y="660" alignV="top" color="#ffffff" size="44" format="day_of_week：%d" paras="#day_of_week-1"/><Text x="40" y="700" alignV="top" color="#ffffff" size="44" format="hour：%d" paras="#hour"/><Text x="40" y="740" alignV="top" color="#ffffff" size="44" format="hour12：%d" paras="#hour12"/><Text x="40" y="780" alignV="top" color="#ffffff" size="44" format="hour24：%d" paras="#hour24"/><Text x="40" y="820" alignV="top" color="#ffffff" size="44" format="minute：%d" paras="#minute"/><Text x="40" y="860" alignV="top" color="#ffffff" size="44" format="second：%d" paras="#second"/><Text x="40" y="900" alignV="top" color="#ffffff" size="44" format="ishour12：%d" paras="#ishour12"/>示例三：读取显示节假日和工作日、休息日。
xxxxxxxxxx<Text x="40" y="740" alignV="top" color="#ffffff" size="60" format="festival：%d" paras="#festival"/><Text x="40" y="800" alignV="top" color="#ffffff" size="60" format="is_work_day：%s" paras="#is_work_day"/>
变量数组-VarArray
功能概述
以数组的方式来保存变量；根据index值能够取相应索引的值并且显示。
应用场景
通过此功能获取月份、农历等信息，可以制作日历。
可用于在界面上显示英文月。
XML规范
xxxxxxxxxx<VarArray type=""> <Vars> <Var name="" index=""/> </Vars> <Items> <Item value=""/> <Item value=""/> <Item value=""/> <Item value=""/> </Items></VarArray>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| type | 字符串 | 选填 | 定义数值变量number或字符串变量string，默认为number； |
| name | 字符串 | 必填 | 变量名，可以通过@name来返回字符串数组中index指定序号的变量值，返回为字符串无法用作计算 |
| index | 表达式 | 选填 | 变量数组中的序号，从0开始，支持表达式。注意点：Item中的顺序决定了index的取值 |
| value | 字符串 | 选填 | 变量数组的值，可以是字符串，也可以是数字 |
应用示例
示例：显示英文月份，建立一个名字为month_str的string数组，把十二个月份的英文加入到数组中，并把数组输出指定到全局变量month，这样使用@month_str得到 的就是当前月份的英文字符串。
xxxxxxxxxx<VarArray type="string"> <Vars> <Var name="month_str" index="#month"/> </Vars> <Items> <Item value="January"/> <Item value="February"/> ... <Item value="November"/> <Item value="December"/> </Items></VarArray><Text text="@month_str" color="#FFFFFFFF" size="20" x="100" y="100"/>
控件数组-Array
功能概述
能够同样重复多条目的生成图片Image、文字Text等界面控件。
注意：在该控件中使用Text控件，需使用texEmp的方式获取数组中文本数据，如下面XML规范及用例中所写。
应用场景
- 可用于游戏中点击界面出现一组数值，再次点击刷新数值。
XML规范
xxxxxxxxxx<Array frequency="" indexFlag="" > <Text textExp="" size="" align="" x="" y="" color="" /></Array>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| indexFlag | 字符串 | 必填 | 代表索引的名称，能够在下方的元素中引用 |
| frequency | 表达式 | 必填 | 表示重复生成元素的次数 |
上面的xml表示生成了一个TextView，其中内容还有x、y等位置都通过index来确定。
注意：indexFlag的数值从0开始到frequency-1 为止，其中#__i的值为目前循环的数值。
应用示例
示例一：元素数组能够与变量和周期命令结合共同调控。
声明了一个大小为100的变量数组但是并没有赋予初值，并且设置了参数const为true，代表变量只能被赋值一次。元素数组循环生成了100个不同的Text，其中textExp、x、y都是由其中的表达式和目前循环的次数计算得到。由于名字为find的数组没有赋予初值，所以目前没有任何显示。按下button之后，周期命令循环给find[index]变量赋值，并且通知到响应的Text，刷新最新的值。
xxxxxxxxxx<Var name="find" type="number[]" size="100" const="true" /><Array x="100" y="300" frequency="100" indexFlag="__i" > <Text textExp="#find[#__i]" size="30" align="center" x="#__i%10*90" y="int(#__i/10)*90" color="#ffffff" /></Array><Button x="0" y="0" w="1080" h="1920"> <Trigger action="up"> <CycleCommand frequency="100" indexFlag="col"> <VariableCommand name="find" type="number[]" index="#col" expression="#col" /> </CycleCommand> </Trigger></Button>
表达式
数字表达式-Expression
功能概述
支持数值型表达式的解析，对写在参数中的表达式能够进行全局变量取值和计算，返回值是一个浮点型的数值。并且能够实时监听使用的全局变量，当全局变量变化的时候，能够实时修改该表达式的值。并且支持逻辑运算，数学计算，字符串操作等一系列的函数。数字表达式中参数只能够嵌套数字表达式中包含的函数、数值型变量、数值和其组成的表达式。当数值表达式解析的数值超过7位时会有精度问题，建议数值范围在7位及以内。其他功能点中类型为数值且支持表达式的参数可以调用数字表达式解析功能。
应用场景
可控制图片可见性，比如点击屏幕多少次，就切换壁纸；或者长轴图片的位移动效，制作出全景的效果等。
可实现视频的播放与停止，到一定的条件下，播放，否则停止。
XML规范
支持加减乘除取模括号和函数
xxxxxxxxxx加减乘除取模 : + - * / %支持函数:sin, cos, tan, asin, acos, atan, sqrt, abs, min, max等，见下表支持数组：如#number[expression]，索引支持表达式解析支持取全局变量和自定义的变量：如#screen_width| 表达式 | 注 释 |
|---|---|
| digit(x) | 取给定数字的第几位，顺序为倒序从右往左，并且索引从1开始。例如digit(12345, 2) = 4 ，digit(12345, 1) = 5 |
| round(x) | 对输入的值四舍五入取整。负数时，小数点后<=0.5时向右取整，小数部分>0.5，则向左取整，例如round(4.5)=5, round(-4.5)=-4 |
| int(x) | 舍弃掉小数部分，例如int(4.5)=4, int(-4.5)=-4 |
| rand() | 取0到1之间的随机数，返回值为float。rand()在文本format属性中使用时，例如format="rand()=%d"，rand()的值是0；rand()*10的值是0~9之间的随机整数，其中%d表示取整。 |
| int(rand()*a+b) | 得到的是b到b+a之间的随机整数 |
| eq(x,y) | 条件判断，x是否与y相等，当x、y相等时，此表达式值为1，否则为0。x，y都可以为表达式，下同。 |
| ne(x,y) | 条件判断，x是否与y不相等，当x、y不相等时，此表达式值为1，否则为0 |
| ge(x,y) | 条件判断，x是否大于等于y，当x大于等于y时，此表达式值为1，否则为0 |
| gt(x,y) | 条件判断，x是否大于y，当x大于y时，此表达式值为1，否则为0 |
| le(x,y) | 条件判断，x是否小于等于y，当x小于等于y时，此表达式值为1，否则为0 |
| lt(x,y) | 条件判断，x是否小于y，当x小于y时，此表达式值为1，否则为0 |
| isnull(x) | 条件判断，是否变量没有值，如果没有值返回1，有值返回0。x为全局变量，用于判断绑定的变量是否查到数据，例如：isnull(#var)或者isnull(@var) |
| not(x) | 条件判断，x是否等于0，若等于0则返回1，如果不等于0则返回0 |
| ifelse(x,y,z) | 条件判断，如果x大于0，则返回值为y，否则返回值为z |
| ifelse(x1,y1,x2,y2,...,z) | if x1 > 0 return y1; else if x2 > 0 return y2; ... ; else return z。循环条件判断，如果x1大于零则返回y1，否则判断如果x2大于零则返回y2，否则判断xn是否大于零，如果大于0返回yn，否则返回z。至少有三个值x1,y1,z来完成整个条件的判断。如果在前面的返回中没有返回值，则最终返回最后一个值。 |
| pow(x,y) | 幂方函数，表示x的y次方的值，例如pow(2,3)=8 |
| len(数字) | 给定数字的数字的个数，例如len(1234)=4，len(-123.123)=6 |
| strIsEmpty(str) | 字符串是否为空，为空返回1，不为空返回0，支持字符串表达式 |
| strIndexOf(str1,str2) | 字符串str2在字符串str1中第一次出现的位置，返回首次出现位置的索引，索引从0开始，不存在返回-1，支持字符串表达式 |
| strLastIndexOf(str1,str2) | 字符串str2在字符串str1中最后一次出现的位置，返回末次出现位置的索引，索引从0开始，不存在返回-1，支持字符串表达式 |
| strContains(str1,str2) | str1中是否包含str2，包含返回1，不包含返回0，支持字符串表达式 |
| sin(x) | 三角函数正弦值，x为弧度值，返回sin(x)的值 |
| cos(x) | 三角函数余弦值，x为弧度值，返回cos(x)的值 |
| asin(x) | 反三角函数，当x为[-1, 1]时返回区间为[-pi/2，pi/2]的值，如果输入的绝对值超过1，返回的是0 |
| acos(x) | 反三角函数，当x为[-1, 1]时返回区间为[-pi/2，pi/2]的值，如果输入的绝对值超过1，返回的是0 |
| tan(x) | 正切值，返回x的正切值，当x的绝对值趋近pi/2的倍数可能因为精度问题导致不正常值 |
| atan(x) | 反正切值，返回x的反正切值 |
| sqrt(x) | 开平方函数，x为正数，如果输入x为负数则返回结果是0 |
| abs(x) | 返回一个数的绝对值 |
| min(x, y) | 返回x和y中的最小值 |
| max(x, y) | 返回x和y中的最大值 |
应用示例
示例一：表达式解析计算，t1变量值为3，计算公式为(10+2*3)/4，最终结果为4。
xxxxxxxxxx<Var name="t1" expression="3"/><Text x="50" y="10" size="30" format="(10+2*#t1)/4: %d" paras="(10+2*#t1)/4" />示例二：数学公式计算，返回数值1.5的正弦余弦正切值。
xxxxxxxxxx<Text x="50" y="100" size="30" format="sin(1.5),cos(1.5),tan(1.5): %d,%d,%d" paras="sin(1.5)*100,cos(1.5)*100,tan(1.5)"/>示例三：条件判断，判断是否1大于0，结果返回为1。
xxxxxxxxxx<Text x="50" y="1550" size="30" format="gt(1,0): %d" paras="gt(1,0)"/>示例四：条件判断，判断1是否大于0，最终返回2。
xxxxxxxxxx<Text x="650" y="1000" size="30" format="ifelse(1,2,3):%d" paras="ifelse(1,2,3)"/>示例五：字符串函数，寻找字符串hello中的第一个e的位置，索引是从0开始，所以返回值为1。
xxxxxxxxxx<Var name="a" expression="hello" type="string"/><Text x="650" y="1350" size="30" format="strIndexOf(@a,'e'):%d" paras="strIndexOf(@a,'e')"/>示例六：数字表达式中嵌套数字表达式，判断字符串变量a中e首次出现的位置是否小于3，此时返回值为1。
xxxxxxxxxx<Var name="a" expression="hello" type="string"/><Text x="650" y="1350" size="30" format="lt(strIndexOf(@a,'e'),3)" paras="lt(strIndexOf(@a,'e'),3)"/>
字符串表达式-StringExpression
功能概述
支持字符型表达式的解析，相比于数值型的表达式，其返回值为字符串型，不能够作为数值进行计算，只能作为字符串相关的函数的参数，字符串表达式的主要功能提供了不同的操作字符串的功能。字符串表达式内只能嵌套字符串表达式的函数、字符串、字符串变量、数值型变量。其他功能点中类型为字符串且支持表达式的参数可以调用字符串表达式解析能力。
应用场景
可实现不同的节日显示对应的图片。
XML规范
xxxxxxxxxx支持数组：如@string[expression],索引支持表达式解析支持数值和字符串型的全局变量解析：如#num，@str。注意：如果需要在字符串表达式中进行数值计算不能以#num这样的变量开头，如#num*10会被认为是取名为"num*10"的数值型变量，正确写法为：10*#10支持下表中字符串函数字符串表达式中的字符串必须使用单引号，例如"@a + 'hello' + @b"。注意："+"在字符串表达式中表示字符串的拼接，即在解析字符串表达式时会首先根据"+"对表达式进行拆分，然后分别解析拆分后的子字符串表达式，最后将子字符串表达式结果拼接得到最终结果，"+"不支持数值的加法计算。| 表达式 | 注 释 |
|---|---|
| substr(原字符串，字串开始位置，字串长度) | 返回字符串的子串，substr('你好呀',1,2) = '好呀'（注意：字符位置是从左至右，索引从0开始） |
| strIsEmpty(str) | 字符串是否为空，即“”，为空返回“true”字符串，否则返回“false”字符串。 例如：strIsEmpty(@abc) ，str可以是字符串、字符串变量、字符串函数，下同 |
| strIndexOf(str1,str2) | 字符串str2在字符串str1中首次出现的位置，索引从0开始，例如：strIndexOf('hello','he')=0，返回“0”，如果目标字符串没有出现则返回“-1” |
| strLastIndexOf(str1, str2) | 字符串str2在字符串str1zhong 最后出现的位置，索引从0开始，例如：str_LastIndexOf('hello','l')=3，返回“3”，如果目标字符串没有出现则返回“-1” |
| strContains(str1,str2) | 字符串str1中是否包含字符串str2，包含则返回"true"，否则返回"false"。例如： strContains('hello','he')=true ，返回"true" |
| strReplaceAll(str1,str2,str3) | 将str1中所有的str2替换为str3 ,例如（strReplaceAll('hello','e','i')＝”hillo“ |
| preciseeval(str,数值/数值型变量) | 计算str的值，其中第一位是字符串/字符串变量型/数字表达式函数的计算公式，第二位为数值/数值型变量标识保留的小数位数，例如： preciseeval('1/3',3)=0.333，返回数值字符串“0.333”。注意使用preciseeval运算符则其后不能使用其他的运算符和+连接符 |
| formatDate('format',@time_sys) | 返回指定格式的时间字符串，时间为此刻的系统时间，如：formatDate('yyyy-MM-dd hh:mm:ss',@time_sys)=“2019-08-23 19:15:10”，具体能够转换的时间和日期的格式可以参考系统日期占位符 |
| plus(a,b) | 返回a和b的和的整数值，其中a和b可以为字符串/字符串变量或者数值/数值变量/返回数值的字符串函数，例如：plus(3,3)=6，返回“6” |
| ifelse(x1,y1,x2,y2,...,xn,yn,z) | if (x1!=0) return y1; elseif(x2 !=0) return y2;...; else return z。从x1开始判断，若存在xi不等于0，则返回yi，否则一直往后判断，都不满足条件则最终返回z。xi为数字表达式，yi、z为返回的字符串结果，可以是字符串/字符串变量/字符串函数 |
| + | 用以拼接字符串，如#year+'/'+#month+'/'+#date，其中字符串必须使用单引号标明 |
应用示例
示例一：字符串与变量混合拼接，取数值和字符串变量值并且拼接，如果20191001，该文本输出为2019/10/01。
xxxxxxxxxx<Text x="650" y="1650" size="30" textExp="#year+'/'+#month+'/'+#date"/>示例二：substr字符串函数使用，截取字符串子串。
xxxxxxxxxx<Var name="a" expression="hello hello hello hello" type="string"/><Var name="k" expression="3"/><!--从索引0开始，截取3个字符，得到的为hel--><Text x="50" y="0" size="30" format="substr(@a,0,3):%s" paras="substr(@a,0,3)"/><!--首先内层substr截取@a，从0开始截取12个字符；后以该截取的字符作为外层substr的字符串，截取从变量#k=3开始的5个字符，最终返回"lo he"--><Text x="50" y="0" size="30" format="substr(substr(@a,0,12),#k,5):%s" paras="substr(substr(@a,0,12),#k,5)"/>示例三：preciseeval字符串函数使用，计算字符串的值并保留指定小数位数。
xxxxxxxxxx<Var name="k" expression="3"/><!--字符串数值计算，返回1除以3的值，并且值保留3个小数点，得到0.333--><Text x="350" y="700" size="30" format="preciseeval('1/3',3):%s" paras="preciseeval('1/3',3)"/><!--第一个参数支持数字表达式函数，-1/3小于1,lt函数值为1，保留#k=3位小数，最终返回1.000--><Text x="50" y="600" size="30" format="preciseeval(lt(-1/3,1),#k):%s" paras="preciseeval(lt(-1/3,1),#k)"/>示例四：格式化日期，显示当前时间小时和分钟时间会根据12小时或者24小时调整，如果当前是12小时制下午九点整则会显示09:00，24小时制会显示21:00。
xxxxxxxxxx<Text x="350" y="450" size="30" format="formatDate('HH:mm',@time_sys):%s" paras="formatDate('HH:mm',@time_sys)"/>示例五：字符串包含，检测字符串a中是否包含字符串“10”，结果是不包含，返回字符串false。
xxxxxxxxxx<Var name="a" expression="hello hello hello hello" type="string"/><Text x="50" y="1450" size="30" format="strContains(@a,'10'):%s" paras="strContains(@a,'10')"/>示例六：argb函数使用，解析透明度和红绿蓝三原色的值，最终返回8位16进制颜色表示字符串。
xxxxxxxxxx<Var name="c" expression="asdfghjklqwertyuiopxcvbnm,sdfghjklwertyuiopdfghjkxcvbnmfghjrtyui" type="string"/><Var name="h" expression="100"/><Var name="i" expression="100"/><Var name="j" expression="100"/><!--h,j,k变量值为100，strLastIndexOf函数的值为63，最终返回#643f6464--><Text x="50" y="50" size="30" color="argb(#h,strLastIndexOf(@c,'i'),#i,#j)" text="argb(#h,strLastIndexOf(@c,'i'),#i,#j)"/>示例七：strIsEmpty函数使用，判断字符串是否为空串。
xxxxxxxxxx<Var name="a" expression="hello hello hello hello" type="string"/><Var name="d" expression="" type="string"/><!--@a不为空，所以返回false--><Text x="600" y="100" size="30" format="strIsEmpty(@a):%s" paras="strIsEmpty(@a)"/><!--@d为空，所以返回true--><Text x="600" y="150" size="30" format="strIsEmpty(@d):%s" paras="strIsEmpty(@d)"/><!--substr(@a,0,3)结果为hel，所以返回false--><Text x="50" y="100" size="30" format="strIsEmpty(substr(@a,0,3)):%s" paras="strIsEmpty(substr(@a,0,3))"/><!--substr(@d,0,3)结果为“”，所以返回true--><Text x="50" y="150" size="30" format="strIsEmpty(substr(@d,0,3)):%s" paras="strIsEmpty(substr(@d,0,3))"/>示例八：ifelse函数使用，条件判断。
xxxxxxxxxx<Var name="c" expression="asdfghjklqwertyuiopxcvbnm" type="string"/><!--@c内包含字符串'as'，所以strContains函数值为1，所以返回2--><Text x="50" y="650" size="30" format="ifelse(strContains(@c,'as'),2,3):%s" paras="ifelse(strContains(@c,'as'),2,3)"/><!--@c内不包含字符串'hello'，所以strContains函数值为0，所以返回'bb'--><Text x="50" y="700" size="30" format="ifelse(strContains(@c,'hello'),'aa','bb'):%s" paras="ifelse(strContains(@c,'hello'),'aa','bb')"/>示例九：plus函数使用，实现加法功能。
xxxxxxxxxx<Var name="i" expression="100"/><Var name="j" expression="100"/><Var name="a" expression="hello hello hello hello" type="string"/><!--i,j为100，相加等于200，所以最终返回200--><Text x="50" y="900" size="30" format="plus(#i,#j):%s" paras="plus(#i,#j)"/><!--strIndexOf函数返回 结果为2，所以最终返回3--><Text x="50" y="950" size="30" format="plus(strIndexOf(@a,'l'),1):%s" paras="plus(strIndexOf(@a,'l'),1)"/><!--strIndexOf函数返回结果分别为0,1，所以最终返回1--><Text x="50" y="1000" size="30" format="plus(strIndexOf('asdfg','as'),strIndexOf('asdfg','sd')):%s" paras="plus(strIndexOf('asdfg','as'),strIndexOf('asdfg','sd'))"/>
命令
基础命令-Command
功能概述
基础命令，通过对象名和对应的属性来控制界面中的元素。常见是控制元素的可见性（visibility）和动画播放（animation）。
应用场景
- 长按触发视频播放，到达一定条件，停止播放。
- 点击屏幕，到达一定条件，展示或者隐藏图片。
XML规范
xxxxxxxxxx<Command target="" value="" condition="" delay="" delayCondition=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| target | 字符串 | 必填 | 对象name的名字（如控制对象-Image name="image1"/）， “.”后面跟的是属性（目前支持visibility和animation） |
| value | 字符串 | 必填 | 控制可见性visibility时，value为”true”, “false”或“toggle”，分别代表可见、 不可见以及反转可见性；控制动画animation时，value为”play”或”stop”，控制动画的播放和暂停 |
| condition | 表达式 | 选填 | 条件判断，支持表达式。当condition里的条件判断为非0或者为true时，该命令执行， 为false或者0则不执行 |
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行该命令 |
| delayCondition | 表达式 | 选填 | 延迟判断，为真则delay命令生效，否则失效。默认为true或者1时，表示可以延迟启动命令， 如果false或者非1则不延迟执行 |
应用示例
示例一：控制动画播放、暂停或图片可见、不可见。
xxxxxxxxxx<Button x="0" y="0" h="100" w="100" > <Trigger action="down"> <Command target="image1.visibility" value="toggle" /> <Command target="image1.visibility" value="false" /> <Command target="image1.animation" value="play"/> <Command target="image1.animation" value="stop"/> </Trigger></Button>
声音命令-SoundCommand
功能概述
声音命令，用来控制播放音频文件；注意：声音文件的大小要求不超过500kB，时长不超过10秒。
应用场景
- 捏猫的脸，可发出喵声。
- 记事提醒，一到规定的时间点，可有提示声。
- 解压类场景，扎破气球，会有爆破的声音。
XML规范
xxxxxxxxxx<SoundCommand sound="" volume="" loop="" keepCur="" />
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| sound | 字符串 | 必填 | 声音文件路径名 |
| volume | 数值 | 必填 | 正浮点数，声音大小，0~1的一个浮点数。数值越大，音量越大，不支持表达式 |
| loop | 字符串 | 选填 | 是否循环播放，true/false，默认是false，不支持表达式 |
| keepCur | 字符串 | 选填 | 播放此音频时，是否保持当前正在播放的声音，true/false，默认false。 只有当同时播放的音频数量大于系统最大值时才暂停优先级低的音频数据 |
应用示例
示例：控制循环播放reached.mp3，同时不停掉正在播放的其他声音。
xxxxxxxxxx<SoundCommand sound="reached.mp3" volume="0.5" loop="true" keepCur="true" />
可见性命令-VisibilityCommand
功能概述
除了在基础命令command中通过target的visibility属性来控制对象的可见性外，还支持在图片、文本等对象中配置visibility参数来控制对象可见性。
应用场景
每次点击屏幕，可显示不同的图片，比如多壁纸切换，漫画连载等。
可根据时间，实现屏幕黑白模式。
XML规范
xxxxxxxxxx<Image x="" y="" w="" h="" align="" antiAlias="" visibility=""/><Text x="" y="" align="" alignV="" color="" size="" textExp="" visibility=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| visibility | 表达式 | 必填 | 用于设置对象可见性，为true、>0则可见，为false、<=0不可见，支持表达式 |
应用示例
示例一：通过自定义变量控制文本或图片可见、不可见。
xxxxxxxxxx<Image x="100" y="750" centerX="136" centerY="151" src="dog.png" visibility = "true"/><Image name="sun" x="350" y="550" w="828*0.4" h="828*0.4" centerX="136" centerY="151" src="cake.png" visibility="1"/><Var name="isVisibility" expression="1"/><Text x="540" y="500" color="#00ff00" size="60" text="点击屏幕上方可见" ign="center" visibility="eq(#isVisibility,1)"/>
Intent命令-IntentCommand
功能概述
通过IntentCommand命令，可以跳转打开其他应用程序App。
说明：除安全相机外，其他要记得加上解锁命令，否则只是在后台打开了，还要解锁才能看到。
应用场景
- 在一间卧室里，点击桌子上的日历，可打开日历应用，点击柜子上的相机，可打开相机。
- 在负一屏显示可点击的快捷应用，点击其中一个，跳转到对应的应用。
XML规范
xxxxxxxxxx<IntentCommand action="" package="" class="" category="" condition="" delay="" delayCondition=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| action | 字符串 | 必填 | intent的action（参考应用示例） |
| category | 字符串 | 选填 | intent需要设置的category（参考应用示例） |
| package | 字符串 | 必填 | intent需要设置的的包名（参考应用示例） |
| class | 字符串 | 必填 | intent需要设置的类名（参考应用示例） |
| condition | 表达式 | 选填 | 条件判断，支持表达式。当condition里的条件判断为非0或者为true时，该命令执行， 为false或者0则不执行 |
| delay | 数值 | 选填 | 延迟，以毫秒记。延迟delay毫秒后执行该命令 |
| delayCondition | 表达式 | 选填 | 延迟判断，为真则delay命令生效，否则失效。默认为true或者1时，表示可以延迟启动命令， 如果false或者非1则不延迟执行 |
应用示例
示例：列举常见App启动的action、package、class、IntentCommand 。
xxxxxxxxxx安全相机 action="android.media.action.STILL_IMAGE_CAMERA_SECURE"拨号 action="android.intent.action.DIAL"主题 action="android.intent.action.MAIN" package="com.huawei.android.thememanager" class="com.huawei.android.thememanager.mvp.view.activity.onlinebase.PageActivity"备忘录 action="android.intent.action.MAIN" package="com.example.android.notepad" class="com.example.android.notepad.NotePadActivity"短信 action="android.intent.action.MAIN" package="com.android.mms" class="com.android.mms.ui.ConversationList" 联系人 action="android.intent.action.MAIN" package="com.android.contacts" class="com.android.contacts.activities.PeopleActivity"指南针 action="android.intent.action.MAIN" package="com.huawei.compass" class="com.huawei.compass.MainActivity"设置 action="android.intent.action.MAIN" package="com.android.settings" class="com.android.settings.HWSettings"日历 action="android.intent.action.MAIN" package="com.android.calendar" class="com.android.calendar.AllInOneActivity"文件管理 action="android.intent.action.MAIN" package="com.huawei.hidisk" class="com.huawei.hidisk.filemanager.FileManager"图库 action="android.intent.action.MAIN" package="com.android.gallery3d" class="com.huawei.gallery.App.GalleryMain"计算器 action="android.intent.action.MAIN" package="com.android.calculator2" class="com.android.calculator2.Calculator"天气 action="android.intent.action.MAIN" package="com.huawei.android.totemweather" class="com.huawei.android.totemweather.WeatherHome"时钟 action="android.intent.action.MAIN" package="com.android.deskclock" class="com.android.deskclock.AlarmsMainActivity"电子邮件 action="android.intent.action.MAIN" package="com.android.email" class="com.android.email.activity.Welcome"收音机 action="android.intent.action.MAIN" package="com.huawei.android.FMRadio" class="com.huawei.android.FMRadio.FMRadioMainActivity"录音机 action="android.intent.action.MAIN" package="com.android.soundrecorder" class="com.android.soundrecorder.SoundRecorder"华为音乐 action="android.intent.action.MAIN" package="com.android.mediacenter" class="com.android.mediacenter.PageActivity"应用市场 action="android.intent.action.MAIN" package="com.huawei.appmarket" class="com.huawei.appmarket.MainActivity"浏览器 action="android.intent.action.MAIN" package="com.huawei.browser" class="com.huawei.browser.Main2"UC浏览器 action="android.intent.action.MAIN" package="com.UCMobile" class="com.UCMobile.main.UCMobile"微信 action="android.intent.action.MAIN" package="com.tencent.mm" class="com.tencent.mm.ui.LauncherUI"QQ action="android.intent.action.MAIN" package="com.tencent.mobileqq" class="com.tencent.mobileqq.activity.SplashActivity"支付宝 action="android.intent.action.MAIN" package="com.eg.android.AlipayGphone" class="com.eg.android.AlipayGphone.AlipayLogin"淘宝 action="android.intent.action.MAIN" package="com.taobao.taobao" class="com.taobao.tao.welcome.Welcome"百度地图 action="android.intent.action.MAIN" package="com.baidu.BaiduMap" class="com.baidu.baidumaps.WelcomeScreen"美图秀秀 action="android.intent.action.MAIN" package="com.mt.mtxx.mtxx" class="com.mt.mtxx.mtxx.TopViewActivity"今日头条 action="android.intent.action.MAIN" package="com.ss.android.article.news" class="com.ss.android.article.news.activity.SplashActivity"新浪微博 action="android.intent.action.MAIN" package="com.sina.weibo" class="com.sina.weibo.SplashActivity"
视频命令-VideoCommand
功能概述
VideoCommand：控制视频的播放停止、替换视频源、控制视频播放声音等一系列功能；
注意：其中声音与播放只能同时实现一个，只有在没有控制声音的参数时，才能使用play参数。
应用场景
- 在一个电视锁屏上，滑动屏幕，即可播放视频。
- 多屏切换视频。
XML规范
xxxxxxxxxx<!--第一种方式没有声音参数时，可以使用play --><VideoCommand name="" src="" play="" /> <!--第二种方式有声音参数时，不可以使用play --><VideoCommand name="" src="" sound=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 所控制的视频的标识 |
| src | 字符串 | 必填 | 需要替换的视频的资源地址 |
| play | 表达式 | 必填 | 控制视频的播放或者停止 |
| sound | 表达式 | 选填 | 控制视频播放的声音，支持0~1的一个浮点数；数值越大，音量越大。 也支持有音量为true，无音量为false |
应用示例
示例一：循环播放sp1视频，按钮按下视频播放暂停即播暂停，按下视频播放即播放。
xxxxxxxxxx<Image x="0" y="(#screen_height-2400)/2" w="1350" h="2400" src="bj.jpg"/><Text x="50" y="120" align="left" alignV="top" color="#000000" size="40" text="视频播放" /><Button x="50" y="80" w="300" h="300" > <Trigger action="down"> <VideoCommand name="sp1" play="true"/> </Trigger></Button><Video name="sp1" src="sp.mp4" x="200" y="200" w="810*0.8" h="450*0.8" sound="1" defaultBitmap="sp1.png" play="true" looping="true" /><Text x="50" y="620" align="left" alignV="top" color="#000000" size="40" text="视频播放暂停" /><Button x="50" y="580" w="300" h="300" > <Trigger action="down"> <VideoCommand name="sp1" play="false"/> </Trigger></Button>
变量命令-VariableCommand
功能概述
变量命令，用来控制变量（Var）的值。包括name、expression和type三个特殊属性（用expression中的数据对name中的变量进行赋值），condition、delay、delayCondition的用法与Command一致。
XML规范
xxxxxxxxxx<VariableCommand name="" expression="" type="" condition="" delay="" delayCondition=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 变量名 |
| expression | 表达式 | 必填 | 对变量进行赋值时使用的表达式，支持常量赋值； 变量定义的时候不能用表达式（如#countNum+5） |
| type | 字符串 | 选填 | 标识是string类型变量还是number类型变量，默认为number类型 |
| condition | 表达式 | 选填 | 条件判断，支持表达式。当condition里的条件判断为非0或者为true时， 该命令执行，为false或者0则不执行 |
| delay | 数值 | 选填 | 延迟，以毫秒记。延迟delay毫秒后执行该命令 |
| delayCondition | 表达式 | 选填 | 延迟判断，为真则delay命令生效，否则失效。默认为true或者1时， 表示可以延迟启动命令，如果false或者非1则不延迟执行 |
应用示例
示例：执行变量赋值命令。
xxxxxxxxxx<Button x="0" y="0" h="100" w="100"> <Trigger action="down"> <!-- second<40时，则执行变量赋值命令 --> <VariableCommand name="delayCond0" expression="#delayCond0+5" condition="lt(#second,40)"/> <!-- 如果second<40，则延时6000ms后执行变量赋值命令--> <VariableCommand name="delayCond1" expression="#delayCond1+5" delayCondition="lt(#second,40)" delay="6000"/> <!--如果second<40时，则condition和delayCondition都为真，延时4000ms后执行变量赋值命令 --> <VariableCommand name="delayCond2" expression="#delayCond2+5" condition="lt(#second,40)" delayCondition="lt(#second,40)" delay="4000"/> </Trigger></Button>
通用命令-ExternCommand
功能概述
通用命令ExternCommand，用来向外部程序发送命令。目前仅能够支持解锁命令(仅在锁屏中有效)用这个命令可以实现解锁操作；ExternalCommand，与ExternCommand相对，是用来接收外部命令的命令，ExternalCommand是一种特殊的Command，不集成在-Trigger标签之下而是直接写在-Lockscreen标签之下，作为监测开关屏的命令。
XML规范
ExternCommand
xxxxxxxxxx<ExternCommand command="" condition="" delay="" delayCondition=""/>ExternalCommand
xxxxxxxxxx<ExternalCommands> <!--action通常用来接收亮屏/熄屏消息，从而执行一些命令resume表示亮屏时执行的命令，pause表示熄屏时执行的命令--> <Trigger action=""> <Command target="" value=""/> </Trigger></ExternalCommands>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| command | 字符串 | 必填 | 命令名，目前可以使用的一种命令是解锁命令unlock(仅在锁屏中有效) |
| condition | 表达式 | 选填 | 条件判断该Command是否执行，支持表达式。仅当值为非0或者为true时， 该命令执行。为false或者0则不执行 |
| delay | 数值 | 选填 | 延迟，单位ms。延迟delay毫秒后执行该命令 |
| delayCondition | 表达式 | 选填 | 延迟判断，为真则delay命令生效，否则失效。默认为true或者1时， 表示可以延迟启动命令，如果false或者非1则不延迟执行 |
应用示例
示例一：解锁命令，执行该命令能够直接解锁锁屏。
xxxxxxxxxx<ExternCommand command="unlock"/>示例二：在锁屏中，接收开屏/关屏命令，从而执行一些命令；在桌面插件中，用来检测切屏从而执行命令resume表示开屏时执行的命令，pause表示关屏时执行的命令。该示例在接受开屏信号之后，将name等于target的组件的动画启动，在关屏了之后，将目前的时间记录在pause_time变量里面。
xxxxxxxxxx<ExternalCommands> <Trigger action="resume"> <Command target="target.animation" value="play"/> </Trigger> <Trigger action="pause"> <VariableCommand name="pause_time" expression="#time_sys"/> </Trigger></ExternalCommands>
命令组-GroupCommands
功能概述
支持常用自定义一组命令组复用，方便与简化重复定义。
应用场景
可对不同的图片元素进行不同的动画展示，比如云朵被风吹动，鸟儿在天空飞翔，花草在地上晃动……
XML规范
xxxxxxxxxx<GroupCommands method="" paramTypes="" params="" />
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| method | 字符串 | 必填 | 执行动作，缺省值"perform"，目前暂无其他选项 |
| paramTypes | 表达式 | 选填 | 传入执行动作参数的类型，缺省值"String"，目前暂无其他选项 |
| params | 字符串 | 必填 | 传入命令组中具体Trigger action名称 |
应用示例
示例：通过变量命令控制命令组内选项，来切换不同旋转动画。
xxxxxxxxxx<Text x="540" y="#screen_height-200+#ThemeAdEntry_slider.move_y" color="#000000" size="48" text="点击变换" align="center"/><Image x="610" y="390" centerX="136" centerY="151" src="aixin7.png" visibility="eq(#a,0)"> <RotationAnimation > <Rotation angle="0" time="0"/> <Rotation angle="15" time="300"/> <Rotation angle="0" time="600"/> </RotationAnimation></Image><Image x="310" y="390" centerX="78" centerY="151" src="ty.png" visibility="eq(#a,1)"> <RotationAnimation > <Rotation angle="0" time="0"/> <Rotation angle="15" time="300"/> <Rotation angle="30" time="900"/> <Rotation angle="45" time="1200"/> <Rotation angle="60" time="1500"/> <Rotation angle="75" time="1800"/> <Rotation angle="90" time="2100"/> </RotationAnimation></Image><Group name="triggersContainer"> <Trigger action="down"> <VariableCommand name="a" expression="#a+1" condition="le(#a,2)"/> <VariableCommand name="a" expression="0" condition="eq(#a,2)"/> </Trigger> <Trigger action="up"> <VariableCommand name="a" expression="0" condition="eq(#a,2)"/> <VariableCommand name="a" expression="#a+1" condition="le(#a,2)"/> </Trigger></Group><Button name="zk1" x="300" y="#screen_height-300" w="470" h="300"> <Trigger action="down"> <GroupCommands method="perform" paramTypes="String" params="down" /> </Trigger></Button>
周期命令-CycleCommand
功能概述
CycleCommand主要和控件数组Array配合使用，旨在通过一行代码周期性地执行多条VariableCommand命令，实现对数组变量的赋值，可以降低代码量。
XML规范
xxxxxxxxxx<!--方式1：通过frequency来控制周期命令执行,indexFlag从[0,frequency-1]---><CycleCommand frequency="" indexFlag="" cycleCondition=""> <VariableCommand name="" type="" index="" expression=""/></CycleCommand><!--方式2：通过begin,end来控制周期命令执行,indexFlag从[begin,end]---><CycleCommand begin="" end="" indexFlag="" cycleCondition=""> <VariableCommand name="" type="" index="" expression=""/></CycleCommand>周期命令根据frequency或begin、end确定周期循环范围[0,frequency-1]或[begin，end]，在每次循环时对数组索引变量indexFlag进行赋值，同时执行VariableCommand命令来对数组变量赋值。
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| indexFlag | 字符串 | 必填 | 索引变量标识，用来表示循环次数的变量名， 在VariableCommand的expression中会被引用 |
| frequency | 数值 | 必填 | 控制周期命令执行次数，indexFlag索引变量取值范围是[0,frequency-1]； 若设置frequency，则begin，end参数无效 |
| begin | 数值 | 选填 | indexFlag索引变量从begin开始循环；通过begin,end参数确定循环范围为[begin,end]， 实现对索引变量的赋值 |
| end | 数值 | 选填 | indexFlag指定的变量到达end时终止计算 |
| cycleCondition | 数值 | 选填 | 周期命令执行条件，当cycleCondition不为0时执行VariableCommand命令， 支持数值表达式 |
应用示例
示例一：与数组Array组合使用，实现在屏幕上格式化展现0-99这100个数字。Var标签定义名为find的数组变量#find[]，数组大小为100；Array标签中实现对100个文本的textExp和坐标等赋值；当点击按钮时CycleCommand循环100次，使得indexFlag中的索引变量#col从0增至99；在每次循环时，变量命令将expression中的#col变量的值赋值给#find[#col]变量（即find数组中的第#col个元素），最终通过Array中Text显示在屏幕上。注意：VariableCommand与Var中的type定义为number[]，表示find数组是整数数组。
xxxxxxxxxx<Var name="find" type="number[]" size="100"/><Array x="100" y="300" frequency="100" indexFlag="__i" > <Text textExp="#find[#__i]" size="30" align="center" x="#__i%10*90" y="int(#__i/10)*90"/></Array><Button x="0" y="0" w="1080" h="1920"> <Trigger action="up"> <CycleCommand frequency="100" indexFlag="col"> <VariableCommand name="find" type="number[]" index="#col" expression="#col"/> </CycleCommand> </Trigger></Button>示例二：通过begin，end参数实现对数组find[0]=0到find[99]=99赋值，是示例一中使用frequency参数实现的周期命令的另一种写法。
xxxxxxxxxx<CycleCommand begin="0" end="99" indexFlag="col"> <VariableCommand name="find" type="number[]" index="#col" expression="#col"/></CycleCommand>示例三：通过设置cycleCondition使得在屏幕上显示除20以外的0-99数值。设置cycleCondition=ne(#col,20)，当#col不等于20时，ne(#col,20)=1，执行变量赋值命令，当#col等于20时，ne(#col,20)=0，#find[20]=20该变量命令不会执行，所以#find[20]变量为空值，最终屏幕中只会显示除20以外的0-99数值。
xxxxxxxxxx<Var name="find" type="number[]" size="100" /><Array x="100" y="300" frequency="100" indexFlag="__i" > <Text textExp="#find[#__i]" size="30" align="center" x="#__i%10*90" y="int(#__i/10)*90"/></Array><Button x="0" y="0" w="1080" h="1920"> <Trigger action="up"> <CycleCommand begin="0" end="100" indexFlag="col" cycleCondition="ne(#col,20)"> <VariableCommand name="find" type="number[]" index="#col" expression="#col"/> </CycleCommand> </Trigger></Button>
多语言
文本多语言-TextMultiLanguage
功能概述
该功能根据不同的语言设置来显示不同的文本，当手机语言切换的时候，脚本中文字也能跟随系统变换。在锁屏脚本目录下创建strings文件夹，里面添加支持的语言文件，英文strings.xml，简体中文strings_zh_CN.xml，繁体中文strings_zh_TW.xml等等。
应用场景
- 可用于不同语言显示，比如日历，时间，天气，节日等。
XML规范
xxxxxxxxxx<!--方式1--><Text text=""/><!--方式2--><Text textExp=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| text | 字符串 | 选填 | 文字表达式，当系统语言改变时对应匹配系统语言，刷新文字。示例： 写成text="'@charging+#battery_level"，展示中文时”充电中99“，英文时”charging99“； text与textExp两个参数必须填写一个;无法与textExp共存，当存在textExp值时，文字使用textExp。 |
| textExp | 字符串 | 选填 | 文字表达式，当系统语言改变时对应匹配系统语言，刷新文字。 示例：写成textExp="'@charging+#battery_level"，展示中文时”充电中99“，英文时”charging99“。 |
应用示例
示例：首先在strings文件夹下创建支持的xml语言文件，然后在manifest.xml脚本中使用变量。
步骤一：strings.xml文件中是系统语言为英文时显示的文字格式。
xxxxxxxxxx<strings> <string name="charging" value="Charging"/></strings>步骤二：strings_zh_CN.xml文件中是系统语言为中文时显示的文字格式。
xxxxxxxxxx<strings> <string name="charging" value="充电中"/></strings>步骤三：直接在脚本中使用变量@charging，在充电状态下显示匹配系统语言的文字格式。
xxxxxxxxxx<Text x="#screen_width/2" y="(#screen_height)-60" alignV="bottom" color="#ffffff" align="center" size="42" alpha="180" textExp="@charging+#battery_level"/>
图片多语言-PicMultiLanguage
功能概述
该功能根据不同的语言设置来显示相应的图片，当手机语言切换的时候，脚本中文字也能跟随系统变换。也可以把字符串写入string.xml文件中当做变量使用，这样手机语言切换的时候，变量也跟随切换，把这个变量绑定到图片中，图片也能跟着语言切换。在锁屏脚本目录下创建strings文件夹，里面添加支持的语言文件，英文strings.xml，简体中文strings_zh_CN.xml，繁体中文strings_zh_TW.xml。
应用场景
- 可用于不同语言下显示不同的图片，比如多壁纸切换。
XML规范
xxxxxxxxxx<Image srcExp=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| srcExp | 字符串 | 必填 | 图片源表达式，使用字符串变量，当系统语言改变时字符串改变即刷新图片。 示例：srcExp="t1+@lang"，中文时展示t1_ch.png，英文时展示图片t1_en.png。 |
应用示例
步骤一：首先在strings文件夹下创建支持的xml语言文件，然后在manifest.xml脚本中使用变量。
strings.xml文件中是系统语言为英文时显示的图片格式。
xxxxxxxxxx<strings> <string name="unlock_prompt" value="Slide to unlock" /> <string name="batterylow_text" value="Please connect charger"/> <string name="Charging_text" value="Charging"/> <string name="BatteryFull_text" value="Charge complete"/> <string name="w1" value="Sunday"/> <string name="w2" value="Monday"/> <string name="w3" value="Tuesday"/> <string name="w4" value="Wednesday"/> <string name="w5" value="Thursday"/> <string name="w6" value="Friday"/> <string name="w7" value="Saturday"/> <string name="lang" value="_en.png"/></strings>步骤二：strings_zh_CN.xml文件中是系统语言为中文时显示的图片格式。
xxxxxxxxxx<strings> <string name="unlock_prompt" value="滑动解锁"/> <string name="batterylow_text" value="请连接充电器"/> <string name="Charging_text" value="正在充电"/> <string name="BatteryFull_text" value="充电完成"/> <string name="w1" value="星期天"/> <string name="w2" value="星期一"/> <string name="w3" value="星期二"/> <string name="w4" value="星期三"/> <string name="w5" value="星期四"/> <string name="w6" value="星期五"/> <string name="w7" value="星期六"/> <string name="lang" value="_ch.png"/></strings>步骤三：根据对应的中文图片t1_ch.png、英文图片t1_en.png，直接在脚本中使用变量@lang，就能显示匹配系统语言的图片。
xxxxxxxxxx<Image align="center" y="#screen_height-2160+1776.5" x="177.5" alignV="center" srcExp="t1+@lang"/>
数学曲线
变速函数-VarSpeedFun
功能概述
变速函数提供了数值的非线性变化能力，主要用于基础动画中，控制缩放大小、透明度值等按照非线性进行变化。使用方法：在动画中设置varSpeedFlag属性，它作用于设置varSpeedFlag的帧以及下一帧，支持30种函数类型。例如，在位移动画中可以利用变速函数来控制图片从起始位置移动到结束位置过程中的移动速率。
目前变速函数已支持动画有AlphaAnimation、PositionAnimation、RotationAnimation、SizeAnimation、VariableAnimation。
应用场景
- 可让花朵自然的晃动，柳条自然的摆动。
- 鱼儿被惊吓，然后快速游走的过程。
XML规范
结合位移动画展示典型应用的XML规范，其他AlphaAnimation、RotationAnimation类似，不再赘述。
xxxxxxxxxx<PositionAnimation> <Position x="" y="" time="" varSpeedFlag=""/> <Position x="" y="" time="" /></PositionAnimation>
可填充在varSpeedFlag中的变速函数类型：
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| SineFun_In | 字符串 | 选填 | 按照正弦曲线图呈现的效果缓入 |
| SineFun_Out | 字符串 | 选填 | 按照正弦曲线图呈现的效果缓出 |
| SineFun_InOut | 字符串 | 选填 | 按照正弦曲线图呈现的效果缓入缓出 |
| QuadFun_In | 字符串 | 选填 | 按照二次方曲线图呈现的效果缓入 |
| QuadFun_Out | 字符串 | 选填 | 按照二次方曲线图呈现的效果缓出 |
| QuadFun_InOut | 字符串 | 选填 | 按照二次方曲线图呈现的效果缓入缓出 |
| CubicFun_In | 字符串 | 选填 | 按照三次方曲线图呈现的效果缓入 |
| CubicFun_Out | 字符串 | 选填 | 按照三次方曲线图呈现的效果缓出 |
| CubicFun_InOut | 字符串 | 选填 | 按照三次方曲线图呈现的效果缓入缓出 |
| QuartFun_In | 字符串 | 选填 | 按照四次方曲线图呈现的效果缓入 |
| QuartFun_Out | 字符串 | 选填 | 按照四次方曲线图呈现的效果缓出 |
| QuartFun_InOut | 字符串 | 选填 | 按照四次方曲线图呈现的效果缓入缓出 |
| QuintFun_In | 字符串 | 选填 | 按照五次方曲线图呈现的效果缓入 |
| QuintFun_Out | 字符串 | 选填 | 按照五次方曲线图呈现的效果缓出 |
| QuintFun_InOut | 字符串 | 选填 | 按照五次方曲线图呈现的效果缓入缓出 |
| ExpoFun_In | 字符串 | 选填 | 按照指数曲线图呈现的效果缓入 |
| ExpoFun_Out | 字符串 | 选填 | 按照指数曲线图呈现的效果缓出 |
| ExpoFun_InOut | 字符串 | 选填 | 按照指数曲线图呈现的效果缓入缓出 |
| CircFun_In | 字符串 | 选填 | 按照圆形曲线图呈现的效果缓入 |
| CircFun_Out | 字符串 | 选填 | 按照圆形曲线图呈现的效果缓出 |
| CircFun_InOut | 字符串 | 选填 | 按照圆形曲线图呈现的效果缓入缓出 |
| BackFun_In | 字符串 | 选填 | 按照超过范围的三次方曲线图呈现的效果缓入 |
| BackFun_Out | 字符串 | 选填 | 按照超过范围的三次方曲线图呈现的效果缓出 |
| BackFun_InOut | 字符串 | 选填 | 按照超过范围的三次方曲线图呈现的效果缓入缓出 |
| ElasticFun_In | 字符串 | 选填 | 按照指数衰减的正弦曲线图呈现的效果缓入 |
| ElasticFun_Out | 字符串 | 选填 | 按照指数衰减的正弦曲线图呈现的效果缓出 |
| ElasticFun_InOut | 字符串 | 选填 | 按照指数衰减的正弦曲线图呈现的效果缓入缓出 |
| BounceFun_In | 字符串 | 选填 | 按照指数衰减的反弹曲线图呈现的效果缓入 |
| BounceFun_Out | 字符串 | 选填 | 按照指数衰减的反弹曲线图呈现的效果缓出 |
| BounceFun_InOut | 字符串 | 选填 | 按照指数衰减的反弹曲线图呈现的效果缓入缓出 |
应用示例
示例：下面示例展示了当图片ty.png从(0,0)移动到(500,0)过程中使用了SineFun_Out函数效果，整个动画历时4000ms。注意：当从(500,0)移动到(800,0)过程中由于未使用变速函数，因此移动速率是均匀的。
xxxxxxxxxx<Image x="100" y="690" centerX="136" centerY="351" src="ty.png"> <PositionAnimation> <Position x="0" y="0" time="0" varSpeedFlag="SineFun_Out"/> <Position x="500" y="0" time="4000"/> <Position x="800" y="0" time="6000"/> </PositionAnimation></Image>
数据开放
天气数据开放-Weather
功能概述
开放天气App中天气相关数据：配置Weather标签后，在Weather标签中声明Var变量并使用指定的变量名，即可声明气象、空气质量指数、温度、湿度、风向、日出日落时间等天气数据对应的变量。变量支持默认值，如果获取到实际天气情况会更新该值。
说明：
目前该功能暂时只支持国内，且不支持昨天天气数据，只支持今天和明天天气数据。
天气类主题必须在description文件中写明天气相关设置的说明，包括以下内容：
天气数据来源于荣耀天气app，使用前请确保荣耀天气app已使用，并有当前定位城市的天气信息。
当前天气信息的更新频率为应用时立即更新一次，应用后5分钟左右更新一次。
XML规范
xxxxxxxxxx<Weather> <Var name="Weather.today.weatherIcon" expression="0" type="int"/> <Var name="Weather.today.aqivaluetext" expression="'轻度污染'" type="string"/> <Var name="Weather.tomorrow.weatherIcon" expression="13" type="int"/> <Var name="Weather.tomorrow.aqivaluetext" expression="'优质'" type="string"/></Weather>说明：只有在Weather标签中声明Var变量并使用指定的变量名，才能获取到实际的天气数据。Var用法参照 自定义变量-Var，天气变量名称参照 天气变量名称说明表。
天气变量名称说明表
说明：在此只列举今天的数据，明天的数据只需要将today改成tomorrow即可。
部分数据不支持明天，文档列表中已有详细说明
| 参 数 | 类 型 | 注 释 |
|---|---|---|
| Weather.today.weatherIcon | 数值 | 气象码。 0/9/10/27/28：未知; 1/33：晴; 2/34：大部晴天; 3：局部晴天; 4：局部多云; 5/37：霾; 6： 大部多云; 7：多云; 8/75：阴; 11：雾; 12：阵雨; 13：大部多云，伴有阵雨; 14：局部晴天， 伴有阵雨; 15：雷阵雨; 16：大部多云，伴有雷阵雨; 17：局部晴天，伴有雷阵雨; 18：雨; 19：阵雪; 20：大部多云，伴有阵雪; 21：局部晴天，伴有阵雪; 22：雪; 23：大部多云，伴有雪; 24：冰; 25/29：雨夹雪; 26：冻雨; 30：炎热; 31：寒冷; 32：有风; 35：局部多云，有阵雨; 36：局部多云; 38：大部多云; 39：局部多云，伴有阵雨; 40：大部多云，伴有阵雨; 41：局部多云，伴有雷阵雨; 42：大部多云，伴有雷阵雨; 43：大部多云，伴有阵雪; 44：大部多云，伴有雪; 45：雷阵雨，伴有冰雹; 46：小雨; 47：中雨; 48：大雨; 49：暴雨; 50：大暴雨; 51：特大暴雨; 52：小雪; 53：中雪;54：大雪; 55：暴雪; 56：沙尘暴; 57：小到中雨; 58：中到大雨; 59：大到暴雨; 60：暴雨到大暴雨; 61：大暴雨到特大暴雨; 62：小雪到中雪; 63：中雪到大雪; 64：大到暴雪; 65：浮尘; 66：扬沙; 67：强沙尘暴; 68：浓雾; 69：强浓雾; 70：中度霾; 71：重度霾; 72：严重霾; 73：大雾; 74：特强浓雾; 76：吹雪。 说明：实际使用中可对气象码进行分类展示，以提高制作效率 |
| Weather.today.weatherIconDes | 字符串 | 气象描述。 0/9/10/27/28：未知; 1/33：晴; 2/34：大部晴天; 3：局部晴天; 4：局部多云; 5/37：霾; 6：大部多云; 7：多云; 8/75：阴; 11：雾; 12：阵雨; 13：大部多云，伴有阵雨; 14：局部晴天，伴有阵雨; 15：雷阵雨; 16：大部多云，伴有雷阵雨; 17：局部晴天，伴有雷阵雨; 18：雨; 19：阵雪; 20：大部多云，伴有阵雪; 21：局部晴天，伴有阵雪; 22：雪; 23：大部多云，伴有雪; 24：冰; 25/29：雨夹雪; 26：冻雨; 30：炎热; 31：寒冷; 32：有风; 35：局部多云，有阵雨; 36：局部多云; 38：大部多云; 39：局部多云，伴有阵雨; 40：大部多云，伴有阵雨; 41：局部多云，伴有雷阵雨; 42：大部多云，伴有雷阵雨; 43：大部多云，伴有阵雪; 44：大部多云，伴有雪; 45：雷阵雨，伴有冰雹; 46：小雨; 47：中雨; 48：大雨; 49：暴雨; 50：大暴雨; 51：特大暴雨; 52：小雪; 53：中雪; 54：大雪; 55：暴雪; 56：沙尘暴; 57：小到中雨; 58：中到大雨; 59：大到暴雨; 60：暴雨到大暴雨; 61：大暴雨到特大暴雨; 62：小雪到中雪; 63：中雪到大雪; 64：大到暴雪; 65：浮尘; 66：扬沙; 67：强沙尘暴; 68：浓雾; 69：强浓雾; 70：中度霾; 71：重度霾; 72：严重霾; 73：大雾; 74：特强浓雾; 76：吹雪 |
| Weather.today.aqivalue | 数值 | 空气质量指数值：1. 优质；2. 良好；3. 轻度污染；4. 中度污染；5. 重度污染；6. 严重污染；0. 未知。 说明：无明天数据 |
| Weather.today.aqivaluetext | 字符串 | 空气质量等级划分枚举值：优质；良好；轻度污染； 中度污染；重度污染；严重污染。 说明：无明天数据 |
| Weather.today.currentTem | 数值 | 当前温度。 说明：无明天数据 |
| Weather.today.maxtemp | 数值 | 最高温度。 |
| Weather.today.mintemp | 数值 | 最低温度。 |
| Weather.today.humidity | 字符串 | 湿度。 无明天数据 |
| Weather.today.winddir | 字符串 | 风向枚举值：NE，E，SE， S，SW，W，N，NW。 |
| Weather.today.winddirDes | 字符串 | 风向枚举值：NE 东北风，E 东风，SE 东南风， S 南风，SW 西南风，W 西风，N 北风，NW 西北风。 |
| Weather.today.sunRise | 字符串 | 日出 HH:mm格式 06：05。 |
| Weather.today.sunSet | 字符串 | 日落 HH:mm格式 18：05 |
使用说明
1.可以搭配天气数据刷新命令RefreshWeatherCommand来刷新天气数据。参照 示例2：刷新天气数据。
2.如果使用了Weather标签并定义了天气变量，可以通过全局变量weatherRespCode的值，判断天气数据是网络返回值还是默认值：全局变量weatherRespCode的值为0表示默认值，1表示网络返回值。参照 示例1：展示天气状况并判断数据状态。
xxxxxxxxxx<Text x="30" y="100" alignV="top" color="#ffffff" size="30" format="数据状态0默认1接口返回值: %s" width ="1000" autoLineFeed="true" paras="#weatherRespCode"/>
应用示例
示例一：展示天气状况并判断数据状态
xxxxxxxxxx<Weather> <Var name="Weather.today.weatherIcon" expression="0" type="int"/> <Var name="Weather.today.aqivaluetext" expression="'优质'" type="string"/> <Var name="Weather.tomorrow.weatherIcon" expression="13" type="int"/> <Var name="Weather.tomorrow.aqivaluetext" expression="'轻度污染'" type="string"/></Weather><Text x="30" y="100" alignV="top" color="#ffffff" size="30" format="数据状态0默认1接口返回值: %s" width ="1000" autoLineFeed="true" paras="#weatherRespCode"/><Text x="40" y="200" alignV="top" color="#ffffff" size="30" format="今天天气状况码: %s" width ="1000" autoLineFeed="true" paras="#Weather.today.weatherIcon"/><Text x="40" y="300" alignV="top" color="#ffffff" size="30" format="今天空气质量: %s" width ="1000" autoLineFeed="true" paras="#Weather.today.aqivaluetext"/><Text x="40" y="600" alignV="top" color="#ffffff" size="30" format="明天天气状况码: %s" width ="1000" autoLineFeed="true" paras="#Weather.tomorrow.weatherIcon"/><Text x="40" y="700" alignV="top" color="#ffffff" size="30" format="明天空气质量: %s" width ="1000" autoLineFeed="true" paras="#Weather.tomorrow.aqivaluetext"/>示例二：刷新天气数据
xxxxxxxxxx<Weather> <Var name="Weather.today.weatherIcon" expression="999" type="int"/> <Var name="Weather.today.aqivaluetext" expression="'bbb'" type="string"/> <Var name="Weather.today.currentTem" expression="222" type="int"/> <Var name="Weather.today.maxtemp" expression="333" type="int"/> <Var name="Weather.today.mintemp" expression="444" type="int"/></Weather><Image x="600" y="500" h="250" w = " 260" src="bj.jpg" /><Button x="600" y="500" h="250" w="260"> <Trigger action="down"> <RefreshWeatherCommand /> </Trigger></Button>示例三
获取天气气象码，根据不同的气象码值展示不同的天气图标。并将气象码分为以下11大类进行展示：
- 晴 sunny（1/33：晴；2/34：大部晴天；3：局部晴天）。
- 多云 cloudy（4：局部多云；6：大部多云；7：多云；8/75：阴；36：局部多云；38：大部多云）。
- 霾 haze（5/37：霾；70：中度霾；71：重度霾；72：严重霾）。
- 雾 fog（11：雾；68：浓雾；69：强浓雾；73：大雾；74：特强浓雾）。
- 雨 rain（12：阵雨；13：大部多云，伴有阵雨；14：局部晴天，伴有阵雨；18：雨；26：冻雨；35：局部多云，有阵雨；39：局部多云，伴有阵雨；40：大部多云，伴有阵雨；46：小雨；47：中雨；48：大雨；49：暴雨；50：大暴雨；51：特大暴雨；57：小到中雨；58：中到大雨；59：大到暴雨；60：暴雨到大暴雨；61：大暴雨到特大暴雨）。
- 雷阵雨 Storm（15：雷阵雨；16：大部多云，伴有雷阵雨；17：局部晴天，伴有雷阵雨；41：局部多云，伴有雷阵雨；42：大部多云，伴有雷阵雨；45：雷阵雨，伴有冰雹）。
- 雪 Snow（19：阵雪；20：大部多云，伴有阵雪；21：局部晴天，伴有阵雪；22：雪；23：大部多云，伴有雪；24：冰；25/29：雨夹雪；43：大部多云，伴有阵雪；44：大部多云，伴有雪；52：小雪；53：中雪；54：大雪；55：暴雪；62：小雪到中雪；63：中雪到大雪；64：大到暴雪；76：吹雪）。
- 沙尘暴 Thunder shower（56：沙尘暴；65：浮尘；66：扬沙；67：强沙尘暴）。
- 寒冷 cold（31：寒冷）。
- 炎热 hot（30：炎热）。
- 默认值 default（32：有风；0/9/10/27/28：未知）。
xxxxxxxxxx<!--气象码分类--><Weather> <Var name="Weather.today.weatherIcon" expression="0" type="int"/></Weather><Var name="cnweatherIcon" expression="ifelse(eq(#Weather.today.weatherIcon,1),1,eq(#Weather.today.weatherIcon,33),1,eq(#Weather.today.weatherIcon,2),1,eq(#Weather.today.weatherIcon,34),1,eq(#Weather.today.weatherIcon,3),1,eq(#Weather.today.weatherIcon,4),2,eq(#Weather.today.weatherIcon,6),2,eq(#Weather.today.weatherIcon,7),2,eq(#Weather.today.weatherIcon,8),2,eq(#Weather.today.weatherIcon,75),2,eq(#Weather.today.weatherIcon,36),2,eq(#Weather.today.weatherIcon,38),2,eq(#Weather.today.weatherIcon,5),3,eq(#Weather.today.weatherIcon,37),3,eq(#Weather.today.weatherIcon,70),3,eq(#Weather.today.weatherIcon,71),3,eq(#Weather.today.weatherIcon,72),3,eq(#Weather.today.weatherIcon,11),4,eq(#Weather.today.weatherIcon,68),4,eq(#Weather.today.weatherIcon,69),4,eq(#Weather.today.weatherIcon,73),4,eq(#Weather.today.weatherIcon,74),4,eq(#Weather.today.weatherIcon,12),5,eq(#Weather.today.weatherIcon,13),5,eq(#Weather.today.weatherIcon,14),5,eq(#Weather.today.weatherIcon,18),5,eq(#Weather.today.weatherIcon,26),5,eq(#Weather.today.weatherIcon,35),5,eq(#Weather.today.weatherIcon,39),5,eq(#Weather.today.weatherIcon,40),5,eq(#Weather.today.weatherIcon,46),5,eq(#Weather.today.weatherIcon,47),5,eq(#Weather.today.weatherIcon,48),5,eq(#Weather.today.weatherIcon,49),5,eq(#Weather.today.weatherIcon,50),5,eq(#Weather.today.weatherIcon,51),5,eq(#Weather.today.weatherIcon,57),5,eq(#Weather.today.weatherIcon,58),5,eq(#Weather.today.weatherIcon,59),5,eq(#Weather.today.weatherIcon,60),5,eq(#Weather.today.weatherIcon,61),5,eq(#Weather.today.weatherIcon,15),6,eq(#Weather.today.weatherIcon,16),6,eq(#Weather.today.weatherIcon,17),6,eq(#Weather.today.weatherIcon,41),6,eq(#Weather.today.weatherIcon,42),6,eq(#Weather.today.weatherIcon,45),6,eq(#Weather.today.weatherIcon,19),7,eq(#Weather.today.weatherIcon,20),7,eq(#Weather.today.weatherIcon,21),7,eq(#Weather.today.weatherIcon,22),7,eq(#Weather.today.weatherIcon,23),7,eq(#Weather.today.weatherIcon,24),7,eq(#Weather.today.weatherIcon,25),7,eq(#Weather.today.weatherIcon,29),7,eq(#Weather.today.weatherIcon,43),7,eq(#Weather.today.weatherIcon,44),7,eq(#Weather.today.weatherIcon,52),7,eq(#Weather.today.weatherIcon,53),7,eq(#Weather.today.weatherIcon,54),7,eq(#Weather.today.weatherIcon,55),7,eq(#Weather.today.weatherIcon,62),7,eq(#Weather.today.weatherIcon,63),7,eq(#Weather.today.weatherIcon,64),7,eq(#Weather.today.weatherIcon,76),7,eq(#Weather.today.weatherIcon,56),8,eq(#Weather.today.weatherIcon,65),8,eq(#Weather.today.weatherIcon,66),8,eq(#Weather.today.weatherIcon,67),8,eq(#Weather.today.weatherIcon,31),9,eq(#Weather.today.weatherIcon,30),10,11)"/><!--天气图标展示--><Group> <Image x="450" y="490" w="80" h="90" src="weather_sunny.png" visibility="eq(#cnweatherIcon,1)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_cloudy.png" visibility="eq(#cnweatherIcon,2)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_haze.png" visibility="eq(#cnweatherIcon,3)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_fog.png" visibility="eq(#cnweatherIcon,4)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_rain.png" visibility="eq(#cnweatherIcon,5)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_Storm" visibility="eq(#cnweatherIcon,6)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_Snow.png" visibility="eq(#cnweatherIcon,7)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_Thunder shower.png" visibility="eq(#cnweatherIcon,8)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_cold.png" visibility="eq(#cnweatherIcon,9)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_hot.png" visibility="eq(#cnweatherIcon,10)" align="center" alignV="center"/> <Image x="450" y="490" w="80" h="90" src="weather_default.png" visibility="eq(#cnweatherIcon,11)" align="center" alignV="center"/></Group>
音乐数据开放-MediaControl
功能概述
开放以下音乐数据和播控功能，支持在锁屏、桌面中使用以制作创意主题。
| 音乐数据 | 歌曲名称 | 专辑封面 | 艺术家名称 | 歌词 | 歌曲风格 |
|---|---|---|---|---|---|
| 音乐App | ✓ | ✓ | ✓ | × | × |
| 播控功能 | 暂停/播放 | 音量调节 | 切换歌曲 | 歌词开关 | 震动开关 | 收藏/取消收藏 | 播放模式 | 进度条 |
|---|---|---|---|---|---|---|---|---|
| 音乐App | ✓ | ✓ | ✓ | × | × | × | × | ✓ |
使用说明
- 由于歌曲风格、歌词和收藏/取消收藏、播放模式、歌词开关、震动开关不支持，因此设计师需要在预览图和描述文件中明确告知用户：歌曲风格、歌词和收藏/取消收藏、播放模式、歌词开关、震动开关不支持。
- 在锁屏中，建议不制作播控功能，避免与系统的播控弹窗重叠。
音乐控制器-MediaControl
在使用音乐数据和播控功能时，需要先声明音乐控制器-MediaControl/。
XML规范
xxxxxxxxxx<!--不指定音乐App，可以控制当前播放的音乐App--><MediaControl />说明
同一个脚本中，声明一次-MediaControl/即可。
音乐控制器-MediaControl/需写在-Lockscreen或者-CommonWallpaper下一个层级。
音乐数据变量
使用音乐数据变量时，需要先声明音乐控制器-MediaContro /。
| 参数 | 类型 | 注释 |
|---|---|---|
| media_play_status | 数值 | 播放状态，1为停止，2为暂停，3为播放。 说明：停止：从头开始播。暂停：从当前进度开始播。 |
| media_title | 字符串 | 歌曲名称。 说明：当通过文本展示歌曲名称时，可设置文本内容超出文本框宽度后滚动/裁剪， 避免歌曲名称过长时自动换行，影响其他内容展示的情况。 |
| media_subtitle | 字符串 | 艺术家名称。 说明：当通过文本标签展示艺术家名称时，可设置文本内容超出文本框宽度后滚动/裁剪， 避免艺术家名称过长时自动换行，影响其他内容展示的情况。 |
音乐控制命令-MediaCommand
在使用音乐控制命令-MediaCommand时，需要先声明音乐控制器-MediaControl。
XML规范
xxxxxxxxxx<MediaCommand command="" voiceStep100="" condition=""/>
参数说明
| 参数 | 类型 | 选项 | 注释 |
|---|---|---|---|
| command | 字符串 | 必填 | command可以设置的值如下： mediaPlay：音乐播放命令 mediaPause：音乐暂停命令 skipToPrevious：上一首 skipToNext：下一首 addVoice：增加音量 subVoice：减少音量 |
| voiceStep100 | 数值 | 选填 | 音量变化的步进值，默认为10，支持表达式。 |
| condition | 数值 | 选填 | 触发条件，1为触发，支持表达式。 |
应用示例
xxxxxxxxxx<CommonWallpaper> <MediaControl/> <Button h="200" w="200" x="700" y="100"> <Trigger action="up"> <VibrateCommand id ="a" type="haptic.common.success" define = "false" /> <MediaCommand command="mediaPlay" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="停止" x="750" y="400" /> <Button h="200" w="200" x="700" y="400"> <Trigger action="up"> <MediaCommand command="mediaPause" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="收藏" x="750" y="600" /> <Button h="200" w="200" x="700" y="580"> <Trigger action="up"> <MediaCommand command="mediaLike" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="取消收藏" x="750" y="900" /> <Button h="200" w="200" x="700" y="890"> <Trigger action="up"> <MediaCommand command="mediaDislike" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="上一首" x="200" y="1350" /> <Button h="100" w="200" x="180" y="1350"> <Trigger action="up"> <MediaCommand command="skipToPrevious" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="下一首" x="540" y="1350" /> <Button h="100" w="200" x="440" y="1350"> <Trigger action="up"> <MediaCommand command="skipToNext" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="增加音量" x="200" y="1460" /> <Button h="100" w="200" x="40" y="1460"> <Trigger action="up"> <MediaCommand command="addVoice" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="减小音量" x="540" y="1460" /> <Button h="100" w="200" x="440" y="1460"> <Trigger action="up"> <MediaCommand command="subVoice" condition="1" /> </Trigger> </Button> <Text align="center" color="#000000" size="60" text="切换模式" x="200" y="1950" /> <Button h="200" w="200" x="40" y="1950"> <Trigger action="up"> <VariableCommand name="repeat_mode" expression="#repeat_mode + 1"/> <VariableCommand name="repeat_mode" expression="0" condition="gt(#repeat_mode,3)"/> <MediaCommand command="mediaRepeatMode" condition="1" /> </Trigger> </Button><CommonWallpaper>说明：示例中的 -MediaControl/写在-CommonWallpaper标签下，如设计在锁屏中则写在-Lockscreen标签下。
音乐进度条-MediaProgressbar
在使用音乐进度条-MediaProgressbar时，需要先声明音乐控制器-MediaControl。
XML规范
xxxxxxxxxx<MediaProgressbar topColor="" bottomColor="" bgSrc="" iconSrc="" x="" y="" h="" w="" progressWidth="" iconWidth="" iconHeight=""/>
参数说明
| 参数 | 类型 | 选项 | 注释 |
|---|---|---|---|
| topColor | 字符串 | 必填 | 已进行进度颜色，支持表达式。 |
| bottomColor | 字符串 | 必填 | 未进行的进度颜色，支持表达式。 |
| bgSrc | 字符串 | 选填 | 进度条的背景图。 |
| iconSrc | 字符串 | 选填 | 跟随进度的小图标，支持表达式。 |
| progressWidth | 数值 | 选填 | 进度条的高度，支持表达式。 |
| iconWidth | 数值 | 必填 | 小图标的宽度，支持表达式。 |
| iconHeight | 数值 | 选填 | 小图标的高度，支持表达式。 |
| isRightAngle | 字符串 | 选填 | 表示进度条角度，值为true时进度条为直角，非true或不填为圆角。 |
x、 y、h和w这4个参数规定了-MediaProgressbar控件的位置和大小。progressWidth的值规定了实际显示出来的进度条的高度，当progressWidth的值≤h的值时，按照实际值居中显示；当progressWidth的值>h的值时，按照h的值显示。
应用示例
xxxxxxxxxx<MediaProgressbar topColor="#550000" bottomColor="#ff0000" bgSrc="k1.png" iconSrc="tkr.png" x="100" y="1650" h="100" w="800" progressWidth="50" iconWidth="60" iconHeight="60"/>
专辑封面-Medialcon
获取到音乐App中的专辑封面图片时，展示获取到的专辑封面。
未获取到音乐App中的专辑封面图片时，展示通过-MediaIcon设置的默认专辑封面。
在使用专辑封面-Medialcon时，需要先声明音乐控制器-MediaControl。
xml规范
xxxxxxxxxx<MediaIcon x="" y="" w="" h="" src=""/>
参数说明
-Medialcon支持图片-Image的参数设置。
| 参数 | 类型 | 选项 | 注释 |
|---|---|---|---|
| src | 字符串 | 必填 | 没有歌曲封面时展示的默认图。 |
应用示例
xxxxxxxxxx<MediaIcon x="40" y="580" w="400" h="400" src="bg.jpg"/>
运动健康数据开放-Healthy
功能概述
开放运动健康App的步数、距离、卡路里、实时心率和静息心率数据，设计师可以根据这些数据制作创意主题。
说明：
用户需打开运动健康App，同意用户协议并登录帐号，才能获取到步数、距离和卡路里数据。在此基础上，
还需绑定支持心率功能的智能穿戴设备，才能获取到实时心率和静息心率数据。
场景举例
- 在屏幕中设计一个人物形象，卡路里消耗的越多，人物形象越苗条。
- 当步数达到一定数值时，背景图更改。
XML规范
xxxxxxxxxx<Healthy polling="" time="" > <Var name="" /></Healthy>
参数说明
| 参数 | 类型 | 选项 | 注释 |
|---|---|---|---|
| polling | 布尔值 | 选填 | 轮询开关，true为开启轮询，false为关闭轮询。默认是false。 |
| time | 数值 | 选填 | 轮询时间间隔，单位（秒），最小值为1，仅在polling为true的时候有效。默认是5秒。 |
| name | 字符串 | 必填 | 参照下面运动健康数据类型取值。 |
系统数据开放
功能概述
开放以下系统数据和控制功能，以制作创意主题。
系统数据：
- 设备版本
- 设备可用空间
- 设备总空间
- 声音模式
- 手电筒开关状态
- 自动旋转开关状态
- 设备开机时长
- CPU使用率
- CPU空闲率
- 音量/亮度进度条
控制功能：
声音模式改变命令
手电筒开关命令
自动旋转开关命令
音量/亮度进度条加减命令
支持范围
支持应用范围：锁屏、桌面。
支持设备类型：手机、平板、折叠屏。
系统数据全局变量
- 变量说明
| 变量名称 | 类型 | 说明 |
|---|---|---|
| systemVersion | 字符串 | 设备版本。 |
| storageFree | 字符串 | 设备可用空间。结果四舍五入取整，单位：G。 |
| storageFreeNum | 数值 | 设备可用空间。结果四舍五入取整，单位：MB（不显示）。 |
| storageTotal | 字符串 | 设备总空间。结果四舍五入取整，单位：G。 |
| storageTotalNum | 数值 | 设备总空间。结果四舍五入取整，单位：MB（不显示）。 |
| vibration | 数值 | 声音模式。2：响铃；1：震动；0：静音。超出[0,2]取值范围不生效。 |
| flashlight | 字符串 | 手电筒开关状态。0：关闭；1：打开。 |
| automaticRotary | 字符串 | 自动旋转开关状态。0：关闭；1：打开。 |
- 应用示例
xxxxxxxxxx<Text name="t1" color="#ffffff" format="手机版本:%s" paras="#systemVersion" size="50" x="100" y="300" /><Text name="t5" color="#ffffff" format="手机可用空间:%s" paras="#storageFree" size="50" x="100" y="900" /><Text name="t6" color="#ffffff" format="手机总空间:%s" paras="#storageTotal" size="50" x="100" y="1000" />
系统数据自定义变量
设备开机时长获取 deviceTime
通过建立Var标签，设置name="deviceTime"获取设备开机时长数据。
XML规范
xxxxxxxxxx<Var name="deviceTime" assigning="" />| 参数 | 类型 | 选项 | 说明 |
|---|---|---|---|
| assigning | 字符串 | 必填 | 设备开机时长的显示格式：dd天、dd天HH、dd天HH小时mm分钟。 格式中的文字字符会被替换，以dd天HH小时mm分钟这个格式为例， 也可以写为dd/HH/mm、dd-HH-mm等。 |
应用示例
xxxxxxxxxx<Var name="deviceTime" assigning="dd天HH小时mm分钟" /><Text name="t2" color="#ffffff" format="获取开机时长:%s" paras="#deviceTime" size="50" x="100" y="500" />
设备开机时长轮询 pollingTime
设置轮询时间间隔后，将按照轮询时间间隔自动刷新设备开机时长数据。
XML规范
| 参数 | 类型 | 选项 | 说明 |
|---|---|---|---|
| time | 数值 | 选填 | 设备开机时长的轮询时间，单位：分钟，最小值为1，不填即不开启轮询。 |
应用示例
xxxxxxxxxx<!--1分钟刷新一次设备开机时长--><Var name="pollingTime" time="1" /><Var name="deviceTime" assigning="dd天HH小时mm分钟" /><Text name="t2" color="#ffffff" format="获取开机时长:%s" paras="#deviceTime" size="50" x="100" y="500" />
CPU使用率 processCpuRate
通过建立Var标签，设置name="processCpuRate"获取CPU使用率数据。
xml规范
xxxxxxxxxx<Var name="processCpuRate" bit="" />| 参数 | 类型 | 选项 | 说明 |
|---|---|---|---|
| bit | 数值 | 选填 | 保留小数的位数。 说明: 1.CPU空闲率的小数位数和CPU使用率的小数位数保持一致。 2.如果不设置此参数，则默认显示整数 |
应用示例
xxxxxxxxxx<Var name="processCpuRate" bit="3" /><Text name="t3" color="#ffffff" format="获取CPU使用率:%s" paras="#processCpuRate" size="50" x="100" y="700" />
CPU空闲率 processCpuFree
通过建立Var标签，设置name="processCpuFree"获取CPU空闲率数据。
XML规范
xxxxxxxxxx<Var name="processCpuFree" />
应用示例
xxxxxxxxxx<Var name="processCpuFree" /><Text name="t4" color="#ffffff" format="获取CPU空闲率:%s" paras="#processCpuFree" size="50" x="100" y="800" />
系统数据控制命令
声音模式改变命令
声音模式正常使用的必要条件：在设置页面打开主题对应的免打扰权限。
声音模式共3种(详见全局变量vibration），支持通过VariableCommand命令改变声音模式。
XML规范
xxxxxxxxxx<VariableCommand name="vibration" expression="(#vibration+1)%3"/>
应用示例
xxxxxxxxxx<!--通过点击按钮,切换声音模式--><Image y="762" x="74" src="moshi.png" srcid="#vibration"/><Button y="762" x="74" w="120" h="120"> <Trigger action="down"> <VariableCommand name="vibration" expression="(#vibration+1)%3"/> <VariableCommand name="vibration" expression="0" condition="gt(#vibration,2)"/> </Trigger> </Button>
手电筒开关命令
手电筒开关状态共2种（详见全局变量flashlight），支持通过VariableCommand命令控制手电筒开关。
XML规范
xxxxxxxxxx<VariableCommand name="flashlightValue" expression="#flashlightValue+1" persist="false" />
应用示例
创建固定变量flashlightValue，每次点击flashlightValue的值+1，同时为变量flashlight重新赋值：如果flashlight的值为0，则重新为其赋值为1；如果flashlight的值为1，则重新为其赋值为0。
xxxxxxxxxx<Image x="100" y="1100" w="300" h="150" src="close.png" visibility="eq(#flashlight,0)" /><Image x="100" y="1100" w="300" h="150" src="open.png" visibility="eq(#flashlight,1)" /><Button x="100" y="1100" w="300" h="150" > <Trigger action="click"> <VariableCommand name="flashlightValue" expression="#flashlightValue+1" persist="false" /> </Trigger></Button>
自动旋转开关命令
自动旋转开关状态共2种（详见全局变量automaticRotary），支持通过VariableCommand命令控制手机是否自动旋转屏幕
XML规范
xxxxxxxxxx<VariableCommand name="automaticRotaryValue" expression="#automaticRotaryValue+1" persist="false" />
应用示例
创建固定变量automaticRotaryValue，每次点击automaticRotaryValue的值+1，同时为变量automaticRotary重新赋值：如果automaticRotary的值为0，则重新为其赋值为1；如果automaticRotary的值为1，则重新为其赋值为0。
xxxxxxxxxx<Image x="100" y="1100" w="300" h="150" src="close.png" visibility="eq(#automaticRotary,0)" /><Image x="100" y="1100" w="300" h="150" src="open.png" visibility="eq(#automaticRotary,1)" /><Button x="100" y="1300" w="300" h="150" > <Trigger action="click"> <VariableCommand name="automaticRotaryValue" expression="#automaticRotaryValue+1" persist="false" /> </Trigger></Button>
音量/亮度进度条加减命令
支持通过音量/亮度进度条加减命令ProgressCommand，进行音量/亮度的加减。
XML规范
xxxxxxxxxx<ProgressCommand mode="" change="" amplitude="" />| 参数 | 类型 | 选项 | 说明 |
|---|---|---|---|
| mode | 数值 | 必填 | 音量或屏幕亮度模式。0：通话音量；1：屏幕亮度；2：来电信息通知音量； 3：音乐/视频/游戏音量；4：闹钟音量。 |
| change | 数值 | 必填 | 进度条加减。0：减；1：加。 |
| amplitude | 数值 | 必填 | 进度条加减的步进值。参照以下范围进行取值。 通话音量：1-15。 屏幕亮度：4-255。 来电信息通知音量：0-15。 音乐/视频/游戏音量：0-15。 闹钟音量：1-15。 说明: 1.步进值是指单次调节进度条时增加或减少的值。 2. 不同系统的亮度范围可能会有所差异，以上亮度范围仅为参考。 |
应用示例
xxxxxxxxxx<!--点击按钮减少音乐/视频/游戏音量--><Image x="100" y="1600" w="70" h="70" src="subtraction.png" /><Button x="100" y="1600" w="70" h="70" > <Trigger action="click"> <ProgressCommand mode="3" change="0" amplitude="50" /> </Trigger></Button><!--点击按钮增加音乐/视频/游戏音量--><Image x="890" y="1600" w="70" h="70" src="addition.png" /><Button x="890" y="1600" w="70" h="70" > <Trigger action="click"> <ProgressCommand mode="3" change="1" amplitude="50" /> </Trigger></Button>
综合用例
示例一：获取手机版本、手机可用空间、手机总空间数据，同时使用进度条展示手机可用空间占比。
xxxxxxxxxx<Var expression="strIndexOf(#storageFree,'GB')-1" name="index1"/><Var expression="strIndexOf(#storageTotal,'GB')-1" name="index2"/><Var expression="substr(#storageFree,0,#index1)" name="free" type="string"/><Var expression="substr(#storageTotal,0,#index2)" name="total" type="string"/><Text y="75" x="88" size="62" paras="#systemVersion" format="%s" color="#ffffff"/><Text y="167" x="88" size="38" color="#cde969" text="版本号"/><Image src="icons.png" y="295" x="73"/><Text y="310" x="199" size="43" paras="#storageFree" format="%s可用" color="#ffffff"/><Image src="xiegang.png" y="315" x="441"/><Text y="310" x="467" size="43" paras="#storageTotal" format="%s" color="#ffffff"/><Image src="jindutiao_bg.png" y="379" x="190"/><Image src="progress/jindutiao.png" y="379" x="190" srcid="round(((#total-#free)/#total)*10)"/>示例二：获取手机版本、开机时长、CPU使用率、获取CPU空闲率、手机可用空间、手机总空间等系统数据，
支持控制手电筒开关和自动旋转开关，并支持调节音乐/视频/游戏音量。
xxxxxxxxxx<Text name="t1" color="#ffffff" format="手机版本:%s" paras="#systemVersion" size="50" x="100" y="300" /><Var name="pollingTime" time="1" /><Var name="deviceTime" assigning="dd天HH小时mm分钟" /><Text name="t2" color="#ffffff" format="获取开机时长:%s" paras="#deviceTime" size="50" x="100" y="500" /><Var name="processCpuRate" bit="3" /><Text name="t3" color="#ffffff" format="获取CPU使用率:%s" paras="#processCpuRate" size="50" x="100" y="700" /><Var name="processCpuFree" /><Text name="t4" color="#ffffff" format="获取CPU空闲率:%s" paras="#processCpuFree" size="50" x="100" y="800" /><Text name="t5" color="#ffffff" format="手机可用空间:%s" paras="#storageFree" size="50" x="100" y="900" /><Text name="t6" color="#ffffff" format="手机总空间:%s" paras="#storageTotal" size="50" x="100" y="1000" /><Text name="t7" color="#ffffff" format="手电筒开关:%s" paras="#flashlight" size="50" x="100" y="1200" /><Button x="100" y="1100" w="300" h="150" > <Trigger action="click"> <VariableCommand name="flashlightValue" expression="#flashlightValue+1" persist="false" /> </Trigger></Button><Var name="vibration" expression="0"/><Text name="t8" color="#ffffff" format="自动旋转开关:%s" paras="#automaticRotary" size="50" x="100" y="1400" /><Button x="100" y="1300" w="300" h="150" > <Trigger action="click"> <VariableCommand name="automaticRotaryValue" expression="#automaticRotaryValue+1" persist="false" /> </Trigger></Button><Image x="100" y="1600" w="70" h="70" src="subtraction.png" /><Button x="100" y="1600" w="70" h="70" > <Trigger action="click"> <ProgressCommand mode="3" change="0" amplitude="50" /> </Trigger></Button><Var name="Progress" direction="0" mode="3" topColor="#550000" bottomColor="#ff0000" bgSrc="jdt.png" iconSrc="hk.png" x="180" y="1605" w="700" h="60" progressWidth="20" iconWidth="60" iconHeight="40" roundedCorners="20" /><Image x="890" y="1600" w="70" h="70" src="addition.png" /><Button x="890" y="1600" w="70" h="70" > <Trigger action="click"> <ProgressCommand mode="3" change="1" amplitude="50" /> </Trigger></Button>
步数-StepCount
功能概述
步数功能是根据全局变量#steps_value实现的。可以通过Text文本调用全局变量#steps_value显示步数。
应用场景
- 当天步数达到不同值时，展示不同勋章，比如10000步展示健康达人勋章。
- 当天步数达到不同值时，展示不同海拔高度的风景壁纸。
- 当天步数达到不同值时，展示消耗的卡路里的图片，例如，5000步时展示您已经消耗了一袋薯片的热量。
- 当天步数达到不同阶段值时，展示百合由发芽到绽放的阶段（或果树由树苗到开花结果的过程），即步数是养成计划中的能量。
应用示例
使用format、paras显示当前步数。
xxxxxxxxxx<Text x="100" y="1500" format="目前步数是: %d步" paras="#steps_value" size="50" color="#ff000000" visibility="ifelse(#steps_value,1,0)"/>
适配功能
传感器-SensorBinder
功能概述
支持获取四种类型的传感器数据，即加速传感器（accelerometer）、重力传感器（gravity）、线性加速传感器（linearAccelerometer）和陀螺仪（gyroscope）。其中，加速传感器获取的值是线性加速度传感器与重力传感器相加得到的结果，即：加速度(accelerometer) = 线性加速度（linearAccelerometer）+ 重力加速度（gravity）。基于传感器功能，可实现重力感应和摇一摇等效果。
注意：manifest.xml文件中只能有一个VariableBinders和SensorBinder。需要根据应用场景来选择合适的传感器类型，例如：实现重力感应效果时推荐使用accelerometer。
应用场景
- 可用于荡秋千，摆钟摆动。
- 可用于游戏场景，比如足球入门。
- 摇晃手机时，可用于叶子掉落，花瓣落下等。
XML规范
xxxxxxxxxx<VariableBinders> <SensorBinder type="" vibrate="" shakeTime="" delay=""> <Variable name="" index=""/> <Variable name="" index=""/> <Variable name="" index=""/> </SensorBinder></VariableBinders>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| type | 字符串 | 必填 | 支持：accelerometer,gravity,linearAccelerometer,gyroscope四种类型 |
| vibrate | 数值 | 选填 | 摇一摇是否触发震动，取值0/1。0表示不触发震动，1表示触发震动。默认为0，支持表达式 |
| shakeTime | 数值 | 选填 | 摇一摇触发震动的震动时长，单位为ms，默认为0，支持表达式 |
| delay | 数值 | 选填 | 摇一摇触发震动的延时时间，单位为ms，默认为0，支持表达式 |
| index | 数值 | 必填 | 用于标识传感器某个特定方向，取值为0,1,2；具体含义参考下文表格中的解释说明 |
| name | 字符串 | 必填 | 变量名，用于记录传感器在对应index方向上的值，在使用时可通过#name获取该变量的值 |
不同类型传感器index解释说明：
| 传感器类型 | index取值 | 注释 |
|---|---|---|
| accelerometer | 0，1，2 | index=0、1、2分别表示x、y、z方向的加速度 |
| gravity | 0，1，2 | index=0、1、2分别表示x、y、z方向的重力加速度 |
| linearAccelerometer | 0，1，2 | index=0、1、2分别表示x、y、z方向的线性加速度 |
| gyroscope | 0，1，2 | index=0、1、2分别表示x、y、z方向的角速度 |
应用示例
示例一：用获取的重力传感器值来控制DropPhysicalView中雪花飘落的方向和速度。由于重力传感器x轴正方向为水平向左，与手机屏幕x轴正方向相反，所以x_gra的值需要设置负号，使其与手机偏移方向一致。当手机偏移的时候，雪花下落会朝向重力传感器的方向。
xxxxxxxxxx<VariableBinders> <SensorBinder type="gravity"> <Variable name="x_gra" index="0"/> <Variable name="y_gra" index="1"/> <Variable name="z_gra" index="2"/> </SensorBinder></VariableBinders><DropPhysicalView gravityX="-#x_gra" gravityY="#y_gra" airDensity="50"> <ItemGroup x="0" y="0" width="#screen_width" height="#screen_height"> <Item count="40" src="xuehua.png"> <Velocity isRandom="true" velocityX="0" velocityY="5"/> <Position isRandom="true"/> <AngleVelocity isRandom="true" angleVelocity="10"/> <weight isRandom="true" value="0.5"/> </Item> <ItemGroup/></DropPhysicalView>示例二：基于加速传感器实现重力感应，type设置为accelerometer加速传感器类型。在SensorBinder中获取各个方向的加速度值后，在Image中使用x_acc和y_acc来控制图片的x和y坐标，进而达到重力感应效果。注意：可以调节x_acc和y_acc的符号以及相乘系数来控制图片移动方向和移动幅度大小。
xxxxxxxxxx<VariableBinders> <SensorBinder type="accelerometer"> <Variable name="x_acc" index="0"/> <Variable name="y_acc" index="1"/> <Variable name="z_acc" index="2"/> </SensorBinder></VariableBinders><Image x="610+#x_acc*12" y="390-#y_acc*12" centerX="139" centerY="151" src="ty.png"/>
摇一摇-Shake
功能概述
当声明了传感器VariableBinders后，会生成一个系统全局变量shake，当摇一摇手机的时候，这个变量的值就会加一，可以通过使用这个变量制作想要的效果，摇一摇数值变化的间隔为1000ms。
应用场景
- 可用于摇晃手机时，制作天空中的星星下落等创意效果。
- 通过摇一摇手机，控制锁屏图片的显示，可制作多壁纸切换。
XML规范
xxxxxxxxxx<Text text="#shake"/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| shake | 数值 | 必填 | 全局变量，直接使用#shake引用数字， 每当摇一摇幅度超过阈值则全局变量shake的增值加一 |
应用示例
示例一：每当摇一摇超过阈值则shake值加1，srcid的值在0,1,2中轮换，实现3张图片通过摇一摇轮播的效果。
xxxxxxxxxx<Image x="529.5" y="1410" src="djs.png" srcid="#shake%3" align="center" alignV="center"/>示例二：摇一摇触发手机震动，同时通过#shake变量控制动画的可见性。
xxxxxxxxxx<VariableBinders> <SensorBinder type="accelerometer" vibrate="1" shakeTime="400" delay="0"> <Variable name="x_acc" index="0"/> </SensorBinder></VariableBinders><Image name="animation" x="540" y="0" w="1080" h="2400" align="center" visibility="0"> <SourcesAnimation repeat="1"> <Source src="dawa_alpha.png" time="0"/> <Source src="dawa_alpha.png" time="10"/> <Source src="dawa_1.png" time="80"/> <Source src="dawa_2.png" time="160"/> <Source src="dawa_3.png" time="240"/> <Source src="dawa_4.png" time="320"/> <Source src="dawa_5.png" time="400"/> <Source src="dawa_6.png" time="480"/> <Source src="dawa_7.png" time="560"/> <Source src="dawa_8.png" time="640"/> <Source src="dawa_9.png" time="720"/> <Source src="dawa_10.png" time="800"/> <Source src="dawa_11.png" time="880"/> <Source src="dawa_12.png" time="960"/> <Source src="dawa_13.png" time="1040"/> <Source src="dawa_14.png" time="1120"/> <Source src="dawa_15.png" time="1200"/> <Source src="dawa_16.png" time="1280"/> <Source src="dawa_17.png" time="1360"/> <Source src="dawa_18.png" time="1440"/> <Source src="dawa_19.png" time="1520"/> <Source src="dawa_20.png" time="1600"/> <Source src="dawa_21.png" time="1680"/> <Source src="dawa_22.png" time="1760"/> <Source src="dawa_23.png" time="1840"/> <Source src="dawa_24.png" time="1920"/> <Source src="dawa_alpha.png" time="1923"/> </SourcesAnimation></Image><Var name="shake_record" expression="#shake" threshold="1"> <Trigger> <Command target="animation.visibility" value="true"/> <Command target="animation.visibility" value="false" delay="1920"/> </Trigger></Var>
充电状态-BatteryCharging
功能概述
充电状态功能可以获取当前手机电量状态，并根据文本Text中的category属性来决定是否展示该文本。category中可包括"Normal", "Charging", "BatteryLow", "BatteryFull"四种状态，分别表示电量正常，正在充电，电量不足和电量充满。如果Text中category属性中的电量状态与当前手机状态匹配，则显示该条文本信息；匹配不上，则不显示。
应用场景
- 用于基础充电动效，例如获取充电中状态，制作能量球从充电口向上位移的效果。
XML规范
充电状态典型用法是在Text标签中设置category属性。
xxxxxxxxxx<Text category="" text=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| category | 字符串 | 必填 | 设置电量状态，当手机电量状态与category中设置的值匹配时， 则显示该条文本信息。支持四种状态：BatteryFull（电量充满）、 Charging（正在充电）、BatteryLow（电量不足）、Normal（电量正常）。具体解释，参考下文 |
| text | 字符串 | 选填 | 当手机电量状态与category中设置的值匹配时，则显示该text内容。 注意：除了text属性，还支持Text标签中其他属性，例如：format、paras等。 此处，省略其他属性描述，请参考Text标签 |
注意：四种电量状态解释说明
- 如果电量为100%，则为BatteryFull；
- 如果处于充电状态，且电量<100%，则为Charging；
- 如果不处于充电状态，且电量<15%，则为BatteryLow；
- 如果不处于充电状态，且电量>=15%，则为Normal。
应用示例
示例一：通常情况下，在xml脚本中需要写多条Text语句，分别对应手机电量在不同状态下的情况。某一时刻，只有category属性与当前手机电量状态匹配的Text文本信息才被显示出来，其他文本信息则不显示。
xxxxxxxxxx<!-- 当手机电量不足时，显示该条文本信息 --><Text x="#screen_width/2" y="508" category="BatteryLow" alignV="bottom" color="#ff0000" size="50" text="电量不足，请充电！" alpha="100" align="center"/><!-- 当手机充电时，显示该条文本信息 --><Text x="#screen_width/2" y="708" category="Charging" alignV="bottom" color="#00ff00" align="center" size="50" format="充电中，当前电量为%d%%" alpha="180" paras="#battery_level"/><!-- 当手机电量充满时，显示该条文本信息 --><Text x="#screen_width/2" y="908" category="BatteryFull" alignV="bottom" color="#00ff00" size="50" text="充电完成，可以继续玩手机啦！" alpha="25" align="center"/>
震动设置-Vibrate
功能概述
通过-Vibrate参数，控制slider，unlocker和externCommand三种组件在达到一定条件时是否触发震动。使用时有一些限制：
- -Vibrate作为Lockscreen的一个参数使用，通过为其赋值为true/false，控制震动的开关。
- 目前项目中只有此三种组件，支持在达到一定条件时候时触发震动：slider，unlocker和externCommand。
- 只能打开或关闭震动，打开后震动效果单一，震动时间固定为50ms。不能切换震动的类型、不能自定义设置震动的时长、强弱和间隔时间。
- 无机型限制。
应用场景
- 滑动解锁，伴随震动的触感。
- 执行解锁命令，伴随震动的触感。
XML规范
xxxxxxxxxx<Lockscreen vibrate="" ></Lockscreen>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| vibrate | 字符串 | 选填 | 震动的开关，只支持true/false字段，不设置的情况下，默认是false |
支持组件
| 组件名 | 触发时机 |
|---|---|
| Slider | 1. 当Slider的StartPoint区域被触摸到的时候，StartPoint和EndPoint区域状态都被设置为Pressed_state，并且有50ms的震动 2. 当Slider的触摸进入一个EndPoint区域的时候，产生50ms的震动 3. 当触摸区域在StartPoint区域，而抬手操作在EndPoint区域之外时，产生50ms的震动 |
| Unlocker | 与Slider相同 |
| ExternCommand | 当ExternCommand的command等于unlock时，触发ExternCommand时产生50ms的震动 |
应用示例
示例：开启项目的震动开关，在以上支持组件中达到相应的条件会产生震动的效果。
xxxxxxxxxx<Lockscreen version="1" frameRate="30" screenWidth="1080" vibrate="true" ></Lockscreen>
恒定帧率-FrameRate
功能概述
指定引擎的帧率为固定值，在效果与功耗之间寻求平衡。
XML规范
xxxxxxxxxx<Lockscreen frameRate="" vibrate="" screenWidth="" pressure=""></Lockscreen>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| frameRate | 数值 | 选填 | 屏幕刷新的帧率，数值越大，效果越好，功耗相对较高。默认60，推荐使用30 |
应用示例
示例：演示屏幕刷新的帧率为固定值30时的示例。
xxxxxxxxxx<Lockscreen version="1" frameRate="30" vibrate="false" screenWidth="1080" id=""></Lockscreen>
可变帧率-VariableFramerate
功能概述
根据时间线指定不同帧率，可以指定在规定的时间内使用某一种帧率，实现不同帧率切换。目前只支持改变一次帧率。
应用场景
- 可用于雪花飘落时制作类似慢镜头的效果。可用于设置动画从低帧率到高帧率的变化过程。
XML规范
xxxxxxxxxx<VariableFramerate> <VariablePoint frameRate="" time=""/> <VariablePoint frameRate="" time=""/></VariableFramerate>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| frameRate | 数值 | 必填 | 屏幕刷新的帧率，数值越大，效果越好，功耗相对较高。默认60，推荐使用30 |
| time | 数值 | 必填 | 循环时间，单位为ms毫秒 |
应用示例
示例：演示屏幕刷新帧率在5和30之间的动态切换的示例。设置了切换时间，先显示帧率为5的效果，然后10秒后切换到帧率30展示动效。
xxxxxxxxxx<VariableFramerate> <VariablePoint frameRate="5" time="0"/> <VariablePoint frameRate="30" time="10000"/></VariableFramerate><Wallpaper/><Text align="center" text="位置移动" size="48" color="#000000" y="700" x="240"/><Image y="390" x="610" src="ty.png" centerY="151" centerX="136"> <PositionAnimation> <Position time="0" y="0" x="0"/> <Position time="1000" y="0" x="-150"/> <Position time="2000" y="150" x="-150"/> <Position time="3000" y="150" x="0"/> <Position time="4000" y="0" x="0"/> </PositionAnimation></Image><Unlocker bounceAcceleration="3000" bounceInitSpeed="2000" name="unlocker"> <StartPoint y="#screen_height-300" x="300" h="300" w="470"> </StartPoint> <EndPoint y="#screen_height-650" x="300" h="300" w="50"> <Path y="#screen_height-300" x="300" h="300" w="470"> <Position y="0" x="0"/> <Position y="-200" x="0"/> </Path> </EndPoint></Unlocker>
多屏幕展示-MultiScreens
功能概述
支持三屏幕内容切换，三屏划动切换控制动画。屏幕绘制可以通过Rectangle矩形图形和Image图片标签来实现。
应用场景
- 用于滑动屏幕切换多壁纸锁屏。
- 可用于游戏前面的介绍内容，每一屏展示一个说明步骤。
- 可实现漫画壁纸，每个屏幕一个页面。
XML规范
xxxxxxxxxx<Group x=""> <!-- 第1屏--> <Group x=""> <Rectangle x="" y="" w="" h="" fillColor="" /> <!--<Image y="" alignV="" src="" />--> </Group> <!-- 第2屏--> <Group x=""> <Rectangle x="" y="" w="" h="" fillColor="" /> <!--<Image y="" alignV="" src="" />--> </Group> <!-- 第3屏--> <Group x=""> <Rectangle x="" y="" w="" h="" fillColor="" /> <!--<Image y="" alignV="" src="" />--> </Group></Group>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| Group | 表达式 | 必填 | 元素组集合，当中的x属性为屏幕开始的x坐标位置 |
| Rectangle | 表达式 | 选填 | 矩形类型，可以用来绘制屏幕内容，相关的参数说明可以参照1.14几何图形 |
| Image | 表达式 | 选填 | 图片类型，可以用来绘制屏幕内容，相关的参数说明可以参照1.2图片 |
应用示例
示例一：演示用Rectangle矩形类型来绘制屏幕，fillColor填充颜色来区别三个不同的屏幕，dottedLine和cornerRadius可以指定虚线模式和矩形的圆角半径，具体的可以参照1.14几何图形的参数说明。通过左右滑动可以实现三屏幕的切换的效果。
xxxxxxxxxx<!-- 三屏划动切换控制动画 --><Var name="move_go"> <VariableAnimation initPause="true" loop="false"> <AniFrame value="#move1" time="0" varSpeedFlag="QuartFun_Out" /> <AniFrame value="#move2" time="200" /> </VariableAnimation></Var><Var name="base" expression="0"/><Var name="move" expression="#touch_x-#touch_begin_x"/><Var name="temp" expression="#base+#move"/><Var name="maxvalue" expression="500*#screen_width/1080"/><Var name="value" expression="ifelse(lt(#temp,-#maxvalue),-#maxvalue,gt(#temp,#maxvalue),#maxvalue,#temp)"/><Var name="scalevalue" expression="#value/#maxvalue"/><ExternalCommands> <Trigger action="resume"> <Command target="a.visibility" value="true"/> </Trigger> <Trigger action="pause"> <Command target="a.visibility" value="false"/> </Trigger></ExternalCommands><!-- 此按钮用来判断是向左还是向右滑动 --><Button x="0" y="120" w="1080" h="#screen_height"> <Trigger action="down"> <VariableCommand name="move1" expression="#move2+#touch_x-#touch_begin_x" /> <VariableCommand name="move2" expression="max(min(#move2+#zf_end*1080,1080),-1080)" /> <Command target="move_go.animation" value="play" /> </Trigger> <Trigger action="up"> <VariableCommand name="base" expression="#value"/> <VariableCommand name="move" expression="0"/> </Trigger></Button><Group name="a" x="#scalevalue*ifelse(lt(#scalevalue,0),1080,1080)" > <!-- 第1屏--> <Group x="-1080" > <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#b6937c" dottedLine="20,10,10,20" cornerRadius="55,55"/> </Group> <!-- 第2屏--> <Group x="0" > <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#ae6b5a" dottedLine="20,10,10,20" cornerRadius="55,55"/> </Group> <!-- 第3屏--> <Group x="1080" > <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#59493f" dottedLine="20,10,10,20" cornerRadius="55,55"/> </Group></Group>示例二：演示用三个不同的Image来做屏幕，通过左右滑动实现三屏幕切换的效果。
xxxxxxxxxx<!-- 三屏划动切换控制动画 --><Var name="move_go"> <VariableAnimation initPause="true" loop="false"> <AniFrame value="#move1" time="0" varSpeedFlag="QuartFun_Out" /> <AniFrame value="#move2" time="200" /> </VariableAnimation></Var><Var name="base" expression="0"/><Var name="move" expression="#touch_x-#touch_begin_x"/><Var name="temp" expression="#base+#move"/><Var name="maxvalue" expression="500*#screen_width/1080"/><Var name="value" expression="ifelse(lt(#temp,-#maxvalue),-#maxvalue,gt(#temp,#maxvalue),#maxvalue,#temp)"/><Var name="scalevalue" expression="#value/#maxvalue"/><ExternalCommands> <Trigger action="resume"> <Command target="a.visibility" value="true"/> </Trigger> <Trigger action="pause"> <Command target="a.visibility" value="false"/> </Trigger></ExternalCommands><!-- 此按钮用来判断是向左还是向右滑动 --><Button x="0" y="120" w="1080" h="#screen_height"> <Trigger action="down"> <VariableCommand name="move1" expression="#move2+#touch_x-#touch_begin_x" /> <VariableCommand name="move2" expression="max(min(#move2+#zf_end*1080,1080),-1080)" /> <Command target="move_go.animation" value="play" /> </Trigger> <Trigger action="up"> <VariableCommand name="base" expression="#value"/> <VariableCommand name="move" expression="0"/> </Trigger></Button><Group name="a" x="#scalevalue*ifelse(lt(#scalevalue,0),1080,1080)" > <!-- 第1屏--> <Group x="-1080"> <Image y="#screen_height" alignV="bottom" src="screen1.png" /> </Group> <!-- 第2屏--> <Group x="0"> <Image y="#screen_height" alignV="bottom" src="screen2.jpg"/> </Group> <!-- 第3屏--> <Group x="1080"> <Image y="#screen_height" alignV="bottom" src="screen3.jpg"/> </Group></Group>
2D基础动效
主要涉及透明度动画、位移动画、旋转动画、缩放动画、帧动画、变量动画、时间动画，除时间动画外，
其他动画默认循环播放。支持设置动画循环次数，循环结束，动画会回到开始位置。
透明度动画-AlphaAnimation
动效概述
针对某个元素或组-Group，实现透明度变化效果。
XML规范
xxxxxxxxxx<Image x="" y="" centerX="" centerY="" src=""> <AlphaAnimation delay="" repeat=""> <Alpha a="" time="" /> </AlphaAnimation> </Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，循环次数结束后透明度为动画起始帧透明度值或者0 |
| a | 数值 | 必填 | [0-255]，透明度0-255,小于等于0不显示，正数值。 |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），不小于0。 |
示例
xxxxxxxxxx <Lockscreen version="1" screenWidth="1080" frameRate="30" vibrate="false" displayDesktop="true"><!--背景图片--><Image src="bg.jpg" /><!--灯光图片--><Image x="0" y="0" src="guang.png"> <!--“a"调整透明度数值,"time"调整间隔时间--> <AlphaAnimation repeat="0"> <Alpha a="0" time="0"/> <Alpha a="65" time="1000"/> <!--从0~1000ms透明度由0变为65--> <Alpha a="200" time="2000"/> <!--从1000ms~2000ms透明度由65变为200--> <Alpha a="65" time="3000"/> <Alpha a="0" time="4000"/> </AlphaAnimation></Image></Lockscreen>
位移动画-PositionAnimation
动效概述
针对某个元素或组-Group，可以实现位移动画效果。
XML规范
xxxxxxxxxx<Image x="" y="" centerX="" centerY="" src=""> <PositionAnimation delay="" repeat=""> <Position x="" y="" time=""/> </PositionAnimation> </Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，循环次数结束后位移为动画起始帧值或者0 |
| x | 数值 | 必填 | 相对于图片初始位置的x坐标，整数。 |
| y | 数值 | 必填 | 相对于图片初始位置的y坐标，整数。 |
| time | 数值数值 | 必填必填 | [0-~]，相对于起始帧的间隔时间（毫秒），不小于0。 |
示例
xxxxxxxxxx <Lockscreen version="1" screenWidth="1080" frameRate="30" vibrate="false" displayDesktop="true"><!--背景图片--><Image src="bg.png" /><!--云朵1的位移--><Image src="1.png"> <PositionAnimation repeat="0"> <Position x="-1080" y="0" time="0"/> <Position x="-900" y="0" time="1000"/> <!--从0~1000ms坐标由（-1080，0)变为(-900，0)--> <Position x="-600" y="0" time="2000"/> <!--从1000~2000ms坐标由（-900，0)变为(-600，0)--> <Position x="-300" y="0" time="3000"/> <Position x="0" y="0" time="4000"/> <Position x="300" y="0" time="5000"/> <Position x="600" y="0" time="6000"/> <Position x="900" y="0" time="7000"/> <Position x="1200" y="0" time="8000"/> </PositionAnimation></Image><!--云朵2的位移--><Image src="2.png"> <PositionAnimation repeat="0"> <Position x="-1080" y="0" time="0"/> <Position x="-800" y="0" time="1000"/> <Position x="-600" y="0" time="2000"/> <Position x="-400" y="0" time="3000"/> <Position x="-200" y="0" time="4000"/> <Position x="0" y="0" time="5000"/> <Position x="200" y="0" time="6000"/> <Position x="400" y="0" time="7000"/> <Position x="600" y="0" time="8000"/> <Position x="800" y="0" time="9000"/> <Position x="1000" y="0" time="10000"/> <Position x="1200" y="0" time="12000"/> </PositionAnimation></Image></Lockscreen>
透明度、位移动画效果展示
旋转动画-RotationAnimation
动效概述
针对某个元素或组-Group，可以实现旋转动画效果。
XML规范
xxxxxxxxxx<Image x="" y="" centerX="" centerY="" src=""> <RotationAnimation delay="" repeat=""> <Rotation angle="" time=""/> </RotationAnimation> </Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，循环次数结束后旋转角度为动画起始帧值或者0 |
| angle | 数值 | 必填 | 旋转角度。 |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），不小于0。 |
示例
xxxxxxxxxx <Lockscreen version="1" screenWidth="1080" frameRate="30" vibrate="false" displayDesktop="true"><!--背景图片--><Image src="bg.png" /><!--设置摩天轮的位置，设置摩天轮的宣传中心点，摩天轮图片的命名--><Image x="172" y="688" centerX="540" centerY="544" src="motianlun.png" > <RotationAnimation repeat="0"> <Rotation angle="0" time="0"/> <Rotation angle="80" time="3000"/> <!--从0到3000ms时，图片顺时针旋转角度由0增至80。--> <Rotation angle="160" time="6000"/> <Rotation angle="240" time="9000"/> <Rotation angle="360" time="12000"/> </RotationAnimation> </Image></Lockscreen>效果展示
缩放动画-SizeAnimation
动效概述
针对某个元素或组-Group，实现缩放动画效果。
XML规范
xxxxxxxxxx<Image x="" y="" centerX="" centerY="" src=""> <SizeAnimation delay="" repeat=""> <Size w="" h="" time=""/> </SizeAnimation> </Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，循环次数结束后缩放比例为动画起始帧值或者0 |
| w | 数值 | 必填 | 图片的大小宽，正整数。 |
| h | 数值 | 必填 | 图片的大小高，正整数。 |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），不小于0。 |
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" vibrate="false" displayDesktop="true" screenWidth="1080" id="" ><Group y="(#screen_height-2640)/1.3"> <Image src="bj.jpg"/><!-- 缩放 --><Image x="500" y="1748" align="center" alignV="center" src="ren.png"> <SizeAnimation> <Size w="467" h="650" time="0"/> <Size w="0" h="0" time="1000"/> <Size w="467" h="650" time="2000"/> </SizeAnimation> </Image></Group><!-- 任意上滑解锁 --><Unlocker name="unlocker" bounceInitSpeed="2000" bounceAcceleration="3000" > <StartPoint x="0" y="0" w="#screen_width" h="#screen_height"> </StartPoint> <EndPoint x="0" y="-350" w="#screen_width" h="200"> <Path x="0" y="0" w="#screen_width" h="#screen_height"> <Position x="0" y="0"/> <Position x="0" y="-200"/> </Path> </EndPoint> </Unlocker><Text x="50" y="200" align="left" alignV="top" color="#ffffff" size="60" text="缩放动画" /></Lockscreen>
帧动画-SourcesAnimation
动效概述
只有图片支持帧动画，图片帧动画稍有不同，无插值。可以设置图片播放之间的间隔时间。
XML规范
xxxxxxxxxx<Image x="" y="" src=""> <SourcesAnimation delay="" repeat=""> <Source src="" time=""/> <Source src="" time=""/> <Source src="" time=""/> </SourcesAnimation></Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，循环次数结束后停留在起始帧位置 |
| src | 字符串 | 必填 | 每一帧图片的文件名，该src值不可为空。 |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），也是动画持续时间，帧图片人肉眼能识别时间延时为300ms左右，不小于0。 |
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" vibrate="false" displayDesktop="true" screenWidth="1080" id="" ><Group y="(#screen_height-2640)/1.3"> <Image src="bj.jpg"/> <!-- 跑帧 --> <Image x="529" y="1300" align="center" alignV="center"> <SourcesAnimation> <Source src="time_0.png" time="0"/> <Source src="time_1.png" time="500"/> <Source src="time_2.png" time="1000"/> <Source src="time_3.png" time="1500"/> <Source src="time_4.png" time="2000"/> <Source src="time_5.png" time="2500"/> <Source src="time_6.png" time="3000"/> <Source src="time_7.png" time="3500"/> <Source src="time_8.png" time="3700"/> <Source src="time_9.png" time="4000"/> </SourcesAnimation> </Image></Group><!-- 任意上滑解锁 --><Unlocker name="unlocker" bounceInitSpeed="2000" bounceAcceleration="3000" > <StartPoint x="0" y="0" w="#screen_width" h="#screen_height"> </StartPoint> <EndPoint x="0" y="-350" w="#screen_width" h="200"> <Path x="0" y="0" w="#screen_width" h="#screen_height"> <Position x="0" y="0"/> <Position x="0" y="-200"/> </Path> </EndPoint> </Unlocker><Text x="50" y="200" align="left" alignV="top" color="#ffffff" size="60" text="帧动画" /></Lockscreen>
变量动画-VariableAnimation
动效概述
只针对变量-Var，让一个变量在规定时间内变化。
XML规范
xxxxxxxxxx<Var name=""> <VariableAnimation delay="" repeat=""> <AniFrame value="" time=""/> <AniFrame value="" time=""/> </VariableAnimation> </Var>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| delay | 数值 | 选填 | 延迟，以ms毫秒记。延迟delay毫秒后执行动画播放。 |
| repeat | 数值 | 选填 | 动画重复播放次数，N表示重复N次，0表示无限次循环。 N大于0时，动画结束后变量值为起始帧值或0 |
| value | 数值 | 必填 | 这一刻时间变量的数值。 |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），不小于0。 |
效果和代码展示
xxxxxxxxxx<!--变量bany_2在0时刻值为-200，到8000毫秒的时候，变量值匀速增加到2000--><Var name="bany_2"> <VariableAnimation> <AniFrame value="-200" time="0"/> <AniFrame value="2000" time="8000"/> </VariableAnimation> </Var><!--可以把变量bany_2绑定到图片和按钮中，这样图片和按钮能按照变量实现动画，并实现交互动作--><Image name="yu2" x="1173.5-#bany_2" y="1171.5-#bany_2*0.5" src="yu2.png" visibility="eq(#yu2,0)"></Image><Button x="1173.5-#bany_2" y="1171.5-#bany_2*0.5" w="200" h="200" visibility="eq(#yu2,0)"> <Trigger action="down"> <VariableCommand name="yu2" expression="1" persist="true"/> <VariableCommand name="jf" expression="#jf+1" condition="le(#jf,5)" persist="true"/> </Trigger> </Button>
时间动画-TimeAnimation
动效概述
时间元素刷新，当有用到time全局变量，会启动变量的刷新，time的值会按帧率进行刷新。
XML规范
xxxxxxxxxx<Text x="" y="" align="" color="" size="" format="time：%d" paras="#time"/>或
xxxxxxxxxx<Text x="" y="" size="" color="" text="#time"/>| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| time | 数值 | 必填 | 值范围[0-3600000），当前系统时间毫秒数对1小时的毫秒数3600000取模。 按帧率进行刷新，默认大概30ms(毫秒)刷新一次,可用于时钟秒针动画等 |
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" screenWidth="1080" frameRate="30" vibrate="false" displayDesktop="true"><!--设置秒钟动每秒动6度--><Var name="t1" expression="#time/1000*6"/><Var name="m_angle" expression="#minute*6" threshold="6"/><!--背景图片--><Image x="0" y="0" src="bg.png"/><!--分针--><Image x="529" y="545" centerX="15" centerY="198" src="fen.png" angle="#m_angle"/><!--秒针--><Image x="532" y="525" centerX="11" centerY="224" src="miao.png" angle="#t1"/><!--时针--><Image x="503" y="611" centerX="41" centerY="150" src="shi.png" angle="#hour12*30+#minute/2"/></Lockscreen>
2D高级动效
旋涡解锁-RotateView
动效概述
将图片分成网格，手指触摸屏幕时图片呈向心收缩的动画（如水池排水时的旋涡效果），且旋涡中心随手指移动移动。当图片收缩距离小于一定距离时触发解锁或设定的Trigger操作，触发Trigger需要收缩到一定距离时旋涡中心在Trigger范围内，如果不在指定的Trigger区域内则执行解锁操作。若在未达到解锁收缩范围时手指离开屏幕则图片恢复原样。适用范围为全屏，不支持width、height、alpha等通用属性。
场景举例
- 在屏幕把某个元素缩小到一定范围可以解锁。
- 可用于图片收到到某个范围内可以打开设置的应用。
- 可以将旋涡动画和解锁分开，旋涡动画可以作为游戏下个场景的传送门，旋涡动画可以作为银河战舰穿梭的传送，无尽黑洞的探索。
XML规范
xxxxxxxxxx<!--触发解锁的旋涡动效--><RotateView meshx="" meshy="" speedOfDistance="" speedOfAngel="" delayTime="" src="" useVirtualScreen=""/><!--触发Trigger命令的旋涡动效--><RotateView meshx="" meshy="" speedOfDistance="" speedOfAngel="" delayTime="" src="" useVirtualScreen=""> <Trigger x="" y="" width="" height=""> <IntentCommand action=""/> <ExternCommand command=""/> </Trigger> </RotateView>| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| meshx | 数值 | 选填 | x方向网格数量，范围为[2,屏幕宽度的二分之一]的整数，默认为100。建议不要设置过大，会消耗很多计算资源 |
| meshy | 数值 | 选填 | y方向网格数量，范围为[2,屏幕高度的二分之一]的整数，默认为100。建议不要设置过大，会消耗很多计算资源 |
| speedofDistance | 数值 | 选填 | 旋涡向心收缩的最大速度，范围为[1,100]的实数，默认为20 |
| speedofAngel | 数值 | 选填 | 旋涡旋转的最大速度，范围为[1,100]的实数，默认为20 |
| delayTime | 数值 | 选填 | 旋涡向心收缩和旋转速度达到最大速度的延迟时间，范围为[0,30000]的实数，默认为100 |
| src | 字符串 | 必填 | 图片资源名称，支持变量，如@abc |
| useVirtualScreen | 字符串 | 选填 | 是否使用虚拟屏幕，若为true则src为虚拟屏幕名称，默认false |
| 参 数-Trigger | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 矩形区域左上角x值，默认为0，支持表达式 |
| y | 数值 | 选填 | 矩形区域左上角y值，默认为0，支持表达式 |
| w | 数值 | 选填 | 矩形宽度值，默认为0，支持表达式 |
| h | 数值 | 选填 | 矩形高度值，默认为0，支持表达式 |
| 子标签能够层叠Trigger以在不同的旋涡结束区域触发不同的命令， 在没有设置区域Trigger时为解锁命令其中 x、y、w、h分别表示区域的位置和宽高，以屏幕左上角为原点。 |
说明
- 延迟时间是到最大速度的时间，未到最大速度之前是以线性增大到最大速度。
- 长按屏幕任意位置开始以该处为中心收缩，在未解锁之前抬手恢复到原始图片。
效果和代码展示
旋涡解锁示例
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080"> <Image align="left" alignV="top" h="2600" pivotX="1300" pivotY="1300" src="1.jpg" w="2600" x="-728" y="-344" > <RotationAnimation delay="0" repeat="0" > <Rotation angle="0" time="0" /> <Rotation angle="-360" time="100000" /> </RotationAnimation> </Image> <Image h="#screen_height" src="2.png" w="#screen_width"/> <!--为了标识哪里是非解锁区域，最终需要删除--> <!--上，非解锁区域--> <Rectangle x="0" y="0" w="#screen_width" h="700" strokeColor="#ffffff" fillColor="#00000000" weight="5"/> <!--左，非解锁区域--> <Rectangle x="0" y="700" w="330" h="#screen_height-1730" strokeColor="#ffffff" fillColor="#00000000" weight="5"/> <!--右，非解锁区域--> <Rectangle x="#screen_width-350" y="700" w="350" h="#screen_height-1730" strokeColor="#ffffff" fillColor="#00000000" weight="5"/> <!--下，非解锁区域--> <Rectangle x="0" y="#screen_height-1030" w="#screen_width" h="1030" strokeColor="#ffffff" fillColor="#00000000" weight="5"/> <Var name="vs" expression="1"/> <!--虚拟屏幕vs中为锁屏界面显示的背景图片和时间图片；在旋涡解锁动效中对虚拟屏幕中所有元素进行向心收缩动效，同时在Trigger中设置解锁命令--> <RotateView meshx="80" meshy="80" speedOfDistance="25" speedOfAngel="25" delayTime="1500" src="dt_0.png" visibility="#vs"> <!--上，非解锁区域--> <Trigger x="0" y="0" width="#screen_width" height="700"> <VariableCommand name="vs" expression="0"/> </Trigger> <!--左，非解锁区域--> <Trigger x="0" y="700" width="330" height="#screen_height-1730"> <VariableCommand name="vs" expression="0"/> </Trigger> <!--右，非解锁区域--> <Trigger x="#screen_width-350" y="700" width="350" height="#screen_height-1730"> <VariableCommand name="vs" expression="0"/> </Trigger> <!--下，非解锁区域--> <Trigger x="0" y="#screen_height-1030" width="#screen_width" height="1030"> <VariableCommand name="vs" expression="0"/> </Trigger> </RotateView> <Button x="0" y="0" w="#screen_width" h="#screen_height"> <Trigger action="down"> <VariableCommand name="vs" expression="1"/> </Trigger> </Button> <!--旋涡在非解锁区域收缩到最小消失后，用这张图片代替旋涡图片显示，实现非解锁区域旋涡后恢复。其可见性与旋涡相反--> <Image src="dt_0.png" visibility="1-#vs"/></Lockscreen>
网格化-MeshImage
通过控制图片像素点运动实现图片变形、抖动、拉伸等效果，网格划分示意图
网格化-位移-MeshImage-Translation
动效概述
可实现局部区域抖动效果，如果需要响应加速度传感器，需要设置sensor="true"，否则不会响应。局部区域根据参数center_point、no_move_distance_x和no_move_distance_y计算。例如：图片w=1080，h=1920，meshx=6，meshy=6，则每个网格区域的宽为180，高为320，若center_point=25，no_move_distance_x=180，no_move_distance_y=320，则x轴方向上距离中心点25距离小于等于180，且y轴方向上距离中心点25距离小于等于320的所有网格顶点17、18、19、24、26、31、32、33组成的区域为可移动区域，当手指滑动图片时可移动区域与9,13,37,41组成的外圈有位移拉伸效果。
场景举例
- 滑动图片使其变形，例如用手点击猫脸，脸部变形变肿，点胡子，胡子变长后再弹回等，点击尾巴，尾巴会收缩。
- 射箭游戏，张弓搭箭，拉动弓箭弦，有变形弯曲效果。
- 小丑的鼻子拉伸，拍皮球或者拍肚子产生回弹效果。
XML规范
xxxxxxxxxx<MeshImage mesh="" center_point="" sensor="" src=""> <Translation duration="" repeat="" delay="" factor="" values="" max_distance_x="" max_distance_y="" no_move_distance_x="" no_move_distance_y=""/> </MeshImage>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| duration | 数值 | 选填 | 单次动画持续时间（毫秒），取值正整数，默认为2000，支持表达式。 |
| repeat | 数值 | 选填 | 动画重复次数，-1表示无限循环，0表示不重复，n表示重复n+1次，默认为0，支持表达式。 |
| delay | 数值 | 选填 | 动画延迟执行的毫秒数，即触发动画后需要delay毫秒才开始执行动画，取值正整数， 默认为0，支持表达式。 |
| factor | 数值 | 选填 | 动画回弹因子，取值0~1之间，值越大回弹幅度越小，默认为0.2，支持表达式。 |
| values | 字符串 | 必填 | 由多个0-1之间的实数构成的运动参数列表，实数个数最少2个，最多5个。 示例：“1.0,0,1.0”表示从当前位置运动到初始位置，然后又运动到当前位置， 实数值越大移动距离越大，但受限于max_distance_x和max_distance_y。 |
| max_distance_x | 数值 | 选填 | x轴最大运动距离，单位为像素，取值为(0，每个网格宽度)，默认为一个网格宽度，支持表达式。 |
| max_distance_y | 数值 | 选填 | y轴最大运动距离，单位为像素，取值为(0，每个网格高度)，默认为一个网格高度，支持表达式。 |
| no_move_distance_x | 数值 | 选填 | x轴方向不动的点，离中心点大于no_move_distance_x距离的点不动。设置的值需大于0， 如果为0值则被认为是图片宽度，默认为图片宽度，单位为像素，支持表达式。 |
| no_move_distance_y | 数值 | 选填 | y轴方向不动的点，离中心点大于no_move_distance_y距离的点不动。设置的值需大于0， 如果为0值则被认为是图片高度，默认为图片高度，单位为像素，支持表达式。 |
效果和代码展示
将宽339、高388的图片分成横20格、竖20格，共400个网格，每个网格宽16.95，高19.4。values设为1,0表示局部图片随手指或传感器产生位移抖动效果后恢复原位，位移大小与手指移动距离或手机加速度大小成正比，max_distance_x/y设为30，使得位移动画的x,y轴最大位移为30像素，动画过程持续2s。no_move_distance_x/y设置为121、138，根据每个网格的宽高可以算出中心点左右共14列和上下共14排相交的区域为局部移动区域，可以通过手指滑动该区域，滑动时该区域与包裹着该区域的网格顶点间有拉伸变形。
xxxxxxxxxx<MeshImage x="538" y="875" w="339" h="388" mesh="20,20" center_point="221" sensor="true" src="part.jpg"> <Translation duration="2000" repeat="0" delay="0" factor="0.15" values="1.0,0" max_distance_x="30" max_distance_y="30" no_move_distance_x="121" no_move_distance_y="138"/> </MeshImage>
网格化-旋转-MeshImage-Rotate
动效概述
可实现图片局部旋转动画，旋转区域与位移区域计算方法一致。
场景举例
- 宇宙黑洞，星球的旋转。
- 太阳日出日落，或者月亮升起。
- 摆钟式的旋转。
XML规范
xxxxxxxxxx<MeshImage mesh="" center_point="" src=""> <Rotate duration="" repeat="" delay="" values="" no_move_distance_x="" no_move_distance_y=""/> </MeshImage>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| duration | 数值 | 选填 | 单次动画持续时间（毫秒），取值正整数，默认为2000，支持表达式。 |
| repeat | 数值 | 选填 | 动画重复次数，-1表示无限循环，0表示不重复，n表示重复n+1次，默认为0， 支持表达式。 |
| delay | 数值 | 选填 | 动画延迟执行的毫秒数，即触发动画后需要delay毫秒才开始执行动画， 取值正整数，默认为0，支持表达式。 |
| values | 字符串 | 必填 | 由多个0-360之间的实数构成的旋转参数列表，实数个数最少2个，最多5个。 示例：”0,360,0“表示从当前位置顺时针旋转360度，然后再逆时针旋转到当前位置。 |
| no_move_distance_x | 数值 | 选填 | x轴方向不动的点，离中心点大于no_move_distance_x距离的点无旋转。 设置的值需大于0，如果为0值则被认为是图片宽度，默认为图片宽度，单位为像素，支持表达式。 |
| no_move_distance_y | 数值 | 选填 | y轴方向不动的点，离中心点大于no_move_distance_y距离的点无旋转。 设置的值需大于0，如果为0值则被认为是图片高度，默认为图片高度，单位为像素，支持表达式。 |
效果和代码展示
在该示例中，设置循环播放旋转动画，每次持续2.5s，点击图片后，局部区域开始由当前位置顺时针旋转360度，然后再逆时针旋转到180度后，再进一步旋转回到当前位置。
xxxxxxxxxx<MeshImage x="100" y="1000" w="200" h="200" mesh="20,20" center_point="221" src="snow_flower.png"> <Rotate duration="2500" repeat="-1" delay="0" values="0,360,180,0" no_move_distance_x="200" no_move_distance_y="200"/> </MeshImage>
网格化-缩放-MeshImage-Scale
动效概述
实现图片局部区域缩放动画，缩放区域计算方式与局部位移动画一致。
场景举例
- 人物眼睛放大。
- 腰部收缩，起到瘦腰效果。
- 可以做吃惊的表情，把头部放大。
- 抓海绵，压弹簧，可加上震动反馈。
XML规范
xxxxxxxxxx<MeshImage mesh="" center_point="" src=""> <Scale duration="" repeat="" delay="" values="" no_move_distance_x="" no_move_distance_y=""/> </MeshImage>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| duration | 数值 | 选填 | 单次动画持续时间（毫秒），取值正整数，默认为2000，支持表达式。 |
| repeat | 数值 | 选填 | 动画重复次数，-1表示无限循环，0表示不重复，n表示重复n+1次，默认为0，支持表达式。 |
| delay | 数值 | 选填 | 动画延迟执行的毫秒数，即触发动画后需要delay毫秒才开始执行动画，取值正整数，默认为0，支持表达式。 |
| values | 数值 | 必填 | 由多个0-1之间的实数构成的缩放参数列表，实数个数最少2个，最多5个。示例：”1,0,1“表示从最大缩小到0，然后再放大到最大。1表示原始大小，缩放数值是原始大小的倍数。 |
| no_move_distance_x | 数值 | 选填 | x轴方向不动的点，离中心点大于no_move_distance_x距离的点无缩放效果。设置的值需大于0，如果为0值则被认为是图片宽度，默认为图片宽度，单位为像素，支持表达式。 |
| no_move_distance_y | 数值 | 选填 | y轴方向不动的点，离中心点大于no_move_distance_y距离的点无缩放效果。设置的值需大于0，如果为0值则被认为是图片高度，默认为图片高度，单位为像素，支持表达式。 |
代码和效果展示
在该示例中，设置values为1,0,1，点击图片后，局部区域从当前大小缩小到0，再从0放大至原局部区域大小。动画时长为2s，只播放1次。
xxxxxxxxxx<MeshImage x="100" y="1400" w="318" h="200" mesh="20,20" center_point="221" src="love.png"> <Scale duration="2000" repeat="0" delay="0" values="1,0,1" no_move_distance_x="200" no_move_distance_y="200"/> </MeshImage>
网格化-透明度-MeshImage-Alpha
动效概述
实现整张图片透明度动画，不支持局部透明度变换。可以与旋转、位移以及缩放动画进行组合。
场景举例
可对大雾的图层进行设置透明度，可制作大雾散去的视觉。
点击河水，立马清澈，可看到鱼儿游玩。
可实现天空的星星闪烁。
XML规范
xxxxxxxxxx<MeshImage mesh="" center_point="" src=""> <Alpha duration="" repeat="" delay="" values=""/></MeshImage>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| duration | 数值 | 选填 | 单次动画持续时间（毫秒），取值正实数，默认为2000，支持表达式。 |
| repeat | 数值 | 选填 | 动画重复次数，-1表示无限循环，0表示不重复，n表示重复n+1次，默认为0，支持表达式。 |
| delay | 数值 | 选填 | 动画延迟执行的毫秒数，即触发动画后需要delay毫秒才开始执行动画，默认为0，支持表达式。 |
| values | 数值 | 必填 | 由多个0-1之间的实数构成的透明度参数列表，实数个数最少2个，最多5个。 示例：”1,0,1“表示从完全不透明到透明度为0，再变为完成不透明。 |
效果和代码展示
网格化-透明度示例一
透明度动画。点击图片后，图片从不透明变为透明，再渐变为半透明状态，时长为2s，只播放1次，再次点击可以继续播放。
xxxxxxxxxx<MeshImage x="100" y="1400" w="318" h="200" mesh="20,20" center_point="221" src="love.png"> <Alpha duration="2000" repeat="0" delay="0" values="1.0,0,0.5"/> </MeshImage>
网格化-透明度示例二
透明度和旋转动画。设置为循环播放，点击图片后，局部图片循环进行0°到360°的旋转动画，整张图片同时循环进行不透明到透明的透明度动画。
xxxxxxxxxx<MeshImage x="0" y="100" w="1080" h="1920" mesh="20,20" center_point="221" src="bg.jpg"> <Rotate duration="2500" repeat="-1" delay="0" values="0,360" no_move_distance_x="300" no_move_distance_y="300"/> <Alpha duration="2500" repeat="-1" delay="0" values="1.0,0"/> </MeshImage>
网格化-水波纹-MeshImage-SinMotion
动效概述
可实现局部水波荡漾、迎风飘舞等效果。
场景举例
- 海底的水草晃动。
- 衣服，裙子，头发的飘动。
- 彩旗飘飘。
- 柳枝随风飘动。
XML规范
xxxxxxxxxx<MeshImage x="" y="" w="" h="" mesh="" center_point="" src=""> <SinMotion a="" factor_k="" no_move_distance_x="" no_move_distance_y=""/> </MeshImage>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| a | 数值 | 选填 | 水波幅度(振幅)，取实数，单位为像素，默认为20，支持表达式。 |
| factor_k | 数值 | 选填 | 相位，k值可以产生水波移动，值越大运动越快，值越小运动越缓，默认0.2，支持表达式。 |
| no_move_distance_x | 数值 | 选填 | x轴方向不动的点，离中心点大于no_move_distance_x距离的点无水波荡漾。 设置的值需大于0，如果为0值则被认为是图片宽度，默认为图片宽度，单位为像素，支持表达式。 |
| no_move_distance_y | 数值 | 选填 | y轴方向不动的点，离中心点大于no_move_distance_y距离的点无水波荡漾。 设置的值需大于0，如果为0值则被认为是图片高度，默认为图片高度，单位为像素，支持表达式。 |
效果和代码示例
不用点击图片，局部区域循进行水波荡漾动画。
xxxxxxxxxx<MeshImage x="0" y="0" w="1080" h="1920" mesh="20,20" center_point="221" src="text_bar.png"> <SinMotion a="20" factor_k="0.1" no_move_distance_x="200" no_move_distance_y="200"/> </MeshImage>
跑马灯- Marquee
动效概述
跑马灯有：文字跑灯，文字的色彩循环渐变；文本路径跑马灯，文字的色彩循环渐变。同时文字可根据特定的路径进行排布，SVG跑马灯；SVG跑马灯，实现按照路径循环渐变跑马灯的功能，需要与路径解析功能联合使用，当路径为屏幕大小矩形时即实现屏幕跑马灯功能。
场景举例
- 实现图形用线条的方式展示，如爱心的形状。
- 实现字体用线条的方式展示，例如可以实现空心的“新年快乐”字体。
- 实现屏幕四周的跑马灯效果。
XML规范
xxxxxxxxxx<Marquee state="" showTime="" deltaAngle="" color="" marqueeColor="" marqueePos="" weight="" pathname="" scaleX="" scaleY="" translateX="" translateY="" rotate=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| state | 数值 | 选填 | 是否开启跑马灯，当值等于1时可见，其余值为不可见状态，默认为1，支持数字表达式。 |
| showTime | 数值 | 选填 | 跑马灯执行一次旋转位移的时间间隔，单位为ms，正整数，默认20ms，支持数字表达式。 |
| deltaAngle | 数值 | 选填 | 跑马灯一次旋转位移的旋转角度，单位为度，范围建议选为-360-360，其中正值为顺时针旋转， 负值为逆时针旋转，可与showTime配合控制跑马灯跑动速度，默认5°，支持数字表达式。 |
| pathname | 字符串 | 必填 | 路径名称，依赖于PathUtil，首先得通过PathUtil解析路径，跑马灯的路径为PathUtil中的路径， 参数值为路径PathUtil的名称。 |
| scaleX | 数值 | 选填 | 对路径宽度进行缩放，scaleX是x轴的缩放倍数。缩放时以路径外接矩形的左上角为中心点， 例如路径为一个宽高均为100矩形，左上角坐标为(100,100)，右下角坐标为(200,200)，scaleX为2， 则放大后矩形左上角仍为(100,100)，右下角为(300,200)。取值为大于0的实数，默认1，支持表达式。 |
| scaleY | 数值 | 选填 | 对路径高度进行缩放，scaleY是y轴的缩放倍数。缩放时以路径外接矩形的左上角为中心点， 例如路径为一个宽高均为100矩形，左上角坐标为(100,100)，右下角坐标为(200,200)，scaleY为2， 则放大后矩形左上角仍为(100,100)，右下角为(200,300)。取值为大于0的实数，默认1，支持表达式。 |
| translateX | 数值 | 选填 | 对path进行x轴偏移，单位为像素，默认0，支持表达式解析。大于0，向右移动；小于0，向左移动。 |
| translateY | 数值 | 选填 | 对path进行y轴偏移，单位为像素，默认0，支持表达式解析。大于0，向下移动；小于0，向上移动。 |
| rotate | 数值 | 选填 | 对PathUtil的到的path路径进行旋转的角度，以路径外接矩形的左上角点为旋转中心，单位为度， 取值范围为-360~360，默认0°，支持表达式。 |
| weight | 数值 | 选填 | 绘制路径的宽度，单位为像素，正整数，默认15像素，支持表达式。 |
| color | 字符串 | 必填 | 跑马灯渐变的背景颜色，支持6/8位十六进制颜色表示、变量、argb函数， 如#ffffff，#ffffffff，@abc，argb(255,255,255,255)， 若@abc字符串为16进制颜色表示则不可包含#号，如ffffff。 |
| marqueeColor | 字符串 | 必填 | 跑马灯渐变的灯颜色，支持6/8位十六进制颜色表示、变量、argb函数。 其中颜色渐变为设置的color的颜色到marqueeColor的颜色产生一个线性的颜色过渡。 |
| marqueePos | 数值 | 选填 | 跑马灯颜色渐变位置控制，颜色渐变点，其值为0~1之间的小数，表示color与marqueeColor颜色渐变位置， 默认0.3，支持表达式。 |
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080"> <Image src="baitian.jpg" w="#screen_ewidth" h="#sreen_height" visibility="eq(#kanjian,0)" /> <Image src="heiye.jpg" w="#screen_width" h="#sreen_height" visibility="eq(#kanjian,1)" /><!--文本跑马灯--> <Text x="420" y="1795" text="SALE" size="40" color="#6fe09e" marquee="true" showTime="100" showStyle="0" tileMode="STRETCH" marqueeColor="#f9fc15" bold="true" rotation="20" pivotX="405" pviotY="1790" rotationX="-8" visibility="eq(#kanjian,1)" /><!--文本路径跑马灯--> <Text x="30" y="430" text="pa s s" size="50" bold="true" color="#ffffff" canPath="true" marquee="true" marqueeColor="#00ff00" showTime="100" visibility="eq(#kanjian,1)"> <PathItem type="quadTo" controlX="25" controlY="-20" x="50" y="0"/> <PathItem type="quadTo" controlX="75" controlY="30" x="190" y="0"/> </Text><!--SVG跑马灯,注跑马灯标签应该在路径该标签之后。目前只支持GIMP软件生成的SVG路径描述。--> <PathUtil name="paomadeng1" path= " M 133.00,25.00 C 135.35,23.84 145.51,17.40 146.60,15.59 148.59,12.24 147.96,5.93 143.07,5.74 138.95,5.58 137.78,11.10 133.00,12.00 133.00,12.00 132.00,15.00 132.00,15.00 132.00,15.00 130.00,14.00 130.00,14.00 130.00,14.00 111.00,31.00 111.00,31.00 111.00,31.00 109.00,30.00 109.00,30.00 109.00,30.00 105.00,35.00 105.00,35.00 108.95,44.39 114.34,42.13 120.00,36.00 121.74,40.77 121.00,46.89 121.00,52.00 121.00,62.36 122.10,73.04 119.00,83.00 124.21,85.11 132.32,84.79 134.26,78.27 134.94,75.99 133.82,72.83 133.73,70.26 133.73,70.26 133.00,53.00 133.00,53.00 133.00,53.00 133.00,25.00 133.00,25.00 Z M 100.00,32.00 C 95.22,32.40 83.70,34.18 80.35,37.43 77.98,39.73 78.24,44.64 77.55,48.00 77.55,48.00 71.13,75.00 71.13,75.00 71.13,75.00 68.61,84.91 68.61,84.91 67.00,88.56 62.12,92.35 66.00,96.00 66.00,96.00 61.00,113.00 61.00,113.00 62.96,113.55 63.88,113.90 66.00,113.87 77.93,113.71 75.20,103.63 79.58,97.01 82.25,92.98 89.90,86.91 94.00,84.00 94.13,86.85 94.51,93.39 96.59,95.40 99.13,97.84 110.08,96.98 110.81,89.99 111.15,86.73 106.67,74.38 105.61,70.00 103.18,59.95 100.47,42.32 100.00,32.00 Z M 43.00,86.00 C 48.83,86.00 56.81,87.35 58.84,80.00 59.08,78.44 59.00,74.75 58.84,73.00 58.99,68.21 58.67,63.03 55.45,59.15 52.47,55.54 44.20,55.05 40.00,56.60 37.95,57.35 36.58,58.60 35.00,60.06 26.46,67.96 24.72,76.05 22.75,87.00 21.88,91.83 21.10,90.91 21.00,97.00 20.85,106.34 19.35,117.58 26.34,124.85 30.25,128.93 35.80,128.09 41.00,128.00 43.14,127.96 45.02,127.98 47.00,126.98 52.21,124.34 59.13,111.60 60.76,106.00 61.12,103.62 61.00,100.48 60.76,97.95 57.81,97.58 54.13,96.66 51.06,97.95 47.62,99.27 41.52,110.41 40.00,114.00 38.95,112.51 38.24,111.82 37.59,110.00 37.02,108.38 37.04,106.69 37.00,105.00 36.81,94.36 36.97,84.22 43.00,75.00 43.00,75.00 43.00,86.00 43.00,86.00 Z M 88.00,57.00 C 88.00,57.00 90.00,72.00 90.00,72.00 90.00,72.00 83.00,78.00 83.00,78.00 83.00,78.00 88.00,57.00 88.00,57.00 Z M 157.00,78.00 C 153.56,78.19 149.03,78.71 146.60,81.50 144.67,83.70 145.01,87.25 145.00,90.00 144.99,95.36 145.47,100.81 144.00,106.00 142.87,102.13 140.52,91.97 137.58,89.61 135.83,88.20 134.07,88.31 132.00,88.78 124.32,90.55 124.03,95.25 124.00,102.00 123.94,115.30 124.93,128.85 123.00,142.00 126.27,142.00 131.96,142.51 134.43,140.11 135.39,139.17 135.68,138.21 135.83,136.91 135.83,136.91 135.00,120.00 135.00,120.00 135.00,120.00 137.00,120.00 137.00,120.00 137.00,120.00 142.00,135.00 142.00,135.00 145.80,134.69 152.57,134.08 154.83,130.61 156.59,127.88 156.00,118.57 156.00,115.00 156.00,115.00 157.00,78.00 157.00,78.00 Z M 134.00,81.00 C 134.00,81.00 133.00,81.00 133.00,81.00 133.00,81.00 134.00,82.00 134.00,82.00 134.00,82.00 134.00,81.00 134.00,81.00 Z M 121.00,96.00 C 121.00,96.00 112.43,97.60 112.43,97.60 112.43,97.60 108.88,107.00 108.88,107.00 108.88,107.00 104.00,127.00 104.00,127.00 104.00,127.00 104.00,106.00 104.00,106.00 104.00,106.00 93.00,106.00 93.00,106.00 93.00,106.00 85.00,138.00 85.00,138.00 85.00,138.00 84.11,124.00 84.11,124.00 84.30,122.03 84.80,118.95 84.11,117.21 82.40,114.55 76.83,112.69 74.17,117.21 72.68,119.66 72.97,125.03 73.00,128.00 73.00,128.00 75.30,150.00 75.30,150.00 75.62,152.24 77.70,161.87 78.95,163.26 82.30,166.98 90.11,163.27 91.43,158.96 92.72,154.74 90.91,149.63 96.00,138.00 96.00,138.00 99.00,155.00 99.00,155.00 101.90,154.87 107.96,154.96 109.83,152.46 109.83,152.46 112.88,136.00 112.88,136.00 112.88,136.00 114.67,128.00 114.67,128.00 114.67,128.00 116.41,116.96 116.41,116.96 118.22,109.15 120.81,104.55 121.00,96.00 Z M 60.00,126.35 C 40.53,131.03 39.81,150.61 40.00,167.00 40.10,174.96 42.20,183.22 52.00,181.68 68.29,179.11 71.84,163.04 72.00,149.00 72.09,140.42 71.96,125.93 60.00,126.35 Z M 58.00,135.00 C 58.00,135.00 59.92,135.00 59.92,135.00 61.53,142.07 61.40,155.97 59.92,163.00 58.69,168.25 58.48,171.27 53.00,173.00 51.17,167.35 49.74,153.77 51.43,148.11 52.24,145.38 53.79,144.88 55.11,142.74 55.11,142.74 58.00,135.00 58.00,135.00 Z M 16.00,198.00 C 19.01,198.00 25.23,198.58 27.40,196.40 29.04,194.77 28.96,192.14 29.00,190.00 29.00,190.00 29.00,165.00 29.00,165.00 29.01,161.36 28.75,158.28 30.89,155.09 34.31,149.99 38.96,150.58 38.96,143.00 38.96,141.94 38.88,140.28 38.40,139.47 36.47,135.39 31.54,138.00 29.00,139.47 29.00,139.47 12.00,153.00 12.00,153.00 9.87,154.84 6.72,157.34 5.76,160.04 3.56,166.19 10.16,169.24 18.00,163.00 18.00,163.00 17.00,185.00 17.00,185.00 17.00,185.00 16.00,198.00 16.00,198.00 Z" /><Marquee showTime="10" color="#fffc00" deltaAngle="5" marqueeColor="#18EE59" marqueePos="0.3" weight="7" pathname="paomadeng1" translateX="865" translateY="887" visibility="eq(#kanjian,1)"/><!--跑马灯标签应该在路径该标签之后。目前只支持GIMP软件生成的SVG路径描述--><!--按钮--><Image src="anniu1.png" x="50" y="2006" visibility="eq(#kanjian,0)"/><Image src="anniu2.png" x="50" y="2006" visibility="eq(#kanjian,1)"/><Button x="45" y="2000" w="150" h="200"> <Trigger action="down"> <VariableCommand name="kanjian" expression="1-#kanjian" /> </Trigger></Button>
粒子散落-ParticleScatter
动效概述
粒子散落动效提供了图片粒子化散落和粒子图片散落两种不同的动效模式，其中图片粒子化是将图片转换成粒子并实现不同的散落动效，而粒子图片散落是按照一定的轨迹散落一定数量的图片，类似于散花的效果。不支持width、height、alpha等通用属性。
场景举例
- 游戏中模拟炸弹爆炸的场景、气球炸破。
- 对物品进行捏碎。
- 玻璃破碎，比如杯子，饭碗等破碎，加上声音的反馈。
XML规范
模式1：图片粒子化散落，提供点击后对一张图片粒子化并且粒子散落的动效。
xxxxxxxxxx<ParticleScatter x="" y="" w="" h="" src="" duration="" style="" shaketime="" translateX="" translateY="" shape="" radius="" reverse="" unlock=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 图片左上角相对于屏幕左上角的位置的x轴坐标，屏幕向右为正，单位为像素， 默认为0，支持表达式。 |
| y | 数值 | 选填 | 图片左上角相对于屏幕左上角的位置的y轴坐标，屏幕向下为正，单位为像素， 默认为屏幕的左上角0，支持表达式。 |
| w | 数值 | 选填 | 设置显示图片的宽度，单位为像素。如果与图片的宽高不一致会对图片有一个缩放的效果， 默认图片原始宽度。若图片宽度小于20，则设置为20，支持表达式。 |
| h | 数值 | 选填 | 设置显示图片的高度，单位为像素。如果与图片的宽高不一致会对图片有一个缩放的效果， 默认图片原始高度。若图片宽高小于20，则设置为20，支持表达式。 |
| src | 字符串 | 必填 | 粒子化图片的源地址，支持字符串变量，当设置useVirtualScreen等于true时， src需要填写虚拟屏幕的名称。 |
| useVirtualScreen | 字符串 | 选填 | 是否支持虚拟屏幕，true/false，默认false， 若为true支持虚拟屏幕则src参数必须为虚拟屏幕的名称。 |
| style | 数值 | 选填 | 粒子散落效果，1-9整数，1：向上爆炸；2：向下坠落；3：从左向右坠落； 4：从右向左坠落；5：从上向下坠落；6从下向上坠落；7：向四周散开爆炸； 8：向两边扩散；9：向上抖动。默认为1，支持表达式。 |
| duration | 数值 | 选填 | 动画持续时间（ms），为大于200 的整数，默认1000，支持表达式。 |
| shaketime | 数值 | 选填 | 粒子散落前动画抖动时间 (ms)，为大于等于0 的整数，默认150。 当style等于1,7,8,9时建议为0。支持表达式。 |
| translateX | 数值 | 选填 | 粒子x轴移动的幅度，整数，默认3，支持表达式。当粒子半径较小时建议该值也相应较小。 |
| translateY | 数值 | 选填 | 粒子y轴移动的幅度，整数，默认4，支持表达式。 |
| shape | 数值 | 选填 | 动画中粒子形状，0：只有圆形；1：只有方形；2：圆形和方形混合，默认0，支持表达式。 |
| radius | 数值 | 选填 | 粒子基础半径，为大于4 的整数，默认5，支持表达式。 需要在图片宽度和高度较小值的1/6以内。 |
| reverse | 字符串 | 选填 | 动画是否倒放标识，即点击之后图片在散落之后会在duration时间结束之后产生一个反向的动画， 还原成原来的图片，值为true或者false，true为开启倒放，可继续点击出现动画效果， false为不倒放，默认false。 |
| unlock | 字符串 | 选填 | 是否解锁标识，true/false，true标识动画结束后直接解锁，false动画结束后不解锁， 默认false。unlock与reverse不可同时为true。 |
模式2：粒子图片散落，将图片作为粒子，产生一定的散落动画效果，例如烟花爆炸效果。
xxxxxxxxxx<ParticleScatter duration="" style="" translateX="" translateY=""> <Item src="" number="" width="" height=""/> <Item src="" number="" width="" height=""/></ParticleScatter>参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| duration | 数值 | 选填 | 粒子散落的动画持续时间（ms），为大于200 的整数，默认1000，支持表达式。 |
| style | 数值 | 选填 | 其效果与图片粒子化的效果一致，推荐使用1,2,7，默认为1，支持表达式。 |
| translateX | 数值 | 选填 | 粒子x轴移动的幅度，取值为整数，默认3，支持表达式。该值越大，x轴粒子位移幅度越大。 |
| translateY | 数值 | 选填 | 粒子y轴移动的幅度，取值为整数，默认4，支持表达式。该值越大，y轴粒子位移幅度越大。 |
| 参 数-Item | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 粒子图片源名称。 |
| number | 数值 | 选填 | 点击产生的粒子数量，大于4 的整数，默认10。 |
| width | 数值 | 选填 | 粒子图片宽，单位为像素，取值大于0 的整数，默认40，支持表达式。 |
| height | 数值 | 选填 | 粒子图片高，单位为像素，取值大于0 的整数，默认40，支持表达式。 |
效果和代码展示
图片粒子化：提供多种参数的设置，在点击的时候将图片转换成粒子，并且根据震动的时间和不同的style，有一个抖动的效果和不同的粒子散落轨迹。
加载bz_icon.png图片其左上角位置为(100,100)，长宽都缩放为100像素，并且转换成图片粒子，粒子的半径为5像素，圆形和方形混合，当点击的时候会有150ms的抖动并实现1000ms向上爆炸的特效。
xxxxxxxxxx<ParticleScatter x="100" y="100" w="200" h="200" src="bz_icon.png" duration="1000" style="1" shaketime="150" translateX="2" translateY="4" shape="2" radius="5"/>
笔刷-Paint
动效概述
笔刷需要与image标签共同使用，当手指滑动屏幕时可以擦除覆盖图片或覆盖颜色所在的图层，显示出背景图片所在图层。若color值不为空，则覆盖图层用颜色来填充，否则用Image图片来填充。注意，用image图片填充时，需要保证背景图片与笔刷覆盖层图片宽高相同（实际图片资源的宽高），以保证笔刷图片完全覆盖背景图。
场景举例
- 可用于实现游戏中的刮彩票的场景。
- 可以实现通过擦除图片显示下面的底图。
- 擦除图片可揭开古风美女面罩。
- 固定位置刷开后可显示解锁，否则显示谢谢惠顾或再来一次等。
- 粉刷，更换墙壁颜色。
- 可用于刮开雾气等场景。
- 模拟冬天起雾的玻璃，用户用手指写字画画。
XML规范
xxxxxxxxxx<!--背景图片--><Image x="" y="" w="" h="" src=""/> <!--笔刷功能，参数说明主要针对下面Image和Paint标签中的参数进行说明--><Image x="" y="" w="" h="" src=""/> <Paint weight="" color="" clear_percent=""/> </Image>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 笔刷覆盖图层左上角相对于屏幕的x轴坐标，单位为像素，默认为0，支持表达式。 |
| y | 数值 | 选填 | 笔刷覆盖图层左上角相对于屏幕的y轴坐标，单位为像素，默认为0，支持表达式。 |
| w | 数值 | 选填 | 笔刷覆盖图层宽度，单位为像素。如果覆盖图层是图片，w无效，实际w为图片的宽度； 如果是颜色覆盖则必须填写w，否则默认为0，支持表达式。 |
| h | 数值 | 选填 | 笔刷覆盖图层高度，单位为像素。如果覆盖图层是图片，h无效，实际h为图片的高度； 如果是颜色覆盖则必须填写h，否则默认为0，支持表达式。 |
| src | 字符串 | 选填 | 笔刷覆盖层图片名称，若覆盖层为颜色填充则该值可不填写。 |
| weight | 数值 | 必填 | 笔刷的粗细，单位为像素，值越大，笔刷越粗，值越小，笔刷越细，取正实数，默认为0，支持表达式。 |
| color | 字符串 | 选填 | 如果覆盖图层想用颜色进行覆盖，则填写6或8位16进制颜色，如#afffffff。 |
| clear_percent | 数值 | 选填 | 当覆盖图层被笔刷刷掉这个比例后，整个覆盖图层自动清除，显示背景图层。取值范围为1-100， 默认60，支持表达式。 |
效果和代码展示
笔刷动效示例一
覆盖图层是用颜色进行填充。可以看到笔刷功能中的Image未设置src，但是设置了color。
xxxxxxxxxx<!--颜色覆盖--><Image w="#screen_width" h="#screen_height" src="bg.jpg"/><Image x="0" y="0" w="#screen_width" h="#screen_height"> <Paint weight="200" color="#ADADAD" clear_percent="60"/></Image>
笔刷动效示例二
覆盖图层用图片进行填充。可以看到笔刷功能中的Image设置了src，但是未设置color。
xxxxxxxxxx<!--图片覆盖--><Image w="#screen_width" h="#screen_height" src="bg.jpg"/><Image x="0" y="0" w="#screen_width" h="#screen_height" src="part.jpg"> <Paint weight="200" clear_percent="60"/></Image>
下落动效-DropPhysicalView
动效概览
下落动效提供了一系列物体移动、旋转、透明度设置、移动区域设置的组合动效。对单张图片进行复用，减小相关内存的消耗。其中下落的动效符合物理规律，提供重力以及空气密度的设置项，能够随着物体大小和重力传感器的数值改变物体的运动轨迹。可以通过参数设置实现2D的下雨下雪、流星等动效。可以与传感器结合使用实现动效随手机移动的效果。
场景举例
- 孔明灯飘动上升。
- 雪花从天空飘落。
- 落叶随风凋零。
- 雨滴从天空掉落。
XML规范
xxxxxxxxxx<DropPhysicalView gravityX="" gravityY="" airDensity=""> <ItemGroup x="" y="" width="" height=""> <Alpha x="" y="" width="" height="" alphaStart="" alphaEnd="" direction=""/> <Size x="" y="" width="" height="" sizeStart="" sizeEnd="" direction=""/> <Item count="" src=""> <Velocity isRandom="" velocityX="" velocityY="" lowestVelocityX="" lowestVelocityY=""/> <Position isRandom="" x="" y=""/> <Angle isRandom="" angle=""/> <AngleVelocity isRandom="" angleVelocity=/> <weight isRandom="" value=""/> <Trigger action=""> <Command></Command> </Trigger> </Item> </ItemGroup></DropPhysicalView>- -DropPhysicalView
下落动效的总体框架是-DropPhysicalView，其主要属性是定义了整个视图中所有粒子元素的下落状态，其中gravity能够填写表达式，例如数值或者传感器数值等。
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| gravityX | 数值 | 选填 | x方向的重力数值，可以用数值表达式，默认值为0。该值大于0物体向右移动，小于0物体向左移动，为0时无x轴位移效果。 |
| gravityY | 数值 | 选填 | y方向的重力数值，可以用数值表达式，默认值为0。该值大于0物体向下移动，小于0物体向上移动，为0时无y轴位移效果。 |
| airDensity | 数值 | 选填 | 空气密度，影响空气阻力的大小，值越大导致空气阻力越大，范围为正实数，默认值为12.93。面积较大的物体下落时所受的空气阻力较大，所以实际动效中w，h较小的物体比w，h大的物体移动速度略快一些。 |
- -ItemGroup
-ItemGroup提供了整个粒子组的运行范围和透明度限定等，限定了粒子的运动轨迹以及表现形式。
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 运行范围的x起点，默认为0，支持数值表达式。 |
| y | 数值 | 选填 | 运行范围的y起点，默认为0，支持数值表达式。 |
| width | 数值 | 选填 | 运行范围的宽度，默认为屏幕宽度，支持数值表达式。 |
| height | 数值 | 选填 | 运行范围的高度，默认为屏幕高度，支持数值表达式。 |
- -Alpha
-Alpha是-ItemGroup的子标签，定义了粒子运行的透明度区域，默认透明度为255，即不透明，可以增加多个区域的透明度。
| -Alpha参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 透明度限制范围的x起点，默认为0，支持表达式。 |
| y | 数值 | 选填 | 透明度限制范围的y起点，默认为0，支持表达式。 |
| width | 数值 | 选填 | 透明度限制范围的宽度，默认为屏幕宽度，支持表达式。 |
| height | 数值 | 选填 | 透明度限制范围的高度，默认为屏幕高度，支持表达式。 |
| alphaStart | 数值 | 选填 | 透明度值，0~255，默认值为255，支持表达式。 |
| alphaEnd | 数值 | 选填 | 透明度值，0~255，默认值为255，支持表达式。 |
| direction | 字符串 | 选填 | 透明度变化方向，在区域内根据粒子的位置对物体透明度进行线性的变化， 值为(left, right, up, down)分别是向左. 右. 上. 下，物体透明度从alphaStart 根据位置和方向线性变化到alphaEnd。默认方向向上。 |
- -Size
-Size标签定义了粒子运行的尺寸变化区域，在区域内的粒子尺寸由系数控制，可以增加多个区域的尺寸变化，如果不设置该区域则粒子保持其设置的尺寸。
| -Size参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 尺寸变化区域的x起点，默认为0，支持表达式。 |
| y | 数值 | 选填 | 尺寸变化区域的y起点，默认为0，支持表达式。 |
| width | 数值 | 选填 | 尺寸变化区域的宽度，默认为屏幕宽度，支持表达式。 |
| height | 数值 | 选填 | 尺寸变化区域的高度，默认为屏幕高度，支持表达式。 |
| sizeStart | 数值 | 选填 | 尺寸变化系数，0~1，默认值为0，支持表达式。 |
| sizeEnd | 数值 | 选填 | 尺寸变化系数，0~1，默认值为1，支持表达式。 |
| direction | 字符串 | 选填 | 尺寸变化方向，在区域内根据粒子的位置对物体尺寸进行线性的变化， 值为(left, right, up, down)分别是向左. 右. 上. 下，物体尺寸系数 从sizeStart根据位置和方向线性变化到sizeEnd。默认方向向上。 |
- -Item
-Item定义了实际显示和运行的物体的参数和效果，能够通过不同的标签对物体进行修饰，影响物体的运行轨迹。
| -Item参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 图片的源路径。 |
| count | 数值 | 选填 | 物体的数量，正整数，默认为0。 |
说明
以下4个标签-Velocity，-Angle，-Position，-AngleVelocity为-Item的子标签，如果不设置，默认为随机。
- -Velocity
-Velocity影响粒子的初始速度，能够设置随机，随机默认低点为0，如果不随机需要设置isRandom="false"。
| -Velocity参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| isRandom | 字符串 | 必填 | 初始速度是否随机，true/false。 |
| velocityX | 数值 | 选填 | x方向初始速度，默认为0，支持表达式。不随机则x轴初始速度为该值， 随机则x轴初始速度为lowestVelocityX+[(0,velocityX)间随机值]。 |
| velocityY | 数值 | 选填 | y方向初始速度，默认为0，支持表达式.不随机则y轴初始速度为该值， 随机则x轴初始速度为lowestVelocityY+[(0,velocityY)间随机值]。 |
| lowestVelocityX | 数值 | 选填 | isRandom等于true时生效，为x轴随机初始速度最低值，默认为0，支持表达式。 |
| lowestVelocityY | 数值 | 选填 | isRandom等于true时生效，为y轴随机初始速度最低值，默认为0，支持表达式。 |
- -Angle
-Angle为物体的初始旋转角度，不设置则随机角度，如果禁止随机角度必须设置isRandom="false"。
| -Angle参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| isRandom | 字符串 | 必填 | 初始旋转角度是否随机，true/false。 |
| angle | 数值 | 选填 | -360-360整数，不随机时生效，给每个粒子统一赋予同一个角度的旋转，默认为0。 |
- -Position
-Position表示物体的初始位置，如果不设置则在ItemGroup的运行范围内随机生成，如果指定则初始位置为指定位置。
| -Position 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| isRandom | 字符串 | 选填 | 位置是否随机，true/false，默认false。 |
| x | 数值 | 选填 | 初始位置的x坐标，不随机时有效，默认为0，支持表达式。 |
| y | 数值 | 选填 | 初始位置的y坐标，不随机时有效，默认为0，支持表达式。 |
- -AngleVelocity
-AngleVelocity表示物体的旋转角速度，控制物体旋转速度的快慢，能够显示的设置物体随机旋转速度的大小。如果不写此标签则旋转速度的范围为0-30度。
| -AngleVelocity 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| isRandom | 字符串 | 选填 | 角速度是否随机，true/false，默认false。 |
| angleVelocity | 数值 | 选填 | 物体旋转角速度，范围为-360-360，默认为0，支持表达式。不随机则物体的旋转角度为该值，如果随机则物体旋转角度为lowestAngleVelocity+[(0,angleVelocity)间随机值]。 |
| lowestAngleVelocity | 数值 | 选填 | 物体最低旋转角速度，范围为-360-360，默认为0，支持表达式。仅当isRandom等于true时生效，为随机速度的最小值。 |
- -weight
-weight为物体的大小设置，根据设置的值能够对生成的图大小进行缩放。如果不设置为不随机，则大小在0~1之间随机。
| -weight参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| isRandom | 字符串 | 选填 | 是否随机缩放粒子，true/false，默认false。 |
| value | 数值 | 选填 | 粒子图片的缩放比例，默认为1，支持表达式。如果不随机则统一设置物体缩放比例为该值， 随机则缩放比例是lowestWeight+[(0,value)间随机值]。 |
| lowestWeight | 数值 | 选填 | 仅当isRandom等于true的时候才生效，为随机尺寸的最小值，默认为0.1。 |
- -Trigger
-Trigger能够在标签Item中添加Trigger标签，同一个Item组的粒子在被点击时能够产生响应，并且执行Item中设置的所有命令。
效果和代码展示
下落动效示例一
雪花飘落效果，并能根据手机晃动实现粒子随手机摇摆运动。首先设置加速度传感器，得到x,y,z轴的加速度全局变量；在DropPhysicalview标签中使用x,y轴加速度作为x,y轴重力；在ItemGroup中设置粒子的作用范围为整个屏幕(0,0,screen_width,screen_height)；设置了Alpha和Size两个渐变区域，在屏幕五分之一处开始到屏幕最下方结束，物体的透明度从255渐变到50，尺寸系数从1渐变到0.2；设置多个Item，xuehua.png图片的粒子个数为40，以5的速度下落，粒子的初始位置进行随机，雪花在下落过程中以10°的角速度进行旋转，图片在（0.1~0.6）范围内进行随机缩放；lingdang.png图片粒子个数为20，以5的速度下落，初始位置随机，下落时角度不变换，因为没有设置Angle标签，所以粒子的初始旋转角度是随机的，图片在(0.1~0.5)范围内进行缩放。对于xuehua.png这张图片来说，其中40个图片能够响应点击操作，点击将名称为test变量的值加一。
xxxxxxxxxx<!--设置加速度传感器--><VariableBinders> <SensorBinder type="accelerometer"> <Variable name="x_acc" index="0"/> <Variable name="y_acc" index="1"/> <Variable name="z_acc" index="2"/> </SensorBinder></VariableBinders><DropPhysicalView gravityX="-#x_acc" gravityY="#y_acc" airDensity="50"><!--粒子的作用范围为整个屏幕--> <ItemGroup x="0" y="0" width="#screen_width" height="#screen_height"><!--Alpha和Size两个渐变区域--> <Alpha x="0" y="#screen_height / 5" width="#screen_width" height="#screen_height * 4 / 5" alphaEnd="50" alphaStart="255" direction="down"/> <Size x="0" y="#screen_height / 5" width="#screen_width" height="#screen_height * 4 / 5" sizeEnd="0.2" sizeStart="1" direction="down"/><!--设置雪花下落的属性--> <Item count="40" src="xuehua.png"> <Velocity isRandom="true" velocityX="0" velocityY="5"/> <Position isRandom="true"/> <AngleVelocity isRandom="true" angleVelocity="10"/> <Weight isRandom="true" value="0.5"/> <Trigger action="down"> <VariableCommand name="test" expression="#test + 1"/> </Trigger> </Item><!--设置铃铛下落的属性--> <Item count="20" src="lingdang.png"> <Velocity isRandom="true" velocityX="0" velocityY="5"/> <Position isRandom="true"/> <AngleVelocity angleVelocity="0"/> <Weight isRandom="true" value="0.4"/> </Item> </ItemGroup></DropPhysicalView>
下落动效示例二
流星动效。设置DropPhysicalView的x轴重力为10，y轴重力为6；ItemGroup中设置流星动效范围为整个屏幕；设置两个Alpha区域，第一个Alpha区域使得流星在屏幕左上角为(700,0)，右下角为(1080,#screen_height-1500)的矩形区域内透明度为100，第二个Alpha区域使得流星在在屏幕下方高为#screen_height-1500，宽为屏幕宽度的矩形区域内透明度为0；流星的x轴速度为10，y轴速度为6，初始位置随机，旋转角度AngleVelocity 和初始角度Angle 需要显式设置为0；流星图片在(0.1~0.3)范围内缩放。
xxxxxxxxxx<DropPhysicalView gravityX="10" gravityY="6"><!--设置流星动效范围为整个屏幕--> <ItemGroup x="0" y="0" width="#screen_width" height="#screen_height"><!--设置设置两个Alpha区域--> <Alpha x="700" y="0" width="380" height="#screen_height-1500" alphaStart="100" alphaEnd="100"/> <Alpha x="0" y="1500" width="#screen_width" height="#screen_height -1500" alphaStart="0" alphaEnd="0"/><!--设置流星下落的属性--> <Item count="5" src="meteor.png"> <Velocity isRandom="false" velocityX="10" velocityY="6"/> <Position isRandom="true"/> <Angle isRandom="false" angle="0"/> <AngleVelocity isRandom="false" angleVelocity="0"/> <Weight isRandom="false" value="0.2"/> </Item> </ItemGroup></DropPhysicalView>
全景锁屏-VR
动效概述
全景图片的360度全景功能。支持柱状和球状全景图的解析，支持根据手动或传感器方式改变全景视角。注意全景图片的显示会占满屏幕，与时间等其他功能叠加时需要至于底层避免遮挡；全局只支持一个全景功能，若脚本中编写多个全景功能，只识别第一个。
场景举例
- 展示长幅的画卷
- 展示宇宙星空，海洋等宏大浩瀚的场景
XML规范
xxxxxxxxxx<VR src="" srcid="" imageType="" touchType=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 全景图片名称，目前仅支持jpg和png格式图片。 |
| srcid | 数值 | 选填 | 全景图片序号，如src="vr.jpg"，srcid="0"，最终全景图片名称为"vr_0.jpg"。默认为0，支持变量， 可通过设置变量动态修改全景图片资源。注意全景图片的imageType需保持一致。 |
| touchType | 数值 | 选填 | 改变全景视角方式，取值为0,1,2。0表示通过用户滑动屏幕动作改变全景视角， 1表示根据传感器数值改变全景视角，2表示混合模式，滑动和传感器可同时作用改变全景视角。 默认为0，支持表达式，可以使用变量切换改变全景视角方式。 |
说明
球状全景图宽高比需为2:1，建议大小为80004000，不能大于163848192及5M，不能小于3960*1980。柱状全景图宽高比需大于等于4:1，小于等于8:1，宽度不能大于16384，高度不能小于1980，图片不能大于5M。
效果和代码展示
全景锁屏示例一
全景功能中传入全景图vr06.jpg，通过变量#touchType动态切换控制全景视角改变方式（点击屏幕左上角切换）。锁屏界面中会显示全景图片，在全景图片上层会显示时间、日期等。滑动屏幕可以切换全景视角，也可以通过手势放大、缩小全景图片。
xxxxxxxxxx<Var name="touchtype" expression="0"/><!--全景功能--><VR src="vr06.jpg" touchType="#touchtype"/><!--切换控制姿态方式按钮--><Image src="button.jpg" w="200" h="200" x="0" y="0"/><Button x="0" y="0" w="200" h="200"><Trigger action="up"><Variable Commandname="touchtype" expression="1-#touchtype"/></Trigger></Button><!--时间--><Time name="shijian" x="551" y="903" align="center" alignV="center" src="time.png"/><!--日期与星期--><Group x="115" y="790"><Image x="200" y="230" srcid="#year%100/10" src="date.png"/><Image x="200+36" y="230" srcid="#year%10" src="date.png"/><Image x="200+72" y="230" src="date_dot.png"/><Image x="200+108" y="230" src="date.png" srcid="(#month+1)/10"/><Image x="200+144" y="230" src="date.png" srcid="(#month+1)%10"/><Image x="200+180" y="230" src="date_dot.png"/><Image x="200+216" y="230" src="date.png" srcid="#date/10"/><Image x="200+252" y="230" src="date.png" srcid="#date%10"/><Image x="200+320" y="235" src="week.png" srcid="#day_of_week"/></Group><!--解锁--><Unlocker name="unlocker" bounce InitSpeed="2000" bounce Acceleration="3000"><Start Point x="300" y="#screen_height-300" w="470" h="300"></StartPoint><EndPointx="300" y="#screen_height-650" w="50" h="300"><Pathx="300" y="#screen_height-300" w="470" h="300"> <Positionx="0" y="0"/> <Positionx="0" y="-200"/></Path></EndPoint></Unlocker>
全景锁屏示例二
通过srcid切换全景图。准备vr_0.jpg、vr_1.jpg、vr_2.jpg三张全景图，注意这三张全景图需要有相同的imageType。当点击按钮0、1、2是可切换全景图片。不解锁熄屏再亮屏时显示熄屏前全景图；解锁后再次亮屏显示的是vr_0.jpg全景图。
xxxxxxxxxx<!--控制姿态变换变量--><Var name="touchtype" expression="0"/><!--控制全景srcid切换变量--><Var name="id" expression="0"/><!--全景功能--><VR src="vr.jpg" srcid="#id" touchType="#touchtype"/><!--全景图片0按钮--><Image src="button0.png" x="200" y="1000" w="150" h="150"/><Button x="200" y="1000" w="200" h="200"><Trigger action="up"><VariableCommandname="id"expression="0"/></Trigger></Button><!--全景图片1按钮--><Image src="button1.png" x="800" y="200" w="150" h="150"/><Button x="200" y="1200" w="200" h="200"><Trigger action="up"><VariableCommandname="id"expression="1"/></Trigger></Button><!--全景图片2按钮--><Image src="button2.png"x="200"y="1400"w="150"h="150"/><Button x="200"y="1400" w="200"h="200"><Trigger action="up"><VariableCommandname="id" expression="2"/></Trigger></Button>
延时解锁-DelayUnlock
动效概述
延时解锁基于Slider和ExternCommand功能实现，允许用户在执行解锁操作一定时间后（延迟时间）执行系统解锁命令。关键在于执行ExternCommand命令时增加延时参数delay，用于控制延迟解锁的时间。
场景举例
- 融入俄罗斯方块小游戏，实现趣味解锁。
- 点击燃放鞭炮，鞭炮燃放完毕后执行解锁。
- 点击喂食宠物，宠物吃完食物后执行解锁。
XML规范
xxxxxxxxxx<ExternCommand command="unlock" delay=""/>
参数说明
| 参数 | 类 型 | 选 项 | 注释 |
|---|---|---|---|
| command | 字符串 | 必填 | 通用命令标签，用于向外部程序发生解锁命令。 |
| delay | 数值 | 必填 | 通用命令标签，用于向外部程序发生解锁命令，delay表明延迟解锁时间，单位为ms。 |
效果和代码展示
xxxxxxxxxx<!--该示例提供了延时解锁用法，当用户执行解锁操作3000ms后调用系统解锁命令，执行解锁--><Slider name="unlocker" bounceInitSpeed="2000" bounceAcceleration="3000"> <StartPoint x="380" y="#screen_height-1970+1740" w="300" h="160"> </StartPoint> <EndPoint x="380" y="#screen_height-1970+1740-230" w="30" h="100"> <Path x="380" y="#screen_height-1970+1740" w="300" h="160"> <Position x="0" y="0"/> <Position x="0" y="-180"/> </Path> <Trigger> <ExternCommand command="unlock" delay="3000"/> </Trigger> </EndPoint></Slider>
水波纹-WaterWallpaper
动效概述
点击屏幕产生全屏水波纹效果，网格分的越多，水波效果越细腻。不建议分太多网格，会消耗过多资源。
场景举例
背景为水或者与水相关的场景，皆可用水波纹动效。添加音效和震动，可使场景更加逼真。比如：
- 点击荷花池水面，会有水波纹产生，并附加水的音效。
- 点击鱼塘水面，产生水波纹，鱼儿被吓游走，附加水的音效以及震动的效果，使鱼儿被吓走的场景更真实化。
XML规范
xxxxxxxxxx<WaterWallpaper xmesh="" ymesh="" src="" torsion="" color="" />
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| xmesh | 数值 | 选填 | x方向上分成多少网格，取值范围为1~100，默认值为27，支持数值表达式。 |
| ymesh | 数值 | 选填 | y方向上分成多少网格，取值范围为1~100，默认值为48，支持数值表达式。 |
| src | 字符串 | 选填 | 图片资源名称，支持变量，如@abc。如果该参数为空，则会从lockscreen目录中取"default_lock_wallpaper.jpg"或”background.jpg"，优先取前者。 |
| torsion | 数值 | 选填 | 扭曲度，值越大，图片扭曲变形越大，水波纹效果越明显；取值范围1~10， 默认值为2，支持数值表达式。 |
| color | 字符串 | 选填 | 触摸处顶点颜色，支持6位16进制颜色表示，如#0000ff。颜色透明度较小， 无特殊需求，建议不设置。 |
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080"> <Image src="background.jpg"/><!--xmesh: 屏幕宽分成多少网格--><!--ymesh: 屏幕高分成多少网格--><!--src: 壁纸资源--> <!--torsion: 水波扭曲度 值为int型1-10--><!--color: 水波顶点处(手指触摸处)颜色--> <Var name="torsion" expression="2" const="false" /><WaterWallpaper xmesh="27" ymesh="48" src="background.jpg" torsion="#torsion" color="#0cf02b" /><Button x="600" y="1500" w="200" h="200"> <Triggers> <Trigger action="down"> <VariableCommand name="torsion" expression="2"/> </Trigger> <Normal> <Image x="600" y="1500" src="button.png" alpha="255" /> <Text x="650" y="1580" text="torsion=2" color="#f50710" size="30"/> </Normal> <Pressed> <Image x="600" y="1500" src="button.png" alpha="255" /> <Text x="650" y="1580" text="torsion=2" color="#f50710" size="30"/> </Pressed> </Triggers> </Button><Button x="800" y="1500" w="200" h="200"> <Triggers> <Trigger action="down"> <VariableCommand name="torsion" expression="5"/> </Trigger> <Normal> <Image x="800" y="1500" src="button.png" alpha="255" /> <Text x="850" y="1580" text="torsion=5" color="#f50710" size="30"/> </Normal> <Pressed> <Image x="800" y="1500" src="button.png" alpha="255" /> <Text x="850" y="1580" text="torsion=5" color="#f50710" size="30"/> </Pressed> </Triggers> </Button></Lockscreen>
跟手粒子-ParticleView
动效概述
当手指在锁屏上滑动时，在滑动轨迹处会生成跟手粒子。粒子形状、颜色由输入的粒子图片控制，而粒子数量和大小等可通过参数进行设置。此外，还可以通过Range子标签来设置跟手粒子响应区域，即只有当手指滑动处于Range区域时，才生成跟手粒子。
场景举例
- 浩瀚的海洋跟手一群鱼。
- 震撼的星空跟手闪烁的星星。
- 在大树旁，大风吹过，跟手飘落的树叶与花瓣。
XML规范
xxxxxxxxxx<ParticleView w="" h="" count="" move_radius="" speek_sec="" reduce_size="" src="" set_path=""> <!--可通过多个Range标签指定多个矩形区域来响应跟手粒子--><PathData> <Range rect=""/> <Range rect=""/> </PathData> </ParticleView>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| w | 数值 | 选填 | 粒子宽度，取值正实数，默为60，支持数值表达式。 |
| h | 数值 | 选填 | 粒子高度，宽高比例建议1:1，取值正实数，默为60， 支持数值表达式。 |
| count | 数值 | 选填 | 每次滑动产生的粒子数量，取值为正整数，建议范围[1,30]， 默认为6；数值太大会造成卡顿现象。 |
| move_radius | 数值 | 选填 | 粒子在手指运动轨迹的基础上随机运动半径的反比例系数； 数值越大，粒子随机运动半径越小；取值范围为(1，屏幕宽度)， 默认为16，支持数值表达式。 |
| speek_sec | 数值 | 选填 | 单位时间粒子运动的距离，该值越大粒子消失越快。 取值正实数，默认为2.5，支持数值表达式。 |
| reduce_size | 数值 | 选填 | 每次运动时粒子宽高缩小的尺寸， 取值正实数（设置过大会导致粒子消失太快）， 取值范围[0.1,5]，默认为3，支持数值表达式。 |
| set_path | 字符串 | 选填 | 是否设置跟手粒子响应区域，true/false；true表示设置， false表示不设置，默认false；如果为true， 需要在PathData标签中设置矩形区域。 |
| src | 字符串 | 必填 | 粒子图片资源名称，生成跟手粒子时使用。 |
| rect（副标签PathData用于解析输入的特定Range矩形区域） | 数值 | 选填 | 指定在该矩形区域内可生成跟手粒子， 示例：rect="left,top,right,bottom"， 表示矩形左上右下对应的x、y坐标， 支持在PathData中设置多个区域。 |
说明
如果指定区域，只在特定的区域内才产生跟手粒子。矩形区域坐标信息用Rect(left,top,right,bottom)表示，其中left、top相当于矩形左上角坐标<x1,y1>; right,bottom相当于矩形右下角坐标<x2,y2>；那么矩形的x轴范围为x1-x2，y轴范围为y1-y2。
效果和代码展示
跟手粒子示例
该示例中未设置跟手粒子响应区域，默认全屏都可以产生跟手粒子。其中，生成的跟手粒子宽高为60像素，每次手指滑动产生6个粒子，运动轨迹上的粒子大小以3像素递减直至粒子宽高小于0时消失。
xxxxxxxxxx<ParticleView w="60" h="60" count="6" move_radius="16" speek_sec="2.5" reduce_size="3.0" set_path="false" src="snow_flower.png"> <PathData> <Range rect="600,580,650,1230"/> <Range rect="650,1150,950,1230"/> <Range rect="650,580,950,630"/> <Range rect="930,580,970,1230"/> </PathData> </ParticleView>
3D高级动效
3D旋转视图-StereoView
功能概述
StereoView作为3D旋转视图的根标签，可以包含若干个StereoGroup元素，StereoGroup为组的概念，并且只支持StereoGroup标签，其余无效，StereoGroup数量限制为 3 - 10个。
场景举例
- 切换锁屏壁纸。
- 锁屏界面设置立体小组件。
XML规范
xxxxxxxxxx <StereoView sAngle="" can3D="" resistance="" align="" alignV="" w="" h="" x="" y=""> <StereoGroup> ... </StereoGroup> </StereoView> | 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| sAngle | 数值 | 选填 | 旋转时两个页面的夹角，范围为0至180度 |
| can3D | 数值 | 选填 | 是否支持3D旋转模式 1是3D旋转模式，0是非3D旋转模式 |
| resistance | 数值 | 选填 | 旋转时的阻力效果，默认1.8，范围为0.1至10 |
| fixed | 数值 | 选填 | 是否固定图片大小，默认为固定，填写1为取消固定。取消固定后，可在一个旋转的扇面上自由设置图片大小及位置 |
说明
-StereoGroup为组的概念，可以将多个标签组合起来，它所支持的标签有Image、Text、Button。
效果和脚本展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080"><!--3D旋转视图的根标签--><StereoView sAngle="90" can3D="1" resistance="1.8" align="center" alignV="center" x="86" y="1191" w="1080" h="744"> <StereoGroup> <!--三张背景图为一组，设置对齐方式等参数--> <Image src="bj.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> <Image src="bj1.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> <Image src="bj2.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> </StereoGroup> <StereoGroup> <!--第一张背景搭配视频App的包名按钮为一组，做成立体小组件--> <Image src="bj.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> <Text color="#20B2AA" name="54HWmovie" size="50" text="视频" x="50" y="100" /> <Button h="#54HWmovie.text_height" w="#54HWmovie.text_width" x="50" y="100"> <Trigger action="up"> <IntentCommand action="android.intent.action.MAIN" class="com.huawei.himovie.ui.login.SplashScreenActivity" package="com.huawei.himovie" /> <ExternCommand command="unlock" /> </Trigger> </Button> </StereoGroup> <StereoGroup> <!--第二张背景搭配音乐App的包名按钮为一组，做成立体小组件--> <Image src="bj1.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> <Text color="#20B2AA" name="54HWmusic" size="50" text="音乐" x="50" y="100" /> <Button h="#54HWmusic.text_height" w="#54HWmusic.text_width" x="50" y="100"> <Trigger action="up"> <IntentCommand action="android.intent.action.MAIN" package="com.android.mediacenter" class="com.android.mediacenter.PageActivity" /> <ExternCommand command="unlock" /> </Trigger> </Button> </StereoGroup> <StereoGroup> <!--第三张背景搭配应用市场App的包名按钮为一组，做成立体小组件--> <Image src="bj2.jpg" align="center" alignV="center" x="#w/2" y="#h/2" /> <Text color="#20B2AA" name="54Appmarket" size="50" text="应用市场" x="50" y="100" /> <Button h="#54Appmarket.text_height" w="#54Appmarket.text_width" x="50" y="100"> <Trigger action="up"> <IntentCommand action="android.intent.action.MAIN" package="com.huawei.Appmarket" class="com.huawei.Appmarket.MainActivity" /> <ExternCommand command="unlock" /> </Trigger> </Button> </StereoGroup></StereoView> </Lockscreen>
立体图层-MultiLayer
动效概述
立体图层动效可以实现多个图层叠加的效果。根据设置的不同z值，展示图层的不同空间位置。与传感器标签
说明
- 因该动效使用透视投影，坐标位置和大小与设置的z值有关。比如设置全屏展示的图片，在远处时展示的位置为屏幕的中心位置；当图片靠近贴近相机时就会全屏展示，若需要开始展示时图层全屏展示，图层需要设置超过屏幕宽高的值。
- 因OpenGL需要从远到近的顺序绘制图层，设计Layer标签时需要注意，详情见下面z值属性注释。
- 图层边缘与背景图的颜色处理一致，效果会更好。
场景举例
- 穿越森林。
- 穿越洞口，看见大海。
- 穿越沙漠，看见绿洲。
- 穿越建筑物，看见城市美景。
XML规范
xxxxxxxxxx<MultiLayer gravityX="" gravityY="" pitchAngle="" sidesAngle="" touchType="" stepX="" stepZ="" blur="" visibility=""> <!--远处的图层--> <Layer x="" y="" z="" w="" h="" src="" staticCondition=""/> <!--中间的图层--> <Layer x="" y="" z="" w="" h="" src=""/> <!--近处的图层--> <Layer x="" y="" z="" w="" h="" src="" delay="" repeat=""> <Source frame="" time=""/> <Source frame="" time=""/> <Source frame="" time=""/> </Layer></MultiLayer>- 参数说明
MultiLayer的属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| gravityX | 数值 | 选填 | x方向的重力数值。使用表达式，与传感器标签-VariableBinders结合使用。 应用于模式0和2 |
| gravityY | 数值 | 选填 | y方向的重力数值。使用表达式，与传感器标签-VariableBinders标签结合使用。 应用于模式0和2 |
| touchType | 数值 | 选填 | 图层交互模式，数值为0-3，支持表达式，默认值为0。目前共有4种模式：0， 重力感应模式；1，上下左右滑动改变相机角度模式；2，重力感应和滑动改变角度模式； 3，调节相机远近和左右浏览模式。 |
| pitchAngle | 字符串 | 选填 | 俯视和仰视角度的最大值，通过上下滑动切换角度。取值为“top,-up”，top为正数， up为正数，中间以英文逗号隔开。例如："8,-8"。应用于模式1和2 |
| sidesAngle | 字符串 | 选填 | 左侧和右侧角度的最大值，通过左右滑动切换角度。取值为“left,-right”，left为正数， right为正数，中间以英文逗号隔开。例如："8,-8"。应用于模式1和2 |
| stepX | 数值 | 选填 | 图层左右浏览的步长，使用表达式计算累加/减，例如：#stepX+0.1。应用于模式3。 |
| stepZ | 数值 | 选填 | 图层靠近远离的步长，使用表达式计算累加/减，例如：#stepZ+0.1。应用于模式3。 |
| blur | 数值 | 选填 | 点击图层靠近时，渐变模糊程度，范围是[0,10]，默认为0清晰。 |
| visibility | 数值 | 选填 | 控制可见性，0 不可见 1可见，默认为1。 |
Layer的属性：
由于图片距离越远（即z值越小），图片则越小且x和y值也有偏差。若需要在远处也达到图片原始大小和位置一样的效果，需要对x和y以及宽高进行换算。关系换算如下：
例如图片原始属性：x=X，y=Y，w=W，h=H。空间各位置的图片属性如下：
设z=Z，z值范围[-10,7]
x=X*((10-Z)/3)-#screen_width/(6/(7-Z))；
y=Y*((10-Z)/3)-#screen_height/(6/(7-Z))；
w=W*((10-Z)/3)；
h=H*((10-Z)/3)；
说明
当z值为7时，不需要进行换算，可以直接显示图片大小和位置。
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| x | 数值 | 选填 | 相对于屏幕左上角的x坐标，支持表达式，默认值为0。因透视投影的影响， 当在远处时显示的位置也不同，跟z值有关。 |
| y | 数值 | 选填 | 相对于屏幕左上角的y坐标，支持表达式，默认值为0。因透视投影的影响， 当在远处时显示的位置也不同，跟z值有关。 |
| z | 数值 | 选填 | 图层的空间位置，相机视野内的取值范围为[-10,7]之间的浮点数，支持表达式， 默认值为0。屏幕向外为正方向。因使用透视投影，物体显示效果为远小近大。 设计图层Layer标签时，需要根据z值从小到大赋值，即图层从远到近的顺序绘制。 |
| w | 数值 | 必填 | 图片的宽，支持表达式，w和width写法都可以。 |
| h | 数值 | 必填 | 图片的高，支持表达式，h和height写法都可以。 |
| src | 字符串 | 必填 | 图片的资源，例如：bj.png |
| staticCondition | 字符串 | 选填 | 图层是否静态，不随相机位置改变，取值为true和false。为true时表示图层静态， 不发送改变。默认为false。 |
| delay | 数值 | 选填 | 帧动画延迟播放属性，默认不延迟。 |
| repeat | 数值 | 选填 | 帧动画重复次数，默认为无限重复。 |
Source的属性
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| frame | 字符串 | 必填 | 帧动画图片资源，例如：zhen_1.png |
| time | 数值 | 必填 | [0-~]，相对于起始帧的间隔时间（毫秒），也是动画持续时间，帧图片人肉眼能识别时间延时为300ms左右，不小于0； |
效果和代码展示
xxxxxxxxxx <MultiLayer gravityX="0" gravityY="0" pitchAngle="5,-5" sidesAngle="8,-8" touchType="3" stepX="0" stepZ="0"> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj6,0)+(#kg%2)*(#zzz/50)*8" w="1080*6.4" h="2400*6.4" src="bg_5.jpg"/> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj5,0)+(#kg%2)*(#zzz/50)*20" w="1080*6.4" h="2400*6.4" src="bg_4.png"/> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj4,0)+(#kg%2)*(#zzz/50)*25" w="1080*6.4" h="2400*6.4" src="bg_3.png"/> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj3,0)+(#kg%2)*(#zzz/50)*30" w="1080*6.4" h="2400*6.4" src="bg_2.png"/> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj2,0)+(#kg%2)*(#zzz/50)*40" w="1080*6.4" h="2400*6.4" src="bg_1.png"/> <Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj1,0)+(#kg%2)*(#zzz/50)*50" w="1080*6.4" h="2400*6.4" src="bg_0.png"/> </MultiLayer>示例：该示例中通过按钮切换控制不同的交互模式，重力感应模式跟VariableBinders标签结合使用；设置角度变换模式的俯视仰视和左右侧角度的最大值；通过长按按钮控制图层靠近，抬起时图层远离，左右滑动控制图层左右浏览效果；近处的图层实现帧动画效果。
xxxxxxxxxx<VariableBinders> <SensorBinder type="gravity"> <Variable name="x_gra" index="0"/> <Variable name="y_gra" index="1"/> </SensorBinder></VariableBinders><MultiLayer gravityX="-#x_gra" gravityY="#y_gra" pitchAngle="5,-5" sidesAngle="8,-8" touchType="#touchtype" stepX="#stepX" stepZ="#step" blur="1.0" visibility="1"> <Layer x="0" y="0" z="0" w="#screen_width" h="#screen_height" src="gufeng_2.png"/> <Layer x="0" y="0" z="2" w="#screen_width" h="#screen_height" src="bg.jpg"/> <Layer x="0" y="0" z="4" w="#screen_width" h="#screen_height" src="gufeng_4.png"/> <Layer x="200" y="600" z="4.5" w="600" h="750" src="zuida1_1.png" delay="1000" repeat="4"> <Source frame="zuida1_1.png" time="0"/> <Source frame="zuida1_1.png" time="400"/> <Source frame="zuida1_2.png" time="800"/> <Source frame="zuida1_3.png" time="1200"/> <Source frame="zuida1_4.png" time="1600"/> <Source frame="zuida1_5.png" time="2000"/> <Source frame="zuida1_1.png" time="2500"/> <Source frame="zuida1_1.png" time="3000"/> <Source frame="zuida1_2.png" time="3500"/> <Source frame="zuida1_3.png" time="4000"/> <Source frame="zuida1_4.png" time="4500"/> <Source frame="zuida1_5.png" time="5000"/> </Layer></MultiLayer><!-- 按钮切换控制4种模式 --><Image src="1.png" w="200" h="200" x="0" y="0"/><Button x="0" y="0" w="200" h="200"><Trigger action="up"> <VariableCommand condition="lt(#touchtype,4)" name="touchtype" expression="#touchtype+1"/> <VariableCommand condition="ge(#touchtype,4)" name="touchtype" expression="0" /></Trigger></Button><!-- 长按按钮时图层靠近，抬起时图层恢复 --><Var name="isTouched" expression="0"/><Var name="sj"> <VariableAnimation> <AniFrame value="0" time="0"/> <AniFrame value="9999999999999999" time="9999999999999999"/> </VariableAnimation></Var><Var name="maoy" expression="#sj" threshold="1"> <Trigger> <VariableCommand name="step" expression="#step+0.1" condition="eq(#isTouched,1)*le(#step,6.9)"/> <VariableCommand name="step" expression="#step-0.1" condition="eq(#isTouched,2)*ge(#step,0.1)"/> </Trigger></Var><Image src="5.png" w="200" h="200" x="0" y="1500"/><Button x="0" y="1500" w="200" h="200"> <Trigger action="down"> <VariableCommand name="isTouched" expression="1"/> </Trigger> <Trigger action="up"> <VariableCommand name="isTouched" expression="2"/> </Trigger></Button><!-- 左右滑动浏览 --><Slider> <StartPoint x="0" y="0" w="#screen_width" h="#screen_height"> </StartPoint> <EndPoint x="-350" y="0" w="50" h="#screen_height"> <Trigger action="up"> <VariableCommand name="stepX" expression="#stepX-0.1"/> </Trigger> <Path x="0" y="0"> <Position x="0" y="0"/> <Position x="-350" y="0"/> </Path> </EndPoint></Slider><Slider> <StartPoint x="0" y="0" w="#screen_width" h="#screen_height"> </StartPoint> <EndPoint x="350" y="0" w="50" h="#screen_height"> <Trigger action="up"> <VariableCommand name="stepX" expression="#stepX+0.1"/> </Trigger> <Path x="0" y="0"> <Position x="0" y="0"/> <Position x="350" y="0"/> </Path> </EndPoint></Slider>
窗口视差-WindowParallax
动效概述
窗口视差动效需要窗口和底层2张图片，通过设置底层图片z轴深度，结合手机传感器，旋转手机时实现窗口望向底层图片的景深效果。
注意：使用视差动效时，wallpaper目录下默认壁纸需为纯色图片；在云主题中与缩放视差不可以紧挨着排列，即索引不能相接，中间必须有别的主题否则会有动效失效的情况，建议同一云主题不要同时含有这两种动效的主题。
场景举例
通过摇晃手机，可体验立体的视觉效果，比如：
- 窗口外的场景。
- 山洞外的场景。
- 门口外的场景。
- 自然，人工建筑外的场景。
XML规范
xxxxxxxxxx<WindowParallax posZ=""> <!--底层图片--> <LayerInfo src="" x="" y="" w="" h=""/> <!--窗口图片--> <LayerInfo src="" x="" y="" w="" h=""/></WindowParallax>| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| posZ | 数值 | 选填 | 2层图片z值坐标，例如：“-3;-1.5”，第一个数值-3表示底层图片z值， 第二个数值-1.5表示上层图片z值，以“;”分隔。每层z值取值范围为（-5~0）， 数值越小，底层距离屏幕越远，随手机晃动幅度越大，0表示不移动。默认值为“-3;0”。 |
| 参 数（LayerInfo） | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| src | 字符串 | 必填 | 输入图片的名称。 |
| x | 数值 | 选填 | 图片相对于屏幕左上角的x坐标，单位为px，默认为0。 |
| y | 数值 | 选填 | 图片相对于屏幕左上角的y坐标，单位为px，默认为0。 |
| w | 数值 | 必填 | 图片显示在屏幕上的宽，单位为px，支持表达式。 |
| h | 数值 | 必填 | 图片显示在屏幕上的高，单位为px，支持表达式。 |
效果和代码展示
该示例中设置背景图片beijing.png的z轴深度为-1，因背景图片产生视差效果时会有上下左右的偏移，所以背景图片大小需超过屏幕大小。在晃动手机时有从窗口转换视角看向底层图片效果。
xxxxxxxxxx<!--窗口视差--> <WindowParallax posZ="-1;-1.5"> <LayerInfo src="beijing.png" x="0" y="0" w="#screen_width*1.1" h="#screen_height*1.1"/><!--底层图片--> <LayerInfo src="tupian.png" x="0" y="0" w="#screen_width" h="#screen_height"/><!--窗口图片--> </WindowParallax><!--窗口视差尾-->
缩放视差-ScaleParallax
动效概述
缩放视差动效需要3层图片，与传感器结合，左右晃动手机时呈现视差效果。最底层图片随手机晃动呈中心旋转效果，中间与上层图根据设置的缩放与偏移参数晃动。
注意：wallpaper目录下默认壁纸需为纯色图片；在云主题中与窗口视差不可以紧挨着排列，即索引不能相接，中间必须有别的主题否则会有动效失效的情况，建议同一云主题不要同时含有这两种动效的主题。
场景举例
通过晃动手机，可使画面造成立体的感觉，比如：
- 人物固定在一个位置，晃动手机，可多角度观看人物，仿佛是3D的感觉。
- 在纯色背景中，绘制着一花瓶放置在中间，晃动手机，可给这花瓶产生多角度观看视感。
XML规范
xxxxxxxxxx<ScaleParallax radius="" rotateRate="" translation="" scale="" blur=""> <!--底层图片--> <LayerInfo src="" x="" y="" w="" h=""/> <!--中间层图片--> <LayerInfo src="" x="" y="" w="" h=""/> <!--上层图片--> <LayerInfo src="" x="" y="" w="" h=""/></ScaleParallax>- 参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| radius | 数值 | 选填 | 底层图片可旋转部分半径，以屏幕中心为原点，半径取值范围为（0~1），默认为0.5，支持表达式。 |
| rotateRate | 数值 | 选填 | 晃动手机时背景旋转幅度系数，默认为5，支持表达式。 |
| translation | 数值 | 选填 | 中间和上层图片x轴位移幅度系数，中间层与上层以“;”分开，前一个数值表示中间层位移，第二个数值为上层图片位移。数值大于0表示向右旋转手机时图片向右移动，向左旋转手机时图片向左移动。数值小于0表示反向。默认为“1.3;-1”。 |
| scale | 数值 | 选填 | 中间和上层图片x轴缩放幅度系数，中间层与上层以“;”分开，前一个数值表示中间层缩放系数，第二个数值为上层图片缩放系数。数值大于0表示向右旋转手机时图片放大，向左旋转手机时图片缩小。数值小于0表示相反。默认为“-1.2;1.2”。 |
| blur | 数值 | 必填 | 上层图片模糊程度，取值范围为（0-24），默认为0。 |
效果和代码展示
该示例中设置旋转半径为0.5，旋转幅度系数为5，中间层位移和缩放系数分别为2和2，上层图片位移和缩放系数为-2和-2。向右旋转手机时，底层图片中间部分呈顺时针扭曲旋转，中间层图片随旋转角度增加而向右偏移并放大，上层图片随角度增大向左偏移并缩小。向左旋转手机时，底层图片中间部分呈逆时针扭曲旋转，中间层图片随旋转角度增加而向左偏移并缩小，上层图片随角度增大向右偏移并增大。
xxxxxxxxxx <!--缩放视差尾--> <ScaleParallax radius="0.5" rotateRate="5" translation="2;-2" scale="2;-2" blur="3"> <LayerInfo src="beijing.png" x="0" y="0" w="#screen_width*1.1" h="#screen_height*1.1"/><!--底层图片--> <LayerInfo src="tupian.png" x="0" y="0" w="#screen_width" h="#screen_height"/><!--中间图片--> <LayerInfo src="tupian2.png" x="0" y="0" w="#screen_width*1.1" h="#screen_height*1.1"/><!--上层图片--> </ScaleParallax><!--缩放视差尾-->
性能优化
制作主题时，除视觉效果外，还需考虑性能优化，以提供流畅的使用体验。
以下为一些性能优化经验，供您参考：
- 性能优化建议：提供脚本规模、文本视图、图片资源、视频/帧动画、变量定义、动画设计、命令触发等方面的性能优化建议。
- 锁屏设置异步加载：制作锁屏动效时，在某些在某些特定场景下，可考虑使用异步加载。
性能优化建议
脚本规模
xml脚本行数建议不要超过2000行。脚本量过大，加载解析所用时间可能过长，在CPU资源不足的情况下有可能出现亮屏时黑屏的情况。
文本视图
部分情况下，使用文本替代图片。例如：展示步数值时，用文本替代图片。
图片资源
动效中，单张图片尽可能小，大小不要超过1M。
在清晰度可行的条件下，不带透明像素的图片，建议使用jpg格式代替png格式。
图片尺寸尽量与显示尺寸一致：图片的尺寸不要大于显示的尺寸，即尺寸设计为可以看到的大小。
正确示例：要显示的尺寸为400400px，则图片建议设计为400400px，不建议设计为800*800px。
视频/帧动画
尽量少用全屏帧动画，可使用视频-Video或者动态图片-APNG替代，或者将不需要动的部分抽取出来用静态图展示，需要动的部分制作为帧动画。
使用视频时，为避免视频加载中出现黑屏问题，需配置一个image在视频加载完成前显示，图片为视频第一帧，以实现比较平滑的过渡效果。注意图片的位置和适配方式与视频保持一致，否则会出现首帧图片跳帧的问题。
xxxxxxxxxx<Image x="0" y="#h" w="1080*#ratio" h="#ratio*2536" visibility="eq(#bg_id,0)" src="bg_0.png" alignV="bottom"/><Video name="red" x="0" y="#h" w="1080*#ratio" h="#ratio*2536" visibility="eq(#bg_id,0)" src="red.mp4" sound="0" play="true" looping="true"/>视频被覆盖状态下不会停止播放，隐藏时才会停止播放。如需降低功耗，在视频不需要显示时，建议手动设置visibility参数，控制视频隐藏。
正确示例：锁屏上设置视频播放，通过visibility的值隐藏当前不需要展示的视频。
xxxxxxxxxx<Video name="video" w="#w" h="#h" play="true" sound="0" looping="false" src="video.mp4" visibility="eq(#isVisibility,0)"/>帧动画被覆盖状态下不会停止播放，隐藏时才会停止播放。如需降低功耗，在视频不需要显示时，建议手动设置visibility参数，控制帧动画隐藏。
正确示例：锁屏上共设置3组帧动画，通过visibility的值隐藏当前不需要展示的帧动画。
xxxxxxxxxx<Image align="right" alignV="top" src="red/red_0.png" visibility="eq(#bg_id,0)" x="#w" y="0"><SourcesAnimation repeat="0"><Source src="red/red_0.png" time="0" /><Source src="red/red_1.png" time="40" />......<Source src="red/red_49.png" time="1960" /><Source src="red/red_50.png" time="2000" /></SourcesAnimation></Image><Image align="right" alignV="top" src="white/bai_0.png" visibility="eq(#bg_id,1)" x="#w" y="0"><SourcesAnimation repeat="0"><Source src="white/bai_0.png" time="0" /><Source src="white/bai_1.png" time="40" />......<Source src="white/bai_49.png" time="1960" /><Source src="white/bai_50.png" time="2000" /></SourcesAnimation></Image><Image align="right" alignV="top" src="black/lan_0.png" visibility="eq(#bg_id,2)" x="#w" y="0"><SourcesAnimation repeat="0"><Source src="black/lan_0.png" time="0" /><Source src="black/lan_1.png" time="40" />......<Source src="black/lan_49.png" time="1960" /><Source src="black/lan_50.png" time="2000" /></SourcesAnimation></Image>
变量定义
变量先定义后使用。
正确示例：先定义变量bl，然后再在Button中使用该变量。
xxxxxxxxxx<Var name="bl" expression="ifelse((gt(abs(#touch_begin_x-#touch_x),20)),0,(gt(abs(#touch_begin _y-#touch_y),20)),0,1)"/><Button x="112" y="683" w="162" h="154" visibility="lt(#qhid,40)"><Triggers><Trigger action="up"><IntentCommand action="android.intent.action.MAIN" package="com.tencent.mobileqq" class="com.tencent.mobileqq.activity.SplashActivity" condition="#bl"/></Trigger></Triggers></Button>不使用的变量不要定义，更不要做无意义的变量更新和赋值，减少内存和CPU的损耗。
不在亮屏或灭屏时做耗时性的变量计算，如调用
周期命令-CycleCommand或命令组-GroupCommands执行脚本，否则会引起动画卡顿。
错误示例：灭屏时调用周期命令，计算量大，耗时长，可能引起动画卡顿。
xxxxxxxxxx<ExternalCommands><Trigger action="pause"><CycleCommand frequency="1000" indexFlag="col"><VariableCommand name="find" type="number[]" index="#col" expression="#col"/></CycleCommand></Trigger></ExternalCommands>刷新频率较高的变量（如时间变量time/second、步数变量steps_value等）不要做持久化，否则可能有一定延迟，造成数据更新不及时。
正确示例：步数变量steps_value未开启持久化，直接读取数据源的值。
xxxxxxxxxx<Image w="130" h="130" pivotX="65" pivotY="65" rotation="#steps_value/10000" src="step_tu.png"/>错误示例1：变量step，设置persist="true"，开启持久化，将优先读取本地同名变量的值，而非直接读取数据源的值，前者可能有一定延迟，造成数据更新不及时。详见自定义变量的persist参数说明。
xxxxxxxxxx<Var name="step" expression="#steps_value" persist="true"/><Image w="130" h="130" pivotX="65" pivotY="65" rotation="#step/10000" src="step_tu.png"/>不重复使用表达式，以减少计算量。
正确示例：先定义变量ratio的计算表达式ratio=max(1,#h/2536)，后直接引用变量ratio的值。
xxxxxxxxxx<Var expression="max(1,#h/2536)" name="ratio"/><Video name="red" y="#h-#ratio*2536" x="0" w="1080*#ratio" visibility="eq(#bg_id,0)" src="red.mp4" h="#ratio*2536" sound="0" play="true" looping="true"/><Video name="white" y="#h-#ratio*2536" x="0" w="1080*#ratio" visibility="eq(#bg_id,1)" src="white.mp4" h="#ratio*2536" sound="0" play="true" looping="true"/><Video name="black" y="#h-#ratio*2536" x="0" w="1080*#ratio" visibility="eq(#bg_id,2)" src="black.mp4" h="#ratio*2536" sound="0" play="true" looping="true"/>错误示例：重复使用表达式max(1,#h/2536)，多次重复计算，增加内存损耗。
xxxxxxxxxx<Video name="red" y="#h-(max(1,#h/2536))*2536" x="0" w="1080*(max(1,#h/2536))" visibility="eq(#bg_id,0)" src="red.mp4" h="(max(1,#h/2536))*2536" sound="0" play="true" looping="true"/><Video name="white" y="#h-(max(1,#h/2536))*2536" x="0" w="1080*(max(1,#h/2536))" visibility="eq(#bg_id,1)" src="white.mp4" h="(max(1,#h/2536))*2536" sound="0" play="true" looping="true"/><Video name="black" y="#h-(max(1,#h/2536))*2536" x="0" w="1080*(max(1,#h/2536))" visibility="eq(#bg_id,2)" src="black.mp4" h="(max(1,#h/2536))*2536" sound="0" play="true" looping="true"/>
动画设计
1.利用单张图片实现基础动画，或者变量动画代替帧动画。
正确示例：四种基础动画在场景或者画面的过渡中使用。
xxxxxxxxxx<Image x="" y="" centerX="" centerY="" src=""> <AlphaAnimation delay="" repeat=""> <Alpha a="" time="" /> </AlphaAnimation> <RotationAnimation delay="" repeat=""> <Rotation angle="" time=""/> </RotationAnimation> <PositionAnimation delay="" repeat=""> <Position x="" y="" time=""/> </PositionAnimation> <SizeAnimation delay="" repeat=""> <Size w="" h="" time=""/> </SizeAnimation> </Image>正确示例：变量动画使用。
xxxxxxxxxx<Var name="weiyi1"> <VariableAnimation delay="2000"> <AniFrame value="0" time="0" /> <AniFrame value="-1200" time="4500" /> <AniFrame value="-2900" time="9200" /> </VariableAnimation></Var><!--图片的实时位置，x随着时间变化而变化，y随着位置的变化而变化。--><Image x="abs(100+sin(#time/1553)*100)" y="#sh+301+#weiyi1" src="1.png" />- 画面切换时添加过渡动画，提升用户体验。
正确示例：滑动切换图片，两层图片透明度变化，上层图渐变消失，底部图片渐变出现。
xxxxxxxxxx // 根据变量scalevalue的值设置两个图片的透明度 <Group> <Image x="261" y="1479*#ratio" src="cameras/style1/b.png" alpha="(abs(#scalevalue))*255" srcid="3-(#camera_type+1)%4" /> <Image x="261" y="1479*#ratio" src="cameras/style1/b.png" alpha="(1-abs(#scalevalue))*255" srcid="3-#camera_type" /> </Group> <Var name="base" expression="0"/> <Var name="move" expression="ifelse(eq(#isCameraArea,1),#touch_x-#touch_begin_x,0)"/> <Var name="temp" expression="#base+#move"/> <Var name="maxvalue" expression="200*#screen_width/1080"/> <Var name="value" expression="ifelse(lt(#temp,-#maxvalue),-#maxvalue,gt(#temp,#maxvalue),#maxvalue,#temp)"/> <Var name="scalevalue" expression="#value/#maxvalue"/> // 手指触摸滑动时，改变变量的值,抬起时，根据当前滑动的距离，切换到相应的状态 <Var name="scalevalue"> <VariableAnimation repeat="1"> <AniFrame value="#tempValue" time="0" varSpeedFlag="QuartFun_Out" /> <AniFrame value="#target_value" time="200" /> </VariableAnimation> </Var> <Button h="800" w="800" x="261" y="1479*#ratio"> <Triggers> <Trigger action="down"> <VariableCommand name="isCameraArea" expression="1"/> <Command target="scalevalue.animation" value="stop" /> </Trigger> <Trigger action="up"> <VariableCommand name="camera_type" expression="(#camera_type+1)%4" condition="gt(abs(#value),50)"/> <VariableCommand name="value" expression="0"/> <VariableCommand name="base" expression="#value"/> <VariableCommand name="move" expression="0" /> <VariableCommand name="scalevalue" expression="0" /> <VariableCommand name="isCameraArea" expression="0" /> </Trigger> </Triggers> </Button>命令触发
- 当变量的值超过阈值时，触发命令（详见自定义变量的threshold参数说明），此时不要使用变化频率过高的全局变量（例：全局变量time/second）为变量赋值，否则将频繁触发命令，造成卡顿，无响应。
错误示例：定义一个变量kongzhi111，引用全局变量time（当前时间毫秒值）为其赋值，同时变量kongzhi111的值超过阈值1时，触发执行trigger中的多条复杂命令：给一系列变量进行运算和赋值。由于全局变量time的值变化频率高，频繁超过阈值1，导致trigger中的多条复杂命令执行频率高，造成卡顿，无响应的情况。
xxxxxxxxxx <Var name="kongzhi111" expression="#time" threshold="1" persist="true"> <Trigger> <VariableCommand expression="eq((#year%4),0)*ne((#year%100),0)+eq((#year%400),0)" name="lya1" /> <VariableCommand name="yearAlready" expression="365+#lya1-#year_datejj1-1"/> <VariableCommand expression="ifelse(lt(#set_m,#month+1),#year+1,eq(#set_m,#month+1)*le(#set_r,#date),#year+1,#year)" name="y2" /> <VariableCommand expression="eq((#y2%4),0)*ne((#y2%100),0)+eq((#y2%400),0)" name="lyz2" /> <VariableCommand name="ling0" expression="int(#cz_zd*24+#hour)" /> <VariableCommand name="ling1" expression="int(#cz_zd*24*60+#hour*60+#minute)" /> <VariableCommand name="ling2" expression="int(#cz_zd*24*60*60+#hour*60*60+#minute*60+#mm1)" /> </Trigger> </Var>
创意场景
趣味按压
动效概述
按压屏幕的某个位置超过一定时间，在该位置对动画进行展开播放，松手时会停止/倒放。
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" vibrate="false" displayDesktop="true" screenWidth="1080" id="" ><Var name="notification" expression="1"/><Var name="isdaytime" expression="ifelse(ge(#hour,6),ifelse(lt(#hour,18),1,0),0)"/><Var name="isnight" expression="ifelse(lt(#hour,6),1,ifelse(ge(#hour,18),1,0))"/> <Var name="asdf1" expression="int(#time/30)" threshold="1" > <Trigger> <VariableCommand name="huaid" expression="ifelse(lt(#huaid,56),#huaid+1,56)" condition="eq(#show,1)"/> <VariableCommand name="huaid" expression="ifelse(le(#huaid%57,1),1,#huaid-1)" condition="eq(#show,0)"/> </Trigger> </Var> <!-- 预览图 --><!-- 正式壁纸，会遮住预览图 --><Image w="1080" h="2640" src="bj.jpg"/><Video name="vv" x="0" y="0" w="1080" h="2640" src="sp1.mp4" defaultBitmap="bj.jpg" looping="true" play="true"/><Image x="4" y="332" src="hua/hua.png" srcid="#huaid%57"/><Group y="-30"><Group visibility="eq(#sj,0)"><Time x="540" y="214" align="center" alignV="center" src="time.png" /><Group x="160" y="80" > <Image x="200" y="230" srcid="#year/1000" src="date.png"/> <Image x="200+20" y="230" srcid="#year/100%10" src="date.png"/> <Image x="200+40" y="230" srcid="#year%100/10" src="date.png"/> <Image x="200+60" y="230" srcid="#year%10" src="date.png"/> <Image x="200+80" y="230" src="date_dot.png"/> <Image x="200+100" y="230" src="date.png" srcid="(#month+1)/10"/> <Image x="200+120" y="230" src="date.png" srcid="(#month+1)%10"/> <Image x="200+140" y="230" src="date_dot.png"/> <Image x="200+160" y="230" src="date.png" srcid="#date/10"/> <Image x="200+180" y="230" src="date.png" srcid="#date%10"/> <Image x="200+250" y="230-2" src="week.png" srcid="#day_of_week"/></Group></Group><Image x="1001" y="853" src="kg.png" visibility="eq(#gn,0)"/><!-- 萤火 --><Group visibility="eq(#yh,1)"><Image x="17" y="#screen_height" w="200" h="200" alignV="center" align="center" src="yh1.png"><PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="-30" y="-60" time="1000"/> <Position x="0" y="-180" time="2000"/> <Position x="30" y="-240" time="3000"/> <Position x="0" y="-300" time="4000"/> </PositionAnimation><AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="500"/> <Alpha a="0" time="4000"/></AlphaAnimation> </Image><Image x="228" y="#screen_height" w="250" h="250" alignV="center" align="center" src="yh1.png"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="30" y="-70" time="1000"/> <Position x="0" y="-140" time="2000"/> <Position x="-30" y="-210" time="3000"/> <Position x="0" y="-280" time="4000"/> <Position x="30" y="-320" time="5000"/> </PositionAnimation> <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="500"/> <Alpha a="0" time="5000"/> </AlphaAnimation> </Image><Image x="562" y="#screen_height" alignV="center" align="center" src="yh1.png"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="30" y="-50" time="600"/> <Position x="0" y="-100" time="1200"/> <Position x="-30" y="-150" time="1800"/> <Position x="0" y="-200" time="2400"/> <Position x="0" y="-250" time="3000"/> <Position x="30" y="-300" time="3600"/> <Position x="0" y="-350" time="4200"/> <Position x="-30" y="-400" time="4800"/> <Position x="0" y="-450" time="5400"/> </PositionAnimation> <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="500"/> <Alpha a="0" time="5400"/> </AlphaAnimation> </Image><Image x="762" y="#screen_height+200" w="250" h="250" alignV="center" align="center" src="yh1.png"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="50" y="0" time="1000"/> <Position x="80" y="-150" time="2500"/> <Position x="0" y="-300" time="4000"/> <Position x="50" y="-450" time="5500"/> <Position x="0" y="-600" time="7000"/> <Position x="0" y="-750" time="8500"/> </PositionAnimation> <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="200" time="1500"/> <Alpha a="0" time="8500"/> </AlphaAnimation> </Image><Image x="980" y="#screen_height+400" alignV="center" align="center" src="yh1.png"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="0" y="0" time="2000"/> <Position x="-30" y="-200" time="4000"/> <Position x="0" y="-400" time="6000"/> <Position x="50" y="-600" time="8000"/> <Position x="0" y="-800" time="10000"/> <Position x="0" y="-1000" time="12000"/> </PositionAnimation> <AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="200" time="2000"/> <Alpha a="0" time="12000"/> </AlphaAnimation> </Image><Image x="817" y="#screen_height+100" alignV="center" align="center" src="yh2.png"><PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="20" y="-100" time="1500"/> <Position x="0" y="-200" time="3000"/> <Position x="40" y="-300" time="4500"/> <Position x="0" y="-400" time="6000"/> </PositionAnimation><AlphaAnimation> <Alpha a="0" time="0"/> <Alpha a="255" time="500"/> <Alpha a="0" time="6000"/></AlphaAnimation> </Image><Image x="360" y="#screen_height+150" alignV="center" align="center" src="yh2.png"><PositionAnimation> <Position x="0" y="0" time="1000"/> <Position x="-25" y="-110" time="2500"/> <Position x="0" y="-220" time="4000"/> <Position x="25" y="-330" time="5500"/> <Position x="0" y="-440" time="7000"/> </PositionAnimation><AlphaAnimation> <Alpha a="0" time="1000"/> <Alpha a="255" time="1500"/> <Alpha a="0" time="7000"/></AlphaAnimation> </Image></Group><Group visibility="eq(#lx,0)"><Image x="600" y="-200" w="130" h="130" src="lx.png"> <PositionAnimation> <Position x="0" y="0" time="1000"/> <Position x="-1000" y="1000" time="3000"/> </PositionAnimation></Image><Image x="1080" y="-374" src="lx.png"> <PositionAnimation> <Position x="0" y="0" time="0"/> <Position x="-1200" y="1200" time="2500"/> </PositionAnimation></Image><Image x="1180" y="-300" w="320" h="320" src="lx.png"> <PositionAnimation> <Position x="0" y="0" time="500"/> <Position x="-1400" y="1400" time="3200"/> </PositionAnimation> <AlphaAnimation> <Alpha a="0" time="500"/> <Alpha a="255" time="1300"/> <Alpha a="0" time="1600"/> <Alpha a="0" time="2600"/> <Alpha a="255" time="3200"/> </AlphaAnimation> </Image></Group></Group><!-- 按压视频 --><Button w="#screen_width" h="#screen_height" longTouchTime="7000" visibility="eq(#gn,0)"><!--按下时图片不显示，开始播放视频--><Trigger action="down"> <!-- <Command target="vv.visibility" value="true" /> --><!-- <VideoCommand name="vv" play="true" /> --> <VariableCommand name="show" expression="1"/></Trigger><!--抬起时显示图片，停止视频--><Trigger action="up"> <VariableCommand name="show" expression="0"/> <!-- <Command target="vv.visibility" value="false" /> --><!-- <VideoCommand name="vv" play="false" /> --></Trigger></Button><Group visibility="eq(#gn,1)"><!-- 点击空白区关闭 --><Button x="0" y="0" w="1080" h="500"> <Triggers> <Trigger action="up"> <VariableCommand name="gn" expression="0" persist="true"/> </Trigger> </Triggers></Button><Button x="0" y="1500" w="1080" h="1140"> <Triggers> <Trigger action="up"> <VariableCommand name="gn" expression="0" persist="true"/> </Trigger> </Triggers></Button></Group></Lockscreen>
双粒子互动
动效概述
A区域或者物体可以影响B区域或者物体的状态。比如点击A，可以引起B爆炸。
素材准备
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" id="201706169895" xsdVersion="1" ><!--初始化--> <Var name="move_final_x" expression="0"/> <Var name="move_final_y" expression="0"/> <Var name="temp_y" expression="0"/> <Var name="temp_y" expression="0"/> <Var name="touch_x" expression="400"/> <Var name="touch_y" expression="100"/> <Var name="touch_xx" expression="600"/> <Var name="touch_yy" expression="300"/> <!--手指滑动屏幕时根据手指所在x坐标计算时间rotationY值和猫咪眼睛的x轴位移值--> <Var name="move_x" expression="#touch_x-#touch_begin_x" threshold="1" ><Trigger> <!--通过condition控制当手指落在时间图片附近时触发时间图片的旋转，expression中对touchx_xx值做左右最大值限制--> <VariableCommand name="touch_xx" expression="ifelse(le(#touch_x,100),100,ge(#touch_x,900),900,#touch_x)" condition="ge(#touch_x,100)*le(#touch_x,900)*ge(#touch_y,200)*le(#touch_y,600)"/> <!--临时变量，计算猫眼睛随手指移动后坐标值，其中500为猫眼睛向左偏移和向右偏移的临界点x轴坐标值，0.3位移动幅度系数--> <VariableCommand name="temp_x" expression="#move_final_x+(#touch_x-500)*0.3"/> <!--对猫眼睛移动范围做限定，计算猫眼睛最终随手指移动的值--> <VariableCommand name="move_final_x" expression="ifelse(le(#temp_x,-100),-100,gt(#temp_x,100),100,#temp_x"/> </Trigger> </Var><!--手指滑动屏幕时根据手指所在y坐标计算时间rotationX值和猫咪眼睛的y轴位移值。与x轴坐标计算同理--> <Var name="move_y" expression="#touch_y-#touch_begin_y" threshold="1" > <Trigger> <VariableCommand name="touch_yy" expression="ifelse(le(#touch_y,200),200,ge(#touch_y,600),600,#touch_y)" condition="ge(#touch_x,100)*le(#touch_x,900)*ge(#touch_y,200)*le(#touch_y,600)"/> <VariableCommand name="temp_y" expression="#move_final_y+(#touch_y-950)*0.3"/> <VariableCommand name="move_final_y" expression="ifelse(le(#temp_y,-50),-50,gt(#temp_y,110),110,#temp_y)"/> </Trigger> </Var> <!--背景--> <Rectangle x="0" y="0" w="#screen_width" h="#screen_height" fillColor="#ffffff"/> <!--猫咪眼睛--> <Group x="#move_final_x" y="620+#move_final_y"> <Image src="lefteye.png" x="280" y="250" w="150" h="150"/> <Image src="righteye.png" x="630" y="250" w="150" h="150"/> </Group> <!--猫--> <Image src="cat.png" x="0" y="500" w="#screen_width" h="1080*#screen_width/734"/> <!--时间，设置旋转中心pivotX和pivotY（以Time的x,y为相对坐标原点），touchY的变化控制图片X轴旋转角度，touchX的变化控制图片Y轴旋转角度--> <Time src="time.png" space="20" x="150" y="300" pivotX="400" pivotY="100" rotationX="-(#touch_yy-400)*0.1" rotationY="(#touch_xx-#screen_width/2)*0.05"/> <!--鱼，图片位置随手指落点移动--> <Image src="fish.png" x="#touch_x-100" y="#touch_y-100" w="300" h="300"/> <Button w="#screen_width" h="#screen_height"> <Trigger action="double"> <ExternCommand command="unlock"/> </Trigger> </Button></Lockscreen>
VR全景
动效概述
根据手动或传感器方式改变锁屏壁纸视角，实现全景图片的360度全景功能。
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" ><Var name="bb" expression="0"/><VR src="vr.jpg" srcid="#bb"/><Text x="50" y="300" align="left" alignV="top" color="#3607f2" size="50" text="VR全景图展示" /><Button x="0" y="0" w="1080" h="600"> <Triggers> <Trigger action="down"> <VariableCommand name="bb" expression="#bb+1"/> </Trigger> </Triggers></Button></Lockscreen>
穿越动效
动效概述 通过长按或者点击的交互方式，来实现左右浏览或者调节图层远近，实现多个图层叠加的立体效果。
效果和代码展示
xxxxxxxxxx<MultiLayer gravityX="-#x_gra" gravityY="#y_gra" pitchAngle="15,-15" sidesAngle="8,-8" touchType="#touchtype" stepX="#stepX" stepZ="#step" > <!--远处的图层--> <Layer x="(589-435+ 85)*((10-#c12)/3)-#w/(6/(7-#c12))" y="(#qh+584)*((10-#c12)/3)-#h/(6/(7-#c12))" z="#c12" w="975*((10-#c12)/3)" h="1200*((10-#c12)/3)" src="c12.png"/> <!--中间的图层--> <Layer x="(589-435+ 200)*((10-#c11)/3)-#w/(6/(7-#c11))" y="(#qh+513)*((10-#c11)/3)-#h/(6/(7-#c11))" z="#c11" w="825*((10-#c11)/3)" h="924*((10-#c11)/3)" src="c11.png"/> <!--近处的图层--> <Layer x="(442-435+ 200)*((10-#c10)/3)-#w/(6/(7-#c10))" y="(#qh+518)*((10-#c10)/3)-#h/(6/(7-#c10))" z="#c10" w="1034*((10-#c10)/3)" h="900*((10-#c10)/3)" src="c10_1.png"> <Source frame="c10_1.png" time="0"/> <Source frame="c10_2.png" time="50"/> <Source frame="c10_3.png" time="100"/> <Source frame="c10_4.png" time="150"/> <Source frame="c10_5.png" time="200"/> <Source frame="c10_6.png" time="250"/> <Source frame="c10_7.png" time="300"/> <Source frame="c10_8.png" time="350"/> <Source frame="c10_9.png" time="400"/> <Source frame="c10_10.png" time="450"/> <Source frame="c10_11.png" time="500"/> <Source frame="c10_12.png" time="550"/> <Source frame="c10_13.png" time="600"/> <Source frame="c10_14.png" time="650"/> <Source frame="c10_15.png" time="700"/> <Source frame="c10_16.png" time="750"/> <Source frame="c10_17.png" time="800"/> <Source frame="c10_18.png" time="850"/> <Source frame="c10_19.png" time="900"/> <Source frame="c10_20.png" time="950"/> <Source frame="c10_21.png" time="1000"/> <Source frame="c10_22.png" time="1050"/> <Source frame="c10_23.png" time="1100"/> <Source frame="c10_24.png" time="1150"/> <Source frame="c10_25.png" time="1200"/> <Source frame="c10_26.png" time="1250"/> </Layer></MultiLayer>
重力感应
动效概述 通过转动手机改变锁屏壁纸的视角。
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="60" displayDesktop="true" screenWidth="1080"><!-- 加速传感器，可见性变量 --> <VariableBinders> <SensorBinder type="accelerometer"> <Variable name="x_1" index="0"/> <Variable name="y_1" index="1"/> </SensorBinder> </VariableBinders> <!-- 星星背景引用加速传感器X轴方向，即左右转动手机，星星背景发生变化 --> <Image x="#screen_width/2-(#x_1)*30" y="#screen_height/2" align="center" alignV="center" src="xx.jpg" visibility="eq(#dt,1)"/> <!-- 小星球引用加速传感器X轴Y轴方向，即上下左右转动手机，小星球发生变化 --> <Image x="#screen_width/2+(#x_1)*20" y="#screen_height/2-(#y_1)*10" align="center" alignV="center" src="xxq01.png" visibility="eq(#dt,1)"> <SizeAnimation> <Size w="1152" h="1920" time="0"/> <Size w="1440" h="2400" time="900"/> <Size w="1440" h="2400" time="15000"/> </SizeAnimation> </Image> <Image x="#screen_width/2+(#x_1)*10" y="#screen_height/2-(#y_1)*5" align="center" alignV="center" src="xxq02.png" visibility="eq(#dt,1)"> <SizeAnimation> <Size w="1152" h="1920" time="0"/> <Size w="1440" h="2400" time="900"/> <Size w="1440" h="2400" time="15000"/> </SizeAnimation> </Image><!--上滑解锁--> <Button x="0" y="0" w="#screen_width" h="#screen_height" visibility="eq(#stapp,1)"> <Triggers> <Trigger action="up"> <ExternCommand command="unlock" condition="gt(#touch_begin_y-#touch_y,260)"/> </Trigger> </Triggers> </Button> </Lockscreen>
摇一摇
动效概述 摇一摇触发手机动效，同时通过#shake变量控制动画的可见性。
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" vibrate="true"> <Var name="w" expression="#screen_width" persist="true" const="true" /> <Var name="h" expression="#screen_height" persist="true" const="true" /> <Var name="qh" expression="(#screen_height-2400)/2" persist="true" const="true" /> <Var name="shake_rec" expression="ifelse(ge(#shake,1),1,0)"/> <ExternalCommands> <!--灭屏--> <Trigger action="resume"> <VariableCommand name="cheng" expression="ifelse(ge(#cheng,2),0,#cheng+1)" condition="eq(#random_wallpaper,1)*eq(#chengyi2,1)" /> <VariableCommand name="cheng" expression="2" condition="eq(#chengyi2,0)" /> <VariableCommand name="shake_rec" expression="0"/> <Command target="anim_3.animation" value="stop" condition="eq(#cheng,2)*eq(#auto_play,0)"/> </Trigger> <!--亮屏--> <Trigger action="pause"> <VariableCommand name="shake_rec" expression="0"/> <VariableCommand name="flag" expression="0"/> </Trigger> </ExternalCommands> <Var name="vibrate" expression="0"/> <VariableBinders> <!--摇一摇触发--> <SensorBinder type="accelerometer" vibrate="#vibrate" shakeTime="1000" delay="640"> <Variable name="x_acc" index="0"/> </SensorBinder> </VariableBinders> <Var name="shake_record" expression="#shake" threshold="1"> <Trigger> <!-- #shake_rec≥1且#auto_play≥0时，则执行变量赋值命令 --> <VariableCommand name="flag" expression="#flag+1" condition="eq(#shake_rec,1)*eq(#auto_play,0)"/> <Command target="anim_3.animation" value="play" condition="eq(#shake_rec,1)*eq(#cheng,2)*eq(#flag,1)*eq(#auto_play,0)" /> <!-- #shake_rec≥1且#auto_play≥0时，则延时3210ms后执行变量赋值命令--> <VariableCommand name="shake_rec" expression="0" delay="3210" condition="eq(#shake_rec,1)*eq(#flag,1)" /> <!-- #shake_rec≥1且#flag≥1时，则延时3500ms后执行变量赋值命令--> <VariableCommand name="flag" expression="0" condition="eq(#shake_rec,1)*eq(#flag,1)" delay="3500"/> </Trigger> </Var> <Image name="anim_3" x="#w/2" y="#h/2" align="center" alignV="center" src="1_0.jpg" visibility="eq(#cheng,2)"> <SourcesAnimation repeat="1"> <Source src="1_0.jpg" time="0"/> <Source src="1_1.jpg" time="50"/> <Source src="1_2.jpg" time="100"/> <Source src="1_3.jpg" time="150"/> <Source src="1_4.jpg" time="200"/> <Source src="1_5.jpg" time="250"/> <Source src="1_6.jpg" time="300"/> <Source src="1_7.jpg" time="350"/> <Source src="1_8.jpg" time="400"/> <Source src="1_9.jpg" time="450"/> <Source src="1_10.jpg" time="500"/> <Source src="1_11.jpg" time="550"/> <Source src="1_12.jpg" time="600"/> <Source src="1_13.jpg" time="650"/> <Source src="1_14.jpg" time="700"/> <Source src="1_15.jpg" time="750"/> <Source src="1_16.jpg" time="800"/> <Source src="1_17.jpg" time="850"/> <Source src="1_18.jpg" time="900"/> <Source src="1_19.jpg" time="950"/> <Source src="1_20.jpg" time="1000"/> </SourcesAnimation> </Image> <!--上滑解锁--> <Button x="0" y="0" w="1080" h="#h-400"> <Triggers> <Trigger action="up"> <ExternCommand condition="gt((#touch_begin_y-#touch_y),150)" command="unlock"/> <VariableCommand name="chengyi2" expression="1" /> </Trigger> </Triggers> </Button></Lockscreen>
时间感知
动效概述
通过主题中的多场景、全局化的时间变量，让用户感知时间的流逝。
效果和代码展示
xxxxxxxxxx <Lockscreen version="1" frameRate="60" displayDesktop="true" screenWidth="1080"> <!--上滑解锁--> <Button x="0" y="0" w="#screen_width" h="#screen_height"> <Triggers> <Trigger action="up"> <ExternCommand command="unlock" condition="gt(#touch_begin_y-#touch_y,260)"/> </Trigger> </Triggers> </Button> <ExternalCommands> <!--action通常用来接收亮屏/熄屏消息，从而执行一些命令resume表示亮屏时执行的命令，pause表示熄屏时执行的命令--> <Trigger action="resume"> <!--运用数字表达式ifelse/ge/lt与全局变量hour24结合：当时间大于上午6点和小于下午6点时，bh赋值为1，否则为0--> <VariableCommand name="bh" expression="ifelse(ge(#hour24, 6)*lt(#hour24, 18), 1, 0)" /> <!--用视频命令控制视频的播放:亮屏时，视频vw2播放--> <VideoCommand name="vw2" play="true"/> <!--当bh=1时，vw2视频为可见状态--> <Command target="vw2.visibility" value="true" condition="eq(#bh, 1)" /> <!--当bh=0时，vw2视频为不可见状态--> <Command target="vw2.visibility" value="false" condition="eq(#bh, 0)" /> <!--用视频命令控制视频的播放:亮屏时，视频vw3播放--> <VideoCommand name="vw3" play="true"/> <!--当bh=1时，vw3视频为可见状态--> <Command target="vw3.visibility" value="true" condition="eq(#bh, 0)" /> <!--当bh=0时，vw3视频为不可见状态--> <Command target="vw3.visibility" value="false" condition="eq(#bh, 1)" /> </Trigger> <!--灭屏时，视频vw2与vw3都停止播放--> <Trigger action="pause"> <VideoCommand name="vw2" play="false"/> <VideoCommand name="vw3" play="false"/> </Trigger> </ExternalCommands> <!--vw2对应的视频为2.mp4 vw3对应的视频为3.mp4--> <Video name="vw2" x="0" y="0" src="2.mp4" play="true" looping="true" scaleType="fit_width" /> <Video name="vw3" x="0" y="0" src="3.mp4" play="true" looping="true" scaleType="fit_width" /></Lockscreen>