主题文章

 > 教程

[MIUI6主题] maml代码学习笔记02

发布时间： 2015-07-02 14:31

[size=14.0000pt]3. [size=14.0000pt]组（[size=14.0000pt]Group[size=14.0000pt]）元素，属性还有[size=14.0000pt]clip=[size=14.0000pt]”true/false[size=14.0000pt]”[size=14.0000pt]裁剪，配合组的w和h[size=14.0000pt] [size=14.0000pt]使用[size=14.0000pt]。层（layered）属性，由w和h配合颜色渲染模式xfermode使用。组计算频率[size=14.0000pt]/[size=14.0000pt]组帧速（frameRate）与动态帧速（frameRateController）的关系与使用。
[size=14.0000pt]l [size=14.0000pt]裁剪（clip） 组（Group）元素支持裁剪（clip）应该是很久之前就支持了，相信很多主题设计师也在用，但我等小白找到它挺费劲，wiki上貌似没有，不过论坛上的官方教程里好像有，我记在了笔记上，忘了在哪看到的了。加入clip=“true”可以配合w和h进行裁剪，组界限以外的元素将不会显示，默认是false。具体观摩示例代码。
[size=14.0000pt]l [size=14.0000pt]层（layered） 配合颜色渲染模式xfermode，关于xfermode是android一种颜色渲染模式，
[size=14.0000pt]多种，可以参考下面的地址查看
[size=14.0000pt] http://blog.csdn.net/t12x3456/article/details/10432935

[size=14.0000pt]Src是下层图层，Dst是上层图层。具体可观摩示例代码。
[size=14.0000pt]但maml与此有些许区别，具体区别可观摩代码，有些不工作，如果读者有知道的还望能告知，谢谢！
以下为示例代码：
裁切组：

<?xml version="1.0" encoding="UTF-8"?>


<!-- 裁剪（clip）代码示例 -->


<Lockscreen  frameRate="20" screenWidth="720" showSysWallpaper="true">
        <Wallpaper/>
        <Button w="720" h="1280">
                <Triggers>

                        <Trigger action="double">
                                <ExternCommand command="unlock" />
                        </Trigger>

                </Triggers>
        </Button>
   
   
   <!-- 未开启组裁剪  -->
   <Group x="#screen_width/2" y="200" w="#screen_width/2" h="300" align="center"  clip="false" >
   
       <Circle x="#screen_width/4" y="150" r="200"   fillColor="#00ff00"   />
   
   </Group>  
   
   <Rectangle x="#screen_width/2" y="200" w="#screen_width/2" h="300" align="center"  strokeColor="#ff0000" weight="2"  />
   
   
   
   
   <!-- 开启组裁剪  -->
   <Group x="#screen_width/2" y="800" w="#screen_width/2" h="300" align="center"  clip="true" >
   
       <Circle x="#screen_width/4" y="150" r="200"   fillColor="#00ff00"   />
   
   </Group>  
   
   <Rectangle x="#screen_width/2" y="800" w="#screen_width/2" h="300" align="center"  strokeColor="#ff0000" weight="2"  />
   
   <Text x="#screen_width/2" y="740" align="center"  color="#ffffff" size="40" textExp="'开启组裁剪后（红框为组界限）'"/>
   
   
   <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>

颜色渲染模式：见附件代码演示，需要引入两个外部图片资源。

<?xml version="1.0" encoding="UTF-8"?>


<!-- 层（layered）代码示例 -->


