发布时间： 2015-07-02 12:31
[size=16.0000pt]由于官方wiki的原因，有些特性主题组可能出于稳定性的考虑没有加入进来，或是其他原因吧，总之让我等小白看到一些官方代码的用法有些陌生，难免局促。况且有些新特性也解决了我们在我们的代码里变相实现的问题，精简了结构，提升了效率，所以有必要学习一下[size=16.0000pt]。[size=16.0000pt]受能力所限，我只是将我看到的一些百变框架里的新东西，加上我的理解和解释写出来，很不全面，也不能保证其理解的准确性，姑且抛砖引玉吧[size=16.0000pt]。[size=16.0000pt]也希望大家用的时候能多验证一下，对于本篇内容还望批评斧正，多交流，共同进步！[size=16.0000pt]好多内容都是我记在笔记本上的，所以可能已经忘记在哪里看到的了。这些内容我在主题交流群中已经发过，现在贴在论坛里，只期能对一些初学者有所帮助。
[size=16.0000pt]
[size=16.0000pt]
[size=14.0000pt]1. [size=14.0000pt]文本[size=14.0000pt]color属性支持：1.常量 2.字符串变量 3.argb(A,R,G,B)函数式，其中A,R,G,B均为表达式[size=14.0000pt]。这个属性我是在主题论坛教程里看到的，具体在哪教程已经不记得了，具体例子见下面的color属性表达式代码示例。
[size=14.0000pt]
<?xml version="1.0" encoding="UTF-8"?>
<!-- color属性支持表达式示例 -->
<Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true">
<Button w="720" h="1280">
<Triggers>
<Trigger action="up">
<VariableCommand name="x1" expression="#x1-1" />
</Trigger>
<Trigger action="double">
<ExternCommand command="unlock" />
</Trigger>
</Triggers>
</Button>
<!-- 颜色变量定义 -->
<Var name="color_re" expression="'#ff0000'" type="string" />
<Var name="color_gr" expression="'#00ff00'" type="string" />
<Var name="color_bl" expression="'#0000ff'" type="string" />
<!-- 颜色变量引用示例 -->
<Text x="100" y="220" color="@color_re" size="40" textExp="'永远相信美好的事情即将发生！'"/>
<Text x="100" y="260" color="@color_gr" size="40" textExp="'永远相信美好的事情即将发生！'"/>
<Text x="100" y="300" color="@color_bl" size="40" textExp="'永远相信美好的事情即将发生！'"/>
<!-- 颜色表达式示例 -->
<Var name="x1" expression="4" const="true" />
<Var name="a1" expression="gt(#x1,0)" />
<Var name="r1" expression="gt(#x1-3,0)" />
<Var name="g1" expression="gt(#x1-2,0)" />
<Var name="b1" expression="gt(#x1-1,0)" />
<Text x="50" y="720" color="argb(255*#a1,255*#r1,255*#g1,255*#b1)" size="80" textExp="'点击屏幕切换颜色'"/>
<!--
<Text x="100" y="720" color="" size="40" textExp=""/>
<Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/>
<Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/>
<-->
</Lockscreen>
[size=14.0000pt]
[size=14.0000pt]2. [size=14.0000pt]图形代码生成目前看到的支持Rectangle（矩形），Circle（圆），Arc（圆弧），Line（直线段），具体应用实例可以研究系统更新动画部分代码，以下是我看到的上述图形的一些属性：
[size=14.0000pt]
[size=18.0000pt]l [size=18.0000pt]矩形：
[size=9.0000pt] [size=9.0000pt]
[size=14.0000pt]其中：
w：矩形宽
h：矩形高
fillColor：填色颜色
strokeColor：描边颜色
weight：描边宽度
strokeAlign：描边对齐样式只见到 inner（内部）属性，默认应该是外部对齐
cornerRadius：圆角，”x，y“ x为横向圆角半径，y为纵向圆角半径
dash：虚线，”a,b,c,d“ a为第一段直线段长度，b为第一段直线段与第二段直线段距离，c为第二段直线段长度，d为第二段直线段与下一段直线段距离，循环重复可以得到虚线段。
cap：顶点样式，默认应该是矩形，有round（圆）样式选择
Image的属性除了src外应该都支持，另外还支持颜色表达式。[size=14.0000pt]
[size=14.0000pt]
[size=14.0000pt]具体见代码示例，上述符号，大小写可能又些差异，以代码示例为准。[size=14.0000pt]
[size=14.0000pt]
<?xml version="1.0" encoding="UTF-8"?>
<!-- 代码生成矩形示例 -->
<Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true">
<Wallpaper/>
<Button w="720" h="1280">
<Triggers>
<Trigger action="up">
<VariableCommand name="x1" expression="#x1-1" />
</Trigger>
<Trigger action="double">
<ExternCommand command="unlock" />
</Trigger>
</Triggers>
</Button>
<!-- 一些代码生成矩形的效果 -->
<Rectangle x="100" y="100" w="200" h="200" fillColor="#00ff00" />
<Rectangle x="400" y="100" w="200" h="200" cornerRadius="20,20" fillColor="#00ff00" />
<Rectangle x="100" y="400" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" />
<Rectangle x="400" y="400" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner" />
<Rectangle x="100" y="700" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" />
<Rectangle x="400" y="700" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" />
<Rectangle x="50" y="1000" w="200" h="200" cornerRadius="100,100" fillColor="#00ff00" />
<Rectangle x="300" y="1000" w="400" h="200" cornerRadius="100,100" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" strokeColor="#0000ff" weight="4" dash="10,20,20,15" cap="round" strokeAlign="inner" />
<!-- 同样支持颜色表达式 -->
<Var name="x1" expression="4" const="true" />
<Var name="a1" expression="gt(#x1,0)" />
<Var name="r1" expression="gt(#x1-3,0)" />
<Var name="g1" expression="gt(#x1-2,0)" />
<Var name="b1" expression="gt(#x1-1,0)" />
<Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
<!--
<Text x="100" y="720" color="" size="40" textExp=""/>
<Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/>
<Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/>
<-->
</Lockscreen>
[size=14.0000pt]
[size=14.0000pt]
[size=18.0000pt]l [size=18.0000pt]圆：
[size=14.0000pt]<Circle x=[size=14.0000pt]”” y=”” r=”” fillColor=”” strokeColor=”” weight=”” strokeAlign=”” cap=””
[size=14.0000pt]dash=”” />
r:圆半径
其余与矩形类似，不赘述[size=14.0000pt]
[size=14.0000pt]
<?xml version="1.0" encoding="UTF-8"?>
<!-- 代码生成圆示例 -->
<Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true">
<Wallpaper/>
<Button w="720" h="1280">
<Triggers>
<Trigger action="up">
<VariableCommand name="x1" expression="#x1-1" />
</Trigger>
<Trigger action="double">
<ExternCommand command="unlock" />
</Trigger>
</Triggers>
</Button>
<!-- 一些代码生成圆的效果 -->
<Circle x="200" y="300" r="100" fillColor="#00ff00" />
<Circle x="500" y="300" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" />
<Circle x="200" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner" />
<Circle x="500" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" />
<Circle x="200" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" />
<Circle x="500" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" strokeAlign="inner" />
<Circle x="350" y="1100" r="100" fillColor="#00ff00" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" />
<!-- 同样支持颜色表达式 -->
<Var name="x1" expression="4" const="true" />
<Var name="a1" expression="gt(#x1,0)" />
<Var name="r1" expression="gt(#x1-3,0)" />
<Var name="g1" expression="gt(#x1-2,0)" />
<Var name="b1" expression="gt(#x1-1,0)" />
<Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
<!--
<Text x="100" y="720" color="" size="40" textExp=""/>
<Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/>
<Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/>
<-->
</Lockscreen>
[size=14.0000pt]
[size=14.0000pt]
[size=14.0000pt]例子与矩形类似。
[size=18.0000pt]l [size=18.0000pt]圆弧
[size=14.0000pt]<Arc [size=14.0000pt] [size=14.0000pt]x=[size=14.0000pt]”” y=”” w=”” h=”” fillColor=”” startAngle=”” sweep=”” close=”” strokeColor=”” weight=”” strokeAlign=”” cap=”” dash=”” />
w:圆弧宽度
h：圆弧高度
startAngle:圆弧起始角度顺时针为正，水平右向为0度
sweep：角度范围，顺时针为正
close：是否闭合，true为闭合，false为非闭合[size=14.0000pt]
[size=14.0000pt]
[size=14.0000pt]
<?xml version="1.0" encoding="UTF-8"?>
<!-- 代码生成圆弧示例 -->
<Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true">
<Wallpaper/>
<ExternalCommands>
<Trigger action="resume,pause">
<Command target="angle_sweep.animation" value="play" />
<VariableCommand name="x1" expression="4" />
</Trigger>
</ExternalCommands>
<Button w="720" h="1280">
<Triggers>
<Trigger action="up">
<VariableCommand name="x1" expression="#x1-1" />
</Trigger>
<Trigger action="double">
<ExternCommand command="unlock" />
</Trigger>
</Triggers>
</Button>
<!-- 一些代码生成圆弧的效果 -->
<Arc x="200" y="200" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" close="true" />
<Arc x="500" y="200" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" close="false" />
<Arc x="200" y="500" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" close="true" />
<Arc x="500" y="500" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner"close="false" />
<Arc x="200" y="800" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" close="false" cap="round" />
<Arc x="500" y="800" w="200" h="200" startAngle="-90" sweep="#angle_sweep" fillColor="#0000ff00" strokeColor="#0000ff" weight="10" close="false" />
<Arc x="350" y="1100" w="200" h="200" startAngle="-90" sweep="#angle_sweep" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" strokeColor="#000000ff" weight="10" close="true" />
<!--
<Circle x="500" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" />
<Circle x="200" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" />
<Circle x="500" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" strokeAlign="inner" />
<Circle x="350" y="1100" r="100" fillColor="#00ff00" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" />
-->
<!-- 同样支持颜色表达式 -->
<Var name="x1" expression="4" const="true" />
<Var name="a1" expression="gt(#x1,0)" />
<Var name="r1" expression="gt(#x1-3,0)" />
<Var name="g1" expression="gt(#x1-2,0)" />
<Var name="b1" expression="gt(#x1-1,0)" />
<Var name="angle_sweep" >
<VariableAnimation>
<AniFrame value="0" time="0"/>
<AniFrame value="360" time="5000"/>
<AniFrame value="-360" time="15000"/>
<AniFrame value="3600000" time="100000000000000"/>
</VariableAnimation>
</Var>
<Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
<!--
<Text x="100" y="720" color="" size="40" textExp=""/>
<Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/>
<Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/>
<-->
</Lockscreen>
[size=14.0000pt]
[size=14.0000pt]
[size=18.0000pt]l [size=18.0000pt]直线段
[size=14.0000pt]<Line x=[size=14.0000pt]”” y=”” x1=”” y1=””strokeColor=”” weight=”” />
x:起始点横坐标
y：起始点纵坐标
x1：终点横坐标
:y1：终点纵坐标
其他与上述图形属性类似[size=14.0000pt]
[size=14.0000pt]
<?xml version="1.0" encoding="UTF-8"?>
<!-- 代码生成直线段示例 -->
<Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true">
<Wallpaper/>
<Button w="720" h="1280">
<Triggers>
<Trigger action="up">
<VariableCommand name="x1" expression="#x1-1" />
</Trigger>
<Trigger action="double">
<ExternCommand command="unlock" />
</Trigger>
</Triggers>
</Button>
<!-- 一些代码生成直线段的效果 -->
<Line x="100" y="100" x1="600" y1="100" strokeColor="#00ff00" weight="5" />
<Line x="100" y="300" x1="600" y1="300" strokeColor="#00ff00" weight="5" cap="round" />
<Line x="100" y="500" x1="600" y1="500" strokeColor="#00ff00" weight="5" cap="round" dash="10,20,20,15" />
<Line x="110" y="700" x1="600" y1="700" strokeColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" weight="100" cap="round" />
<!-- 同样支持颜色表达式 -->
<Var name="x1" expression="4" const="true" />
<Var name="a1" expression="gt(#x1,0)" />
<Var name="r1" expression="gt(#x1-3,0)" />
<Var name="g1" expression="gt(#x1-2,0)" />
<Var name="b1" expression="gt(#x1-1,0)" />
<Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
<!--
<Text x="100" y="720" color="" size="40" textExp=""/>
<Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/>
<Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/>
-->
</Lockscreen>
附件有word版，代码示例和说明文件。
[size=14.0000pt]