新充电动效<EMUI11.0>-2D高级动效-HarmonyOS 4.X及以下版本主题引擎规范-主题引擎-开发教程-主题中心

动效概述

EMUI11.0及以上版本支持新充电动效。充电动效部分的资源添加在主题包unlock目录里。因引擎顺序解析导致图层的问题，xml中应依次添加锁屏资源和充电动效资源。

根据规范要求，界面必要元素为：充电动效、锁屏充电文字提示、充电图标、电量数值、超级快充文字提示、Max xxW的标签、背景蒙黑。包含充电动效的主题包，需要有对应新充电动效的锁屏预览图。

应用范围

新充电动效只支持在锁屏上使用，不支持在桌面和桌面万象小组件中使用。

场景举例

充电时手机出现炫酷的充电动效。

Video Player is loading.

Current Time 0:00

Loaded: 0%

Duration 0:00

XML规范

unlock文件夹下有一个lockscreen文件夹和一个theme.xml文件。lockscreen文件夹中包含锁屏资源和充电动效资源。

theme.xml中新增字段<item supportChargingAnim="true"/>，整体内容如下：

收起
自动换行
深色代码主题
复制
<?xml version="1.0" encoding="utf-8"?>
<HWTheme>
    <item style="slide" />
    <item package="com.huawei.ucdlockscreen" />
    <item dynamicPath="lockscreen" />
    <item minversion="2.0.24" />
    <item title-cn="华为官方主题" />
    <item title="Huawei Themes" />
    <item maxHeight="2160" />
    <item baseVersion="6.0" />
    <item engineType="HWThemeEngine" />
    <item supportChargingAnim="true"/>
</HWTheme>

支持开放的规格：

展开

界面元素	是否支持修改	规格
充电动效	支持修改充电动效；支持基于不同的初始电量区间，上传不同的充电动效；支持基于不同的充电类型上传不同的充电动效	时长：不超过9s，若超过9s或不足0s，按9s显示。
充电图标	不支持修改，见充电图标模板	模板提供图标，不能使用其他图标。
电量数值	支持修改字号，颜色	超级快充场景，显示2位小数。
超级快充文字提示	支持修改字号，颜色	非超级快充场景，不显示。
Max xxW的Tag	支持修改字号，颜色	带矩形框，功率大于40W时有放大动效。
背景	支持修改，需有透明度可看清锁屏时间	默认全屏75% #000000。

充电动效变量：

展开

参数	类型	注释
charge_anim	数值	当支持充电动效，并从非充电状态切换到充电状态时，该值为1，表示播放动效；动效播放停止，值为0 。
charge_type	字符串	充电类型，值为有线和无线。
charge_type_value	数值	根据充电类型，划分的等级，有线充电时，值为1；无线充电时，值为2。根据规范要求，为了方便处理有线和无线两种情况，划分的等级。
charge_mode	字符串	充电速率，取值为：有线普充. 有线快充. 有线超级快充. 无线普充. 无线快充. 无线超级快充。
charge_mode_value	数值	根据充电速率，划分的等级，1. 2. 3. 4. 5. 6。分别对应上面的充电速率。根据规范要求，对应的充电速率显示对应充电图标。
charge_max_power	字符串	最大充电功率，显示的值为：Max xxW，值为空时不显示。针对超级快充场景，需要手机支持才能显示（目前有线超级快充有40W，无线超级快充有27W和40W）。
charge_power_value	数值	根据充电功率，划分的等级，当功率为27W时，值为1；功率为40W时，值为2；大于40W时，值为3。根据规范要求，当值为3（即功率大于40W）时，最大功率标签需要有放大的动效。
charge_level	数值	SystemUI传输的电量值，针对超级快充，会显示2位小数。
wireless_center_X	数值	无线充电中心x轴，单位px。
wireless_center_Y	数值	无线充电中心y轴，单位px。
super_charge	字符串	超级快充，显示“超级快充”的字样。值为空时不显示。
charge_info	字符串	充电信息，显示信息为：正在(无线)充电/(无线)快速充电/(无线)超级快充 xx%。包含反向充电的信息。根据规范要求，需要充电中显示该字样。