<Lockscreen  frameRate="20" screenWidth="720" >



        <Group   layered="true"  >
                <Rectangle  w="#screen_width" h="#screen_height" fillColor="#4e342e" layered="false"  />
        </Group>
        <Button w="720" h="1280">
                <Triggers>

                        <Trigger action="double">
                                <ExternCommand command="unlock" />
                        </Trigger>

                </Triggers>
        </Button>

        <Var name="gap_x"  expression="24" const="true" />
        <Var name="gap_y"  expression="136" const="true" />

   <!-- clear  -->
        <Group x="#gap_x" y="#gap_y"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="clear" />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'clear'"/>
        </Group>
        
        <!-- src_in  -->
        <Group x="#gap_x*2+150" y="#gap_y"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="src_in"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'src_in'"/>
        </Group>
        
        <!-- dst_in  -->
   <Group x="#gap_x*3+150*2" y="#gap_y"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="dst_in"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'dst_in'"/>
        </Group>
        
        <!-- src_out  -->
        <Group x="#gap_x*4+150*3" y="#gap_y"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="src_out"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'src_out'"/>
        </Group>
        
        <!-- dst_out  -->
        <Group x="#gap_x" y="#gap_y*2+150"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="dst_out"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'dst_out'"/>
        </Group>
        
        <!-- src_atop  seems not work! -->
        <Group x="#gap_x*2+150" y="#gap_y*2+150"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="src_atop"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'src_atop'"/>
        </Group>
        
        <!-- dst_atop  -->
        <Group x="#gap_x*3+150*2" y="#gap_y*2+150"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="dst_atop"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'dst_atop'"/>
        </Group>
        
        <!-- xor  -->
        <Group x="#gap_x*4+150*3" y="#gap_y*2+150"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="xor"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'xor'"/>
        </Group>
        
        <!-- darken seems not work!  -->
        <Group x="#gap_x" y="#gap_y*3+150*2"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="darken"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'darken'"/>
        </Group>
        
        
        <!-- lighten seems not work!  -->
        <Group x="#gap_x*2+150" y="#gap_y*3+150*2"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="lighten"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'lighten'"/>
        </Group>
        
        <!-- mutiply seems not work!  -->
        <Group x="#gap_x*3+150*2" y="#gap_y*3+150*2"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="mutiply"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'mutiply'"/>
        </Group>
        
        <!-- screen  -->
        <Group x="#gap_x*4+150*3" y="#gap_y*3+150*2"  h="200"  w="200" layered="true"  >
                <Rectangle  w="150" h="150" fillColor="#00ff00"  />
                <Image  x="75" y="75" src="2.png" align="center" alignV="center"  xfermode="screen"   />
                <Text x="75" y="150" align="center"  color="#ffffff" size="40" textExp="'screen'"/>
        </Group>
        
        <Text x="360" y="1220"  align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
        <!--
        <Text x="100" y="720"   color="" size="40" textExp=""/>
        <xfermode="dst_in"
        <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]l [size=14.0000pt]帧速[size=14.0000pt]/[size=14.0000pt]计算频率（frameRate）与动态帧速（frameRateController）的关系，可能wiki上把动态帧速列为高级技术，但其实很容易使用，首先在组的属性中加入[size=14.0000pt]frameRate=””[size=14.0000pt]是指组内数据更新频率，当然受制于系统的性能，或是代码的复杂度，可能最终的数据刷新频率要小于设定值，如果不设定则组内数据的刷新频率由上一级组的刷新频率决定，阅读wiki我们看到有一个全局变量frame_rate是指当前的屏幕帧率，它表示的是当前各个组数据刷新频率的最大值，当然受制于系统性能，代码的复杂度和自身计算的误差，可能有些许差别，一般是小于等于各个组的刷新频率最大值。那么动态帧速是怎么回事，与组又有什么关系呢，将动态帧速的元素放在一个组中，则它的值将影响这个组，关系是：组内数据刷新频率等于组内动态帧速在某个时间点上的刷新值和组指定的刷新值之中的最大值。如果这个组没有指定则其将影响组外直至上一级有指定刷新频率的组为止。具体可观摩示例代码观摩，以上只是我个人的理解，不能保证正确与否，只是期望官方能尽早完善代码wiki，使我等小白不再为此纠结和胡乱猜测。
[size=14.0000pt] 帧速代码：
[size=14.0000pt]
[size=14.0000pt]

<?xml version="1.0" encoding="UTF-8"?>


<!-- 组与帧速代码示例 -->


<Lockscreen  frameRate="60" screenWidth="720" >