锁屏充电交互规则

充电动效播放过程中能被用户手势（点击、滑动操作、来电）打断，打断后，动效消失，显示锁屏。
切换到大主题后，解锁后桌面不再显示原生充电动效。
从锁屏拉起输入密码界面时，会销毁锁屏引擎，所以输入密码界面不支持换肤充电动效。
其他如省电模式、应用杂志锁屏等场景，未调用锁屏引擎，均不支持换肤充电动效。

新充电动效与充电状态的区别

展开

区别点	充电状态	新充电动效
支持EMUI版本号	EMUI9.0及以上版本支持	EMUI11.0及以上版本支持
展示位置	锁屏界面的充电效果	1. 锁屏界面上的充电效果 2. 替换系统自带的充电界面
用户的使用场景	充电状态下，伴随锁屏存在	当用户在锁屏状态下插入充电器会出现新充电动效
是否替换系统自带的充电效果	否	是（通过theme.xml中新增字段<item supportChargingAnim="true"/>去控制是否替换系统自带的充电效果）
资源文件所在目录	unlock目录	unlock目录
是否支持工具制作	暂不支持	已支持
展示时长	伴随锁屏状态存在	不超过9S，默认值为9S。
支持的能力	充电状态功能可以获取当前手机四种电量状态：BatteryFull（电量充满）、Charging（正在充电）、BatteryLow（电量不足）、Normal（电量正常）。	1. 支持基于不同的初始电量区间，上传不同的充电动效；支持基于不同的充电类型上传不同的充电动效。界面必要元素为：充电动效、锁屏充电文字提示、充电图标、电量数值、超级快充文字提示. Max xxW的标签、背景蒙黑等等。 2. 相比之前的“充电状态”新充电动效不仅提供了更多的数据，而且同时支持替换系统自带的充电效果。是原有“充电状态”的增强。
详细文档介绍	动态引擎->基础功能->适配功能->充电状态<BatteryCharging>	动态引擎->2D高级动效->新充电动效<EMUI11.0>
说明新充电动效（系统充电界面+锁屏上）是在充电状态（锁屏上）的基础上进行的优化升级。建议设计师在EMUI11.0及以上的版本通过Theme Studio制作新充电动效。

效果和脚本展示

示例一：充电中显示charge_info的提示字样；区分不同的电量，显示对应的动效。使用battery_level变量来区分不同的电量；添加点击屏幕，停止动效的动作；chargeAnimTime,充电动效播放时长，值不超过9s，缺省、数值大于9s或者小于0s，该值默认为9s。

收起
自动换行
深色代码主题
复制
<Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" id="201805038062" chargeAnimTime="5">
<!-- 其他锁屏资源标签 -->
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="已充满" category="BatteryFull"/>
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="#charge_info" category="Charging"/>
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="电量不足！" category="BatteryLow"/>
<!-- 可以添加不同充电动效的背景 -->
<Image src="bj.jpg" visibility="eq(#charge_anim,1)"/>
<!-- 根据电量值，显示对应的充电动效 -->
<!-- 电池电量小于等于10% 是红色 -->
<Var name="b_a">
<VariableAnimation>
<AniFrame value="0" time="0" />
<AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_red.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<Image src="animation_red.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<Image src="animation_red.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<!-- 电池电量大于10%小于等于20% 是橙色 -->
<Var name="b_a">
<VariableAnimation>
<AniFrame value="0" time="0" />
<AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_orange.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<Image src="animation_orange.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<Image src="animation_orange.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<!-- 电池电量高于20%是绿色 -->
<Var name="b_a">
<VariableAnimation>
<AniFrame value="0" time="0" />
<AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_green.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<Image src="animation_green.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<Image src="animation_green.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<!-- 点击屏幕，停止动效 -->
<Button x="0" y="0" w="1080" h="#screen_height">
<Trigger action="up"/>
</Button>
</Lockscreen>

示例二：根据充电模式，显示对应的充电图标。根据charge_mode_value变量区分。

收起
自动换行
深色代码主题
复制
<!-- 根据充电模式，显示对应的充电图标 -->
<Image src="ic_charge_standard.png" x="400" y="1000" visibility="eq(#charge_mode_value,1)"/>
<Image src="ic_charge_quick.png" x="400" y="1000" visibility="eq(#charge_mode_value,2)"/>
<Image src="ic_charge_super_v.png" x="400" y="1000" visibility="eq(#charge_mode_value,3)"/>

示例三：显示电量值或者2位小数的电量值，显示超级快充字样。charge_level显示电量值（包含两位小数），super_charge显示“超级快充”字样，可见性根据charge_mode_value来判断。

收起
自动换行
深色代码主题
复制
<!-- 显示电量值或者2位小数的电量值，显示超级快充字样 -->
<Text text="#charge_level + '%'" size="100" x="500" y="1000" color="#aa0000" />
<Text text="#super_charge" size="50" x="#screen_width/2-100" y="1200" color="#aa0000" visibility="eq(#charge_mode_value,3)"/>

示例四：显示充电功率和矩形框，当充电功率大于40W，功率标签放大动效。根据charge_power_anim等级，显示charge_max_power最大功率（没有值时不显示），当满足条件时，功率标签有放大的动效。

收起
自动换行
深色代码主题
复制
<!-- 充电功率和矩形框 -->
<Group visibility="eq(#charge_power_value,2)">
<Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1300" color="#FFFFFF"/>
<Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0"/>
</Group>
<!-- 充电功率大于40W，功率标签放大动效 -->
<Group visibility="eq(#charge_power_value,3)">
<Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1290" color="#FFFFFF">
<SizeAnimation repeat="1">
 <Size w="200" h="100" time="0"/>
 <Size w="250" h="120" time="600"/>
 <Size w="200" h="100" time="1200"/>
</SizeAnimation>
</Text>
<Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0">
<SizeAnimation repeat="1">
 <Size w="250" h="100" time="0"/>
 <Size w="278" h="120" time="600"/>
 <Size w="250" h="100" time="1200"/>
</SizeAnimation>
</Rectangle>
</Group>

示例五：完整的充电动效和规格示例。有线和无线使用Group标签来区分。