<!--  开关屏有个动画播放的设定，请在开屏后3秒后观摩效果  -->
       <ExternalCommands>
                <Triggers>

                        <Trigger action="resume,pause">
                                <Command target="test_ani2.animation" value="play"/>
                                <Command target="test_ani.animation" value="play"/>
                                <Command target="framerate1.animation"  value="play" />
                                <Command target="framerate2.animation"  value="play" />
                                
                        </Trigger>

                </Triggers>
        </ExternalCommands>

       <Rectangle  w="#screen_width" h="#screen_height" fillColor="#4e342e" layered="false"  />


        <FramerateController name="framerate1" loop="true">
                <ControlPoint time="0" frameRate="40"/>
                <ControlPoint time="2500" frameRate="40"/>
                <ControlPoint time="3000" frameRate="5"  />
                <ControlPoint time="100000000000000" frameRate="5"  />
        </FramerateController>


        <Button w="720" h="1280">
                <Triggers>

                        <Trigger action="double">
                                <ExternCommand command="unlock" />
                        </Trigger>

                </Triggers>
        </Button>

        <Var name="test_date1" expression="" />
        <Var name="test_ani1" >
                <VariableAnimation  >
                        <AniFrame value="0" time="0"/>
                        <AniFrame value="100000000" time="100000000"/>
                        <AniFrame value="10000000" time="100000000000"/>
                </VariableAnimation>
        </Var>




        <Group frameRate="2" >

                <Var name="test_ani2" >
                        <VariableAnimation  >
                                <AniFrame value="0" time="0"/>
                                <AniFrame value="100000000" time="100000000"/>
                                <AniFrame value="10000000" time="100000000000"/>
                        </VariableAnimation>
                </Var>

                <Text  y="280"   color="#ffffff" size="27" textExp="'文本显示在刷新率为2的组内显示组外刷新率为60的数据：  '"/>
                <Text  y="307"   color="#ffffff" size="27" textExp="#test_ani1"/>

                <FramerateController name="framerate2" loop="true">
                        <ControlPoint time="0" frameRate="40"/>
                        <ControlPoint time="2500" frameRate="40"/>
                        <ControlPoint time="3000" frameRate="2"  />
                        <ControlPoint time="100000000000000" frameRate="2"  />
                </FramerateController>

        </Group>

        <Text  y="200"   color="#ffffff" size="27" textExp="'动画在锁屏组内刷新率为60的组内：  '+#test_ani1"/>
        <Text  y="240"   color="#ffffff" size="27" textExp="'动画在指定刷新率为2的组内：  '+#test_ani2"/>

        
        
        <Button x="50" y="900" w="300" h="300" >

                <Triggers>
                        <Trigger action="up">
                                <Command target="framerate1.animation"  value="play" />
                        </Trigger>
                </Triggers>
                <Group x="50" y="900"  >
                <Rectangle  w="300" h="300" fillColor="#00ff00"  />
                <Text x="150" y="150" size="27" color="#ffffff" align="center" alignV="center" textExp="'点击启动默认组动态帧速'"  multiLine="true" width="270" />
                </Group>
                
                <Pressed>
                <Rectangle  x="50" y="900"  w="300" h="300" fillColor="#64000000"  />
                </Pressed>
                
        </Button>
        
        
        <Button x="400" y="900" w="300" h="300" >

                <Triggers>
                        <Trigger action="up">
                                <Command target="framerate2.animation"  value="play" />
                        </Trigger>
                </Triggers>
                <Group x="400" y="900"   >
                <Rectangle  w="300" h="300" fillColor="#00ff00"  />
                <Text x="150" y="150" size="27" color="#ffffff" align="center" alignV="center" textExp="'点击启动指定组动态帧速'" multiLine="true" width="270" />
                </Group>
                <Pressed>
                <Rectangle x="400" y="900" w="300" h="300" fillColor="#64000000"  />
                </Pressed>
                
        </Button>
        
        <!--  如何获取组内真实的刷新频率内 可以采用定义一个变量自加1的方法，每一秒钟获取一次，便可获取组内的刷新频率，这里你可以自己定义，不赘述  -->
    
        
        <Text x="360" y="800"  align="center" color="#ffffff" size="40" textExp="'屏幕帧速(frame_rate):     '+#frame_rate"/>
        
        <Text x="360" y="1220"  align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/>
        
</Lockscreen>

[size=14.0000pt] 

[size=14.0000pt]具体也可以观看附件文件夹里的例子。
[size=14.0000pt] 

亲，你需要登录后才能对该作品进行评论喔！

登录 立即注册

全部评论