收起
自动换行
深色代码主题
复制
<Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" id="201805038062" chargeAnimTime="5">
<!-- 其他锁屏资源标签 -->
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="已充满" category="BatteryFull"/>
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="#charge_info" category="Charging"/>
<Text x="#screen_width/2" y="350" color="#ffffff" size="50" align="center" text="电量不足！" category="BatteryLow"/>
<!-- ***********************************充电动效部分*********************************** -->
<!-- 需要添加背景，防止显示黑色屏幕。蒙黑效果可以使用不同的图片来实现。 -->
<Image src="bj.jpg" />
<!-- 根据电量值，显示对应的充电动效 -->
<!-- 电池电量小于等于10% 是红色 -->
<Var name="b_a">
<VariableAnimation>
 <AniFrame value="0" time="0" />
 <AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_red.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<Image src="animation_red.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<Image src="animation_red.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*le(#battery_level,10)"/>
<!-- 电池电量大于10%小于等于20% 是橙色 -->
<Var name="b_a">
<VariableAnimation>
 <AniFrame value="0" time="0" />
 <AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_orange.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<Image src="animation_orange.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<Image src="animation_orange.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,10)*le(#battery_level,20)"/>
<!-- 电池电量高于20%是绿色 -->
<Var name="b_a">
<VariableAnimation>
 <AniFrame value="0" time="0" />
 <AniFrame value="-1080" time="1000" />
</VariableAnimation>
</Var>
<Image src="pro_green.png" x="0" y="#screen_height" w="1080" h="#screen_height/2*#battery_level*0.01+2" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<Image src="animation_green.png" x="0+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<Image src="animation_green.png" x="1080+#b_a" y="#screen_height-#screen_height/2*#battery_level*0.01" alignV="bottom" visibility="eq(#charge_anim,1)*gt(#battery_level,20)"/>
<!-- 点击屏幕，停止动效 -->
<Button x="0" y="0" w="1080" h="#screen_height">
<Trigger action="up"/>
</Button>
<!-- ***********************************充电规格部分*********************************** -->
<!-- 充电动效，有线-->
<Group visibility="eq(#charge_anim,1)*eq(#charge_type_value,1)">
<!-- 根据充电模式，显示对应的充电图标 -->
<Image src="ic_charge_quick.png" x="400" y="1000" visibility="eq(#charge_mode_value,2)"/>
<Image src="ic_charge_standard.png" x="400" y="1000" visibility="eq(#charge_mode_value,1)"/>
<Image src="ic_charge_super_v.png" x="400" y="1000" visibility="eq(#charge_mode_value,3)"/>
<!-- 显示电量值或者2位小数的电量值，显示超级快充字样 -->
<Text text="#charge_level + '%'" size="100" x="500" y="1000" color="#aa0000" />
<Text text="#super_charge" size="50" x="#screen_width/2-100" y="1200" color="#aa0000" visibility="eq(#charge_mode_value,3)"/>
<!-- 充电功率和矩形框 -->
<Group visibility="eq(#charge_power_value,2)">
 <Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1300" color="#FFFFFF"/>
 <Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0"/>
</Group>
<!-- 充电功率大于40W，功率标签放大动效 -->
<Group visibility="eq(#charge_power_value,3)">
 <Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1290" color="#FFFFFF">
 <SizeAnimation repeat="1">
  <Size w="200" h="100" time="0"/>
  <Size w="250" h="120" time="600"/>
  <Size w="200" h="100" time="1200"/>
 </SizeAnimation>
 </Text>
 <Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0">
 <SizeAnimation repeat="1">
  <Size w="250" h="100" time="0"/>
  <Size w="278" h="120" time="600"/>
  <Size w="250" h="100" time="1200"/>
 </SizeAnimation>
 </Rectangle>
</Group>
</Group>
<!-- 充电动效，无线-->
<Group visibility="eq(#charge_anim,1)*eq(#charge_type_value,2)">
<!-- 根据充电模式，显示对应的充电图标 -->
<Image src="ic_charge_quick_wireless.png" x="400" y="1000" visibility="eq(#charge_mode_value,5)"/>
<Image src="ic_charge_standard_wireless.png" x="400" y="1000" visibility="eq(#charge_mode_value,4)"/>
<Image src="ic_charge_super_wireless.png" x="400" y="1000" visibility="eq(#charge_mode_value,6)"/>
<!-- 显示电量值或者2位小数的电量值，显示超级快充字样 -->
<Text text="#charge_level + '%'" size="100" x="500" y="1000" color="#aa0000" />
<Text text="#super_charge" size="50" x="#screen_width/2-100" y="1200" color="#aa0000" visibility="eq(#charge_mode_value,6)"/>
<!-- 充电功率和矩形框 -->
<Group visibility="eq(#charge_power_value,1)">
 <Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1300" color="#FFFFFF"/>
 <Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0"/>
</Group>
<Group visibility="eq(#charge_power_value,2)">
 <Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1300" color="#FFFFFF"/>
 <Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0"/>
</Group>
<!-- 充电功率大于40W，功率标签放大动效 -->
<Group visibility="eq(#charge_power_value,3)">
 <Text text="#charge_max_power" size="50" x="#screen_width/2-60" y="1290" color="#FFFFFF">
 <SizeAnimation repeat="1">
  <Size w="200" h="100" time="0"/>
  <Size w="250" h="120" time="600"/>
  <Size w="200" h="100" time="1200"/>
 </SizeAnimation>
 </Text>
 <Rectangle x="#screen_width/2-80" y="1290" w="250" h="100" cornerRadius="10,10" strokeColor="#FFFFFF" weight="5" alpha="0">
 <SizeAnimation repeat="1">
  <Size w="250" h="100" time="0"/>
  <Size w="278" h="120" time="600"/>
  <Size w="250" h="100" time="1200"/>
 </SizeAnimation>
 </Rectangle>
</Group>
</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>
</Lockscreen>