问题:1.不会编程的小白。2.不会PS的小小白。3.爱折腾的小小小白。4.不会英文,会查字典的小小小小白。解决方法:1.安装上【MIUI主题编辑器】http://www.miui.com/thread-642823-1-1.html2.桌面上有一个【theme_name文件夹】theme_name.rar(3.36 MB, 下载次数: 1307)3.编辑theme_name/lockscreen/advance/下【manifest.xml】4.添加:<?xml version="1.0" encoding="UTF-8"?><Lockscreen screenWidth="1080" > <!--屏幕上添加一个看不到的按钮1080x1920 --> <Button name="test_btn" x="0" y="0" w="1080" h="1920"> <Triggers> <Trigger action="down"> </Trigger> <Trigger action="up"> </Trigger> <Trigger action="double"> <!--解锁--> <ExternCommand command="unlock" delay="550" /> </Trigger> </Triggers> </Button></Lockscreen>5.【保存】6. 打开【MIUI编辑器】,USB连上手机(手机端打开USB调试模式)。7.【打开】->【选择桌面上 theme_name文件夹】8.【应用到手机】9. 关屏开屏,戳“俩下”屏幕,咔,解锁了。10.完!ps.接上来,开始学MAML脚本语言,进击吧~
2015年06月05日
byMI-谢
<Var name="flag" expression="0"/> ...<Trigger><VariableCommand name="flag" expression="1" /></Trigger>这是比较常见的写法,原意是先将flag初始化为0,后面用VariableCommand将其改为1最近体验版修复一个bug后,发现这种写法可能会有问题:原因是Var在每次刷新时会重新将flag赋值为0, 因此flag的值只有一瞬间为1。要想达到原有的效果,可以在Var中加上const="true",此时Var只计算一次,之后VariableCommand的修改才会真正把flag设为1<Var name="flag" expression="0" const="true" /> ...<Trigger><VariableCommand name="flag" expression="1" /></Trigger>目前在体验版上发现此原因导致的异常有<被偷走的那5年><水果忍者>可以将其中的一些Var加上const,如<Var name="if_slide" expression="0" const="true"/> 可能还有其它地方存在问题,希望大家碰到的时候注意一下,谢谢。
2015年06月05日
byant0601
感谢大家的支持,百变锁屏自发布以来一直断续更新,虽然不算太多,到现在无论是功能还是资源跟刚发布时相比已经不可同日而语了。由于我只有小部分时间投入,一直没有做较大的新功能。最近投入了一些时间加了一些有用的功能,是时候进入2.0的新时代了,以后不出意外的话还会持续发力,加入更多更酷的新功能,完整版在线wiki教程http://wiki.dev.xiaomi.com/index.php?title=MAML%E6%95%99%E7%A8%8B新增功能:2.28音乐控件支持歌名和歌手文字分开<MusicControl name="music_control" />引用歌名: @music_control.title 引用歌手:@music_control.artist增加系统时间格式变量#time_format0: 12小时制; 1: 24小时制ContentProviderBinder uri和where支持表达式uriExp uri表达式uriFormatExp uri格式表达式whereExp where表达式whereFormatExp where格式表达式如果uriExp表达式不为空则计算uriExp表达式取得uri,如果uriExp为空但uriFormatExp不为空,则计算uriFormatExp获得格式字符串,然后用uriParas参数填充格式字符串因为原来的uriFormat只能格式化字符串和整数,如果uri需要由浮点数组成就不能满足,用uriExp的话可以用加号连接字符串和浮点数或者整数作为一个uri字符串1.22Image元素支持截取锁屏界面以下的系统界面。<Image name="homescreen" srcType="Screenshot"/>命令控制重新截屏<Command target="homescreen.animation" value="play"/>可以用来做一些效果,比如把锁屏下面的桌面从左到右拖动出现。支持接收broadcast并从中取数据name: 变量名 extra:broadcast中的extra名称,type:类型 int string double float long.支持Trigger,接收到broadcast并更新变量后可触发若干命令<VariableBinders> <BroadcastBinder name="" action=""> <Variable name="battery_level" type="int" extra="level"/> <Variable name="battery_plugged" type="int" extra="plugged"/> <Trigger> <Command target="" value=""/> </Trigger> </BroadcastBinder></VariableBinders>11.30 支持延迟解锁,可以在解锁前做一些过渡动画 <Unlocker delay="" /> delay: 毫秒11.14新增滑动及解锁控件的endpoint状态变量 < EndPoint name="end1" ...> #end1.state 0: normal 1:pressed 2:reached11.2所有元素包括Group支持旋转,缩放,3D旋转功能http://www.miui.com/thread-829033-1-1.html增加取字符串子串操作函数: substr(string,start) substr(string,start,length)string: 源字符串 start:开始位置 length:子串长度,没有指定默认取开始位置后所有字符8.24Image元素增加图片大小属性 bmp_width, bmp_height <Image name="img" src="test.png"/> #img.bmp_width #img.bmp_height Command新增功能:* Intent 触发指定的intent,同EndPoint中的Intent 可配置<IntentCommand action="" type="" category="" package="" class=""/>属性同EndPoint中的Intent * 条件Command , 增加属性 condition="表达式"* 延时Command , 增加属性 delay="表达式" (延时指定毫秒后触发)* Binder Comand,控制VariableBinder的命令,一般用作触发刷新<ContentProviderBinder name="weather">// 天气信息<BinderCommand name="weather" command="refresh"/>//触发查询天气信息content provider提供了查询应用程序信息的通用接口,并将查询到的信息绑定到变量上。<VariableBinders> <ContentProviderBinder uri="" columns=""> <Variable name="" type="" column="" row=""/> ... </ContentProviderBinder></VariableBinders>ContentProviderBinder属性:uri,columns,where,args,order 分别是查询源的地址,列,查询条件,where的参数,排序。类似SQL。uriFormat,uriParams 支持格式化的uri。countName 将查询到的记录数量绑定到该变量ContentProviderBinder支持依赖关系:<ContentProviderBinder name="name1" dependency="name2"><ContentProviderBinder name="name2">name2查询结束后会触发name1的查询,name1的查询可以使用name2的变量。Variable属性:name 变量名type 数据类型 string/double/float/int/longrow column 变量绑定到的行、列8.3图片3D旋转支持z轴高度: centerZ z轴旋转: angleZ <Image ... centerZ="250*2" angleZ="60" />增加触摸开始时间变量#touch_begin_time ,可以在Button的up事件中用来计算滑动速度v = (#touch_x - #touch_begin_x)/(#time_sys - #touch_begin_time)支持获取应用程序图标: http://www.miui.com/thread-673303-1-1.html图片新增源图片大小属性: bmp_width bmp_height<Image name="test" src="test.png"/>#test.bmp_width #test.bmp_height7.13Trigger和CommandTrigger下包含触发后执行的Command。Trigger属性:action 触发动作 用于Button: down,up,doubleCommand类型:* 系统设置 铃声:target="RingMode" value="normal,silent,vibrate" 可以指定其中的几种状态,在指定的多个状态间切换 WIFI:target="Wifi" value="" value可指定为toggle/on/off 数据:target="Data" value="" 同上 蓝牙:target="Bluetooth" value="" 同上 USB:target="UsbStorage" value="" 同上* 属性命令 * 变量赋值 同变量定义* 变量绑定 更新VariableBinder* Intent命令< IntentCommand id="" action="" type="" category="" package="" class="" name="" />* 声音命令(即将支持) volume 音量,0~1的浮点数; keepCur 是否保持当前正在播放的声音,默认false; loop 是否循环播放,默认false。所有的命令都可以额外指定以下属性:condition: 触发条件,表达式为真时触发delay: 延时触发,单位ms目前支持触发器的元素有: <!-- 按钮触发 --><Button> <Triggers> <Trigger action=""> <Command /> .... </Trigger> </Triggers></Button><!-- 解锁触发 EndPoint --><EndPoint> <Trigger> <Command /> ..... </Trigger></StartPoint><!-- 变量触发 -->详见http://www.miui.com/forum.php?mod=viewthread&tid=820336&page=1&extra=#pid17599095变量动画<Var name="ani_offset_x"> <VariableAnimation> <AniFrame value="#ani_begin_x" time="0"/> <AniFrame value="0" time="300"/> <AniFrame value="0" time="100000000000000"/> </VariableAnimation> </Var>原有的Var元素可以指定动画,值可以随时间变化支持个性化设置http://www.miui.com/thread-373229-1-1.html7.4显示音量调节#volume_level 现在音量 #volume_level_old 调节之前的音量 取值: 1-15 根据二者比较判断是增大还是减小#volume_type // STREAM_VOICE_CALL = 0; // /* The audio stream for system sounds */ // STREAM_SYSTEM = 1; // /* The audio stream for the phone ring and message alerts */ // STREAM_RING = 2; // /* The audio stream for music playback */ // STREAM_MUSIC = 3; // /* The audio stream for alarms */ // STREAM_ALARM = 4; // /* The audio stream for notifications */ // STREAM_NOTIFICATION = 5; // /* @hide The audio stream for phone calls when connected on bluetooth */ // STREAM_BLUETOOTH_SCO = 6; // /* @hide The audio stream for enforced system sounds in certain countries (e.g camera in Japan) */ // STREAM_SYSTEM_ENFORCED = 7; // /* @hide The audio stream for DTMF tones */ // STREAM_DTMF = 8; // /* @hide The audio stream for text to speech (TTS) */ // STREAM_TTS = 9; // /* @hide The audio stream for FM */ // STREAM_FM = 10;一般锁屏下只能调 music 3#volume_type>=0 表示正在调节音量,调节完毕后值为-1 可根据这个显示或隐藏音量显示增强ifelse函数功能,支持任意数量条件和值ifelse(x1, y1, x2, y2, ... , z)// if x1>0 return y1; else if x2>0 return y2; ... ; else return z6.20文本支持多行 #text1.text_height 为折行后的高度可选属性:spacingMult 行距倍数 默认1spacingAdd 行距增加量 默认0动态帧率: http://www.miui.com/thread-567030-1-1.html查询Webservice : http://www.miui.com/thread-608966-1-1.html图片3D旋转和virtual screen: http://www.miui.com/thread-603855-1-1.htmlcolor属性支持:1.常量 2.字符串变量 3.argb(A,R,G,B)函数式,其中A,R,G,B均为表达式.2.10百变锁屏支持针对单个主题的个性化设置(需主题支持)可以设置解锁快捷方式http://www.miui.com/forum.php?mod=viewthread&tid=373229&page=1#pid75976581.7 自定义中间变量和数组<Var name="" expression="" type="" const=""/>name 变量名expression 变量对应的表达式或常量 注意:如果定义字符串常量需要多一套单引号: expression="'my string'"type= number/string 定义数值变量或字符串变量 默认:numberconst =true变量只会在初始化时计算一次,以后不会重新计算,可以提高效率。如果变量值会在锁屏运行期间改变,const设为false 默认:false<arArray type="string"> <Vars> <Var name="date_format1" index="#time/2000%5"/> <Var name="date_format2" index="2" const="true"/> ... </Vars> <Items> <Item expression="ifelse(isnull(@date_format),'MMMMd日 EEEE', @date_format)"/> <Item value="EEEE"/> ... </Items></VarArray>Item 数组元素定义expression 元素对应的表达式value 如果元素是常量,则用value指定常量值// 定义了一个每隔两秒轮换一次日期显示格式的DateTime元素.//数组元素可以用来根据数字变量值显示不同的字符串<!-- if const is true, the variable will only evaluate once at the initial time, --><Var name="show_date" expression="ifelse(isnull(#show_date),1,#show_date )" type="number" const="true"/><Var name="text_size_date" expression="ifelse(isnull(#text_size_date),18,#tex t_size_date)" type="number" const="true"/><VarArray type="string"> <Vars> <Var name="date_format1" index="#time/2000%5"/> <Var name="date_format2" index="2" const="true"/> </Vars> <Items> <Item expression="ifelse(isnull(@date_format),'MMMMd日 EEEE', @date_format)"/> <Item value="EEEE"/> <Item value="yyyy年"/> <Item value="MMMM"/> <Item value="d日"/> </Items></VarArray>// 显示英文月份<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" ... />Var新增变量阈值触发:threshold 阈值; <Var>下面的<Trigger>用来指定触发详见http://www.miui.com/forum.php?mod=viewthread&tid=820336&page=1&extra=#pid17599095
2015年06月05日
by米青
经过数周精心打造,百变锁屏终于要发布了。我们的目标是最大化锁屏界面的自由度,让解锁界面和解锁方式可以通过主题包很方便的更换。由于一直在调代码和编写主题包,没时间写个很完善的教程, 而且百变锁屏的功能点很多,一下子也说不完,这是一个很简单的教程,基本概括了所有重要功能,但是写的比较简单,可能不太容易懂,我们以后会逐渐完善,争取搞得图文并茂。其实个人觉得学习这些东西最好的方法是看实例,通过看实例了解它的基本原理和运作方式,教程只是一个参考,用来查找一些东西比如支持什么变量什么的。闲话不多说。完整版在线wiki教程http://wiki.dev.xiaomi.com/index.php?title=MAML%E6%95%99%E7%A8%8B10.21新增解锁部件回弹动画,详情请见:http://www.miui.com/thread-290094-1-1.html文本元素支持文字宽度变量属性 text_width<Text name="tt" .../>#tt.text_width元素实际位置变量,可以获得元素在动画时的实际位置。 actual_x actual_y<Image name="img" ... > <;PositionAnimation> ... </PositionAnimation></Image>#img.actual_x #img.actual_y注意:不建议使用,在低帧率的情况下的值可能是错误的。9.30 新增字符串变量支持格式化:<Text format="下一个闹钟:[%s] 电池:[%d%%]" paras="@next_alarm_time,#battery_level"/>文字和日期支持旋转 <Text angle=""/>9.23 新增字符串变量,next_alarm_time 下一个闹钟时间以@开头<Text text="@next_alarm_time" .../>8.26新增* 元素可见性支持表达式visibility=“表达式” <=0 不可见 >0可见* MusicControl 增加属性autoShow, true/false 如果进入锁屏是在播放音乐是否自动显示MusicControl 增加变量 music_state ,数字, 播放状态 0停止 1播放 visibility 数字 0=false 1=true8.12新增:a. 透视到桌面功能,如果没有锁屏壁纸或者锁屏壁纸可以被移开或透明时可以看到桌面launcher或者是锁屏前的应用程序。可以完美实现WP7,Meego,阿里云等的解锁界面。Lockescreen的 displayDesktop属性,默认为false,不能透视到桌面<Lockescreen displayDesktop="true">b. unlocker 支持音效StartPoint: normalSound, pressedSound ,指定在normal和press状态播放的音效EndPoint: reachedSound, 到达该endpoint后播放的音效 <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">7.8 新增:Text新增自动滚动功能,如果制定了宽度和滚动速度marqueeSpeed,在文字超过宽度的时候会自动滚动显示按钮元素,音乐控制,见帖子后面7.15 新增:音乐控制支持专辑封面显示见音乐控制部分。Image, Text, Time的属性 align= left, center, right 坐标点水平对齐方式Image, Time 属性 alignV= top, center, bottom 坐标点垂直对齐方式函数: round() 四舍五入取整 int()向下取整Image 增加antiAlias 属性,默认为false,对于模拟时钟指针设置为true可以减少锯齿。百变锁屏在主题包里的lockscreen/advance目录下,manifest.xml文件是描述脚本,脚本语法如下:1. 图片部件 图片部件用来在锁屏界面上显示一个图片,可以指定各种属性<Image x="" y="" w="" h="" pivotX="" pivotY="" angle="" src="" srcid="" alpha="" antiAlias=""/> x,y : 相对于屏幕左上角的坐标 w,h : 宽和高 pivotX, pivotY : 旋转中心 angle : 旋转角度,一周360度 src : 图片名称 srcid : 图片序列后缀数字,一般用变量表示,可以根据变量显示不同的图片,如果src="pic.png" srcid="1" 则最后会显示图片 "pic_1.png" alpha : 透明度 0-255, 小于等于0不显示 antiAlias: true/false 抗锯齿,如果为true图片在变形旋转时不会有锯齿,但是速度会慢 例子:<Image x="0" y="#screen_height-323" src="bottom_bg.png"/>2. 所有数值属性支持变量表达式,除src外。 当前支持变量: 变量以#开头 * 解锁物件属性: 格式:物件名.属性名 #unlocker.move_x move_x 解锁时在x方向移动距离 move_y 解锁时在x方向移动距离 move_dist 解锁时移动距离 state 解锁状态: 正常:0 按下:1 到达解锁位置:2 * 全局变量: time 当前时间,long touch_x 当前触摸点 x touch_y 当前触摸点 y battery_level 电池电量 0-100 sms_unread_count 未读短信 call_missed_count 未接电话 // 时间日期变量 ampm 上下午 // 0 am, 1 pm hour12 小时,12小时制 hour24 小时,24小时制 minute 分钟 second 秒 year 年 month 月 //0-11 date 日 day_of_week 星期 // 1-7 星期日到星期六 screen_width 屏幕宽度 screen_height 屏幕高度 battery_state 电池状态: 正常:0 充电:1 电量低:2 已充满:3 例子: alpha值的变量表达式表示该图片只有在非充电状态显示,并且随着解锁水平方向的拖动逐渐变透明至消失。<image x="162" y="#screen_height-84" src="hs_path_bg.png" alpha="(255-#unlocker.move_x/100*255)*min(1, abs(1-#battery_state))"/>3. 表达式 支持加减乘除取模括号和函数 加减乘除取模 : + - * / % 支持函数 sin, cos, tan, asin, acos, atan, sinh, cosh, sqrt, abs, min, max 不解释 len(数字) 给定数字位数 len(1234)=4 digit(数字, 第几位) 取给定数字的第几位 digit(1234, 2) = 34. 图片部件可以指定动画 动画分为:图片源,位置,大小,旋转,透明度 每种动画相互独立,各自循环播放,动画由若干关键帧组成,关键帧包括帧属性和时间,除图片源动画外,其它动画会根据当前时间找到相邻的两个关键帧,然后线性插值计算当前的属性。 如果第一帧时间不从0开始,则默认时间为0的第一帧为图片原始属性。时间单位为毫秒 比如位置动画,如果当前时间是1600,则1600对1000取模,得600,x=10 + (600-100)/(1000-100)*(100-10) = 60 y=120time 0 100 [600] 1000 | | | |x,y 10, 20 60,120 100, 200 位置动画中的位置是相对于图片自身的坐标。<Image> <PositionAnimation> <Position x="10" y="20" time="100"/> <Position x="100" y="200" time="1000"/> </PositionAnimation> </Image> 还有: <RotationAnimation> <Rotation angle="" time=""/> <Rotation angle="" time=""/> </RotationAnimation> <SizeAnimation> <Size w="" h="" time=""/> <Size w="" h="" time=""/> </SizeAnimation> <!-- 0-255 --> <AlphaAnimation> <Alpha a="" time=""/> <Alpha a="" time=""/> </AlphaAnimation>图片源动画稍有不同,没有插值,x, y 可选,表示相对图片的位置, 当前的图片是在列表里的找到第一个大于当前时间的那个点指定的,<SourcesAnimation> <!-- optional: x y --> <Source x="" y="" src="pic1.png" time="100"/> <Source x="" y="" src="pic2.png" time="1000"/> </SourcesAnimation>如果当前时间为1600,则对应的图片为 pic2.png例子: 位置动画表示1秒从屏幕最左端到最右端,停留1秒,透明度动画表示开始透明度为175,在从最左端到最右端过程中透明度不变,到达最右端后0.5秒渐变为不透明,然后0.5秒变为透明消失。 然后循环播放。<Image x="0" y="#screen_height-177" src="charging_light.png" category="Charging"> <PositionAnimation> <Position x="480" y="0" time="1000"/> <Position x="480" y="0" time="2000"/> </PositionAnimation> <AlphaAnimation> <Alpha a="175" time="0"/> <Alpha a="175" time="1000"/> <Alpha a="255" time="1500"/> <Alpha a="0" time="2000"/> </AlphaAnimation> </Image>5. 图片可以指定遮罩 x,y 坐标, src为遮罩图片,不透明黑色部分表示不透明,其他部分为透明。 align:坐标是相对于所属图片还是绝对位置,如果是相对,图片移动是遮罩会相应跟随移动。否则遮罩保持不动。<Mask x="" y="" src="" centerX="" centerY="" angle="" align=""> <SourcesAnimation/> <RotationAnimation/> <PositionAnimation/> </Mask>6. category 属性 界面上除解锁部件外所有元素可以指定 category属性,Charging BatteryLow BatteryFull Normal, 指定了category属性的元素仅会在该状态下显示,可以用来做充电文字,动画等的显示。 如<Image x="100" y="100" src="pic.png" category="Charging"/>7. time 部件, src表示时间图片的前缀,如下表示使用time_0.png, time_1.png, ... time_9.png, time_dot.png. 坐标属性支持变量表达式<Time x="10" y="10" src="time.png"> </Time>8.,文字部件 显示指定格式的文字,坐标属性支持变量 color:文字颜色,#FFFFFFFF size: 文字大小 format:如果需要在文字中显示变量数字,需要指定格式, 用%d 指定数字位置 paras: 如果指定了format, 需要在paras里指定%d对应的变量表达式, 可以有多个变量表达式用"," 隔开 align:left, center, right,文字坐标的对齐方式 Text新增自动滚动功能,如果制定了宽度和滚动速度marqueeSpeed,在文字超过宽度的时候会自动滚动显示 angle: 旋转角度<Text x="" y="" text="" color="" size="" format="" paras="#x,#y" align="" marqueeSpeed=""> <PositionAnimation/> </Text>例子:<Text x="240" y="130+#unlocker.move_y" category="Charging" color="#AAFFFFFF" alpha="200" size="24" format="正在充电(%d%%)" paras="#battery_level" align="center"/>9. 日期部件 显示指定格式的日期 format: 支持标准日期格式, 另外增加农历: NNNN<DateTime x="" y="" color="" size="" format=""> <PositionAnimation/><DateTime>九月: M -> 9 MM -> 09 7分钟: m -> 7 mm -> 07 mmm -> 007 mmmm -> 0007 1970年4月6日 3:23am "yyyy/MM/dd h:mmaa" -> "1970/04/06 3:23am" "M月d日 h:mmaa" -> "4月6日 3:23am" "E" -> "周三" "EEEE" -> "星期三" "纪念日: M/d" -> "纪念日: 4/6" 24小时: "kk:mm" -> "13:34"10. 解锁部件 name: 名字,用来做变量名bounceInitSpeed, bounceAccelation 回弹动画初始速度和加速度(距离单位为像素,时间单位为秒),都支持表达式详情请见: http://www.miui.com/thread-290094-1-1.html 可以有任意个解锁部件。 起始点,表示点击区域,坐标和宽高,起始点中包含的元素都会跟随当前解锁操作的拖动移动位置。<StartPoint x="" y="" w="" h="" normalSound="" pressedSound=""> 正常状态,可以包含若干元素 <NormalState> <Image/> <Time/> <DateTime/> <Text/> </NormalState> 在点击区域按下,表示开始解锁操作,拖动,隐藏其他状态元素,显示这些元素, <PressedState> <Image/> <Time/> <DateTime/> <Text/> </PressedState> 达到解锁目标后,隐藏其他元素,显示这些元素 <ReachedState> <Image/> <Time/> <DateTime/> <Text/> </ReachedState> </StartPoint>三个状态都可以不指定,可以使用变量来改变其他界面元素状态来表示解锁过程。 解锁目的,坐标和大小,当起始点的x,y点落入解锁目标区域矩形时,达到解锁位置,此时松开手指即可以解锁 结构和起始点相同,不同的是其中元素不会随解锁操作的拖动移动。<EndPoint x="" y="" w="" h="" reachedSound=""> <解锁后执行的动作,可以指定不同的intent,(这里需要整理一下现有的例子) <Intent action="" type="" category="" package="" class=""/> <NormalState> <Image/> </NormalState> <!-- show the target position if pressed trying to unlock--> <PressedState> <Image/> </PressedState> <!-- show specified image when reached target, if touch up then perform unlock--> <ReachedState> <Image/> </ReachedState> 解锁路径 tolerance:开始解锁操作后移动时路径最大距离超过这个值则取消,回到正常状态。Path 可以指定x,y坐标,默认为0,Position的坐标为相对坐标。 <Path x="" y="" tolerance=""> <Position x="" y="" /> <Position x="" y="" /> </Path> </EndPoint>可以有多个解锁目的<EndPoint/></Unlocker> 例子:<Unlocker name="unlocker"> <StartPoint x="31" y="#screen_height-117" w="90" h="90"> <NormalState> <Image x="31" y="#screen_height-117" src="unlock_button.png"> </Image> </NormalState> </StartPoint> <EndPoint x="359" y="#screen_height-117" w="90" h="90"> <PressedState> <Image x="359" y="#screen_height-117" src="unlock_target.png"> </Image> </PressedState> <Path x="0" y="#screen_height-117"> <Position x="31" y="0" /> <Position x="359" y="0" /> </Path> </EndPoint> </Unlocker>11. manifest.xml 结构 frameRate: 指定帧率,如果动画缓慢,可以指定小一点的值,省电。默认为30。 displayDesktop属性,默认为false,透视到桌面功能,如果没有锁屏壁纸或者锁屏壁纸可以被移开或透明时可以看到桌面launcher或者是锁屏前的应用程序。可以完美实现WP7,Meego,阿里云等的解锁界面。 界面元素的遮挡取决于在xml中出现的先后,最先出现的在最下层。<Lockscreen version="1" frameRate="" displayDesktop="boolean"> <Image /> <Image /> <Unlocker/> <Unlocker/> <Time/> <DateTime/> <Text/> </Lockscreen>12. 壁纸元素 Wallpaper元素引用系统设置的壁纸,除了不能指定图片源外其他和Image元素相同,可以有动画和其他属性控制。如果没有此元素则不显示壁纸。可以有多个。例子: < Wallpaper/>13. 按钮元素 按钮元素可以用来接收点击,双击等事件,并可根据trigger的定义来控制界面上其他元素。按钮元素也可以将事件传递给界面上其他元素,来使其他元素响应用户在锁屏界面上的操作。<Button name="" x="" y="" w="" h="" listener="">所有元素增加name属性,按钮的控制对象通过name来指定。x, y, w, h 指定了按钮区域。listener,指定该按钮的事件要传给哪个元素。一个Button可以有若干个trigger,trigger定义了按钮动作引发相关的操作,如控制某元素的属性,trigger中可以包含不同的Command,用来执行各种操作。Button元素的xml结构:<Button> //可以指定任意个trigger,也可以不指定。 <Triggers> <Trigger action=""> </Trigger> </Triggers> // 按钮正常状态,可以包含任意界面元素,如Image Text等,可以不指定 注意: Button中 Image的坐标和Button自己的坐标是独立的,都是相对于Button的父元素。 <Normal> <Image/> <Text/> ... </Normal> // 按钮按下状态,可以包含任意界面元素,如Image Text等,也可以不指定,如果指定了normal状态,则显示normal状态元素。 <;Pressed> <Image/> <Text/> ... </Pressed> </Button>14. 音乐控制元素 指定名称,从而使显示与否可以由另一个按钮控制,比如双击。 必须包含4个Button和1个Text,并且name分别为指定的名称。可以包含其他任意界面元素如Image等。<MusicControl name="music_control" x="" y=""> //专辑封面,和普通Image一样除了图片是绑定到专辑封面的,可以指定大小,加Mask等。<Image name="music_album_cover"/> //歌名和歌手显示文字<Text name="music_display"/> //上一首按钮<Button name="music_prev"/> //下一首按钮<Button name="music_next"/> //播放按钮<Button name="music_play"/> //暂停按钮<Button name="music_pause"/></MusicControl>例子:<!-- 双击控制音乐控制显示隐藏 --><Button x="178" y="529" w="126" h="126"><Triggers><Trigger action="double" target="music_control" property="visibility" value="toggle"/></Triggers></Button><MusicControl x="0" y="300" name="music_control" visibility="false"> <Image name="music_album_cover" x="240" y="40" alpha="150" align="center" alignV="center" /> <!-- 背景图--> <Image src="music_bg.png" x="40" y="0" alpha="100" /> <!-- Text新增自动滚动功能,如果制定了宽度和滚动速度marqueeSpeed,在文字超过宽度的时候会自动滚动显示 --> <Text name="music_display" x="240" y="10" w="300" marqueeSpeed="30" size="24" color="#FFFFFF" alpha="150" align="center"/> <Button name="music_prev" x="40" y ="40" w="108" h="84"> <Normal> <Image src="music_previous_n.png" x="40" y="40" /> </Normal> <;Pressed> <Image src="music_previous_p.png" x="40" y="40" /> </Pressed> </Button> <Button name="music_next" x="332" y ="40" w="108" h="84"> <Normal> <Image src="music_next_n.png" x="332" y="40" /> </Normal> <;Pressed> <Image src="music_next_p.png" x="332" y="40" /> </Pressed> </Button> <Button name="music_play" x="186" y ="40" w="108" h="84"> <Normal> <Image src="music_play_n.png" x="186" y="40" /> </Normal> <;Pressed> <Image src="music_play_p.png" x="186" y="40" /> </Pressed> </Button> <Button name="music_pause" x="186" y ="40" w="108" h="84"> <Normal> <Image src="music_pause_n.png" x="186" y="40" /> </Normal> <;Pressed> <Image src="music_pause_p.png" x="186" y="40" /> </Pressed> </Button> </MusicControl>====高级技巧====:1. 显示和不显示用alpha来控制,每个条件都可以映射到alpha为0或255的表达式,如果条件之间的关系是与,则表达式相乘,如果是或则相加。一个图片或者动画,电池正常,电池已充满。解锁为正常的时候显示,其他,像“电量低,充电。解锁按下,或者到达解锁位置”都不显示。<Image src="pic.png" alpha="max(0,(1-#battery_state))*255 + max(0,(#battery_state-2))*255 + max(0,(1-#unlocker.state))*255">
2015年06月03日
by米青
.9图制作工具信息: 制作工具:photoshop CS5 (我使用的工具,大家现在都用CS6了).9图制作细节介绍: 首先大家打开PS,新建一个空白像素工作区的将参考线拉好,参考线最边缘都需要空一个像素的透明区域,这个透明区域就是我们用来画黑边的区域。我就以一个特殊的短信框为例吧。如下图 这个就事一个短信框,那该怎么画黑边呢?用什么画呢?建议大家用一个像素的纯黑色铅笔 ,必须要纯黑色不能有色差,否则在应用的时候用让你补全.9信息。为什么我们这里选用铅笔而不是画笔呢,因为铅笔的笔触是方的,不是圆的更容易画,有人会问画笔也有方的呀,但是画笔的方的笔触没有铅笔这么好用不信你试试。 (如果大家用选区画黑边也是可以的,尽量把画布放大最大,选中边缘一个像素的空白区域,填充成黑色也是可以的) 我们把前景色设置成黑色,选择铅笔工具,然后再我们的拉好参考线的边缘点一下,按住shift键再到你要拉伸的地方点一下就画好了。如下图,一个范例。 这样一个短信框的.9图就做好了。也许这个拉伸不算太好,如果想做的细一点可在最上方的地方局部拉伸不要像我这样全面的拉伸,我这样做只是为了让大家看一下效果。 如何选择比较适合的短信框,而使的拉伸的短信框比较好看呢?见意短信框边框周围比较的直,最主要是中间必须要有直的地方,边界的地方我们可以加些特殊的形状,那样无关紧要。这样的拉伸效果比较好。如果你整体的边框都是那种弯弯曲曲的,那么只能采用整体拉伸的方法,但是这种方法不是很好。因为这样的拉伸有可能会使你的短信内容超出你的短信框,即使在你手机上没有超出,但是未必适合别的机友的手机屏幕。望慎重选择! 给个整体拉伸的截图,让大家参考下。整体拉伸就是拉我们空白的地方有图的地方不去拉伸。 不建议短信框用这种方法! 短信框做好后,我们保存成PNG格式就可以应用到主题编辑里面了,不再需要去掉黑边了! 喜欢这个教程的同学就帮忙加分吧!
2015年06月03日
bywlh1987
v6中的通知栏时间部分是一个MAML模块,可以用MAML自定义在主题包中添加systemui模块: com.android.systemui.zip (272.63 KB, 下载次数: 2633) 解压缩后放到主题包目录中修改res/raw下面的maml包即可,maml包是一个zip包。statusbar_clock.maml 是时钟statusbar_music.maml 是音乐本文是给主题制作者看的,不建议普通用户修改。
2015年06月03日
by米青
在@米青发这个帖子http://www.miui.com/thread-2426258-1-1.html(2015.03.26)之前,控制动画的方式简直就是个“坑”。 只能单纯的通过自定义的一个flag值来标示当前动画的状态(播放、暂停或结束)。之前写过两个帖子如何正确地控制动画在MIUI锁屏?如何正确地控制动画v2?就介绍过这种方式的控制方式。 现在有了米青介绍的控制方法,简化了不少。这里主要介绍这种新方法的控制。0.注意事项最新稳定版中动画增加了新功能(是的,新功能早就在开发版里了,但是没进稳定版是不能写教程的,我也想让大家早点学会新功能,可是代码过早流传开会导致不明真相的制作者辛辛苦苦做完主题发现在稳定版上不能用... )最新版,指的是 2015.03.26以后的版本。1.Command 基础命令 控制动画播放的 value属性支持新参数 (传送门:如何正确地使用Command在MIUI锁屏?)<Command target="AAA.animation" value="play/pause/resume" /> play //从头播放 pause //暂停 resume //从当前位置继续播放2.play(startTime,endTime,loop,delay) 解释 有4个参数,都支持表达式。 startTime 和 endTime,表示控制动画的开始时间和结束时间。 loop,表示是否循环播放。默认为0,需要写数字0,1 或者数值表达式,如果为0表示只播放一遍就停止。 delay,表示是否支持delay,默认false,需要写数字0,1 或者数值表达式。例如: play(100,500,1,1)支持只写前面的参数,后面的参数可忽略:play //从头播放play(100) //从time 100开始播放到结束,不循环播放play(100, 500) // 从time 100开始播放到500,停止play(100,500,1) //从time 100开始播放到500,循环播放3.补充~
2015年06月02日
byMI-谢
之前,我写过一个帖子提到过如何正确地实现动画在MIUI锁屏?,其中我提到过【动效函数】和【时间轴】的概念。当时MAML动画不支持缓动类型,也没有时间轴的概念,都需要手动自定义缓动函数和一个时间变量。(详见上贴) 新版MIUI加入了"动画支持缓动类型"。出自@米青的帖子http://www.miui.com/thread-2426258-1-1.html,其中就提到了【缓动函数】和【#__ratio参量】的概念。通过easeType,方便地实现了各种“缓动动效”。 但,不能灵活地设置贝塞尔曲线(不多说cubic-bezier.com)。同上,在此之前我写过一篇帖子动效 之【Bezier贝塞尔曲线】,通过手动设置表达式计算出贝塞尔曲线上的值,从而实现上述一样的缓动效果。 本帖主要介绍,新版本加入的动画实现方式。0.注意事项缓动函数指定动画效果在执行时的速度,使其看起来更加真实。现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板。缓动效果速查表:http://easings.net/zh-cn#(这里的缓动名字和MAML里不太一样,注意别混淆了!)1.动画关键帧增加了两个属性:easeType和easeExp easeType的值有: BackEaseIn * CircEaseIn ElasticEaseIn * QuadEaseIn BackEaseOut CircEaseOut ElasticEaseOut QuadEaseOut BackEaseInOut CircEaseInOut ElasticEaseInOut QuadEaseInOut BounceEaseIn CubicEaseIn ExpoEaseIn QuartEaseIn BounceEaseOut CubicEaseOut ExpoEaseOut QuartEaseOut BounceEaseInOut CubicEaseInOut ExpoEaseInOut QuartEaseInOut SineEaseIn QuintEaseIn SineEaseOutSineEaseInOut QuintEaseOutQuintEaseInOut 其中,BackEase可以带1个参数,overshotElasticEase可以带2个参数,priod和amplitude参数为常数,比如BackEaseIn(1.5) ElasticEase(2,3)priod:周期,振荡周期越短,单位时间内振荡次数越多(取0.2左右较为合适)amplitude:振幅,振荡幅度越大,最大值的一个波峰值越高 (取小于1较为合适) easeExp为表达式,引用一个内置变量#__ratio,可以自定义缓动函数比如 easeType="QuadEaseIn" 也可以用 easeExp="#__ratio*#__ratio" 来实现。 当有easeExp时,easeType不起作用 属性作用于从该帧到下一帧,最后一帧没用2.实例分析<Image src="test.png" x="500" y="500"> <PositionAnimation> <Position y="0" time="0" easeType="QuadEaseOut"/> <Position y="1" time="200" easeType="BounceEaseOut"/> <Position y="0" time="500"/> </PositionAnimation></Image>分析:test.png这张图片,在0~200ms内,y的值按照QuadEaseOut过渡方式,从0-->1变化。在200~500ms内,按照BounceEaseOut过渡方式,从1-->0变化。3.有关【#__ratio】的讨论#__ratio 应该是一个和时间有关的变化参量(其值从0-1变化)
2015年06月02日
byMI-谢
Bezier曲线<Var name="m_t"> <VariableAnimation loop="false"> <AniFrame value="0" time="0" /> <AniFrame value="1" time="650" /> <AniFrame value="1" time="1000000000" /> </VariableAnimation></Var><!-- Bezier Patch by xzh --> <!-- Bezier Point --> <Var name="p0_x" expression="0"/> <Var name="p0_y" expression="0"/> <!-- you can change p1&p2 position_x_y--> <Var name="p1_x" expression="0.5"/> <Var name="p1_y" expression="0.75"/> <Var name="p2_x" expression="0.75"/> <Var name="p2_y" expression="0.5"/> <Var name="p3_x" expression="1"/> <Var name="p3_y" expression="1"/> <!-- linear --> <!-- Var name="test_y" expression="0+(1-#m_t)*#p0_y+#m_t*#p1_y" /> --> <!-- quadratic --> <!-- Var name="test_y" expression="(1-#m_t)*(1-#m_t)*#p0_y+2*#m_t*(1-#m_t)*#p1_y+#m_t*#m_t*#p2_y" /> --> <!-- cubic --> <Var name="test_x" expression="(1-#m_t)*(1-#m_t)*(1-#m_t)*#p0_x+3*#m_t*(1-#m_t)*(1-#m_t)*#p1_x+3*#m_t*#m_t*(1-#m_t)*#p2_x+#m_t*#m_t*#m_t*#p3_x" /> <Var name="test_y" expression="(1-#m_t)*(1-#m_t)*(1-#m_t)*#p0_y+3*#m_t*(1-#m_t)*(1-#m_t)*#p1_y+3*#m_t*#m_t*(1-#m_t)*#p2_y+#m_t*#m_t*#m_t*#p3_y" /> <Line name="x" x="0" y="500" x1="500" y1="500" strokeColor="#ff66ff" weight="3"/> <Line name="y" x="0" y="500" x1="0" y1="0" strokeColor="#ff66ff" weight="3"/> <Circle x="#test_x*500" y="-#test_y*500+500" r="25" strokeColor="#000000" weight="2" /> <Circle x="100+#test_y*600" y="700" r="25" strokeColor="#000000" weight="2" /> <Circle x="100+#m_t*600" y="800" r="25" strokeColor="#000000" weight="2" />
2015年06月02日
byMI-谢
问题:1.添加图片。2.修改图片属性。3.设计图片的显示动画。解决方案:0.【mainfest.xml】中, 代码添加到这里面1. x,y 摆放图片位置<Image x="100" y="100" src="test.png"/>2. w,h 设置图片宽和高<Image x="100" y="100" w="50" h="50" src="test.png"/>3.1 src 设置图片来源(法一)<Image src="test.png"/>3.2 src srcid 设置图片来源(法二)<!-- test_1.png 、test_2.png ...图片被显示出来 --><Image src="test.png" srcid="1"/><Image src="test.png" srcid="2"/>3.3 srcExp 设置图片来源(法三)<!-- yourFiles/test_0.png ...图片被现实出来 -图片来源支持表达式 --><Image srcExp="'yourFiles/test_' + #day_of_week + '.png'" />4. alpha 改变图片透明度(0~255)<Image x="500" y="500" alpha="255-200*(#touch_x-#touch_begin_x)/800" align="center" alignV="center" src="settings.png"/>5. align/alignV 改变图片对齐方式(在指定坐标点x , y处)<Image x="100" y="100" align="left" alignV="center" src="test.png"/>7.rotationX/Y/Z :沿轴旋转角度;pivotX/Y/Z :旋转的轴心坐标值(都是以图片坐标x,y为原点)<Image x="100" y="100" pivotX="100" pivotY="0" pivotZ="0" rotationX="360*(#touch_x-#touch_begin_x)/2000" align="center" alignV="center" src="settings.png" /><Image x="300" y="300" pivotX="0" pivotY="100" pivotZ="0" rotationY="360*(#touch_x-#touch_begin_x)/2000" align="center" alignV="center" src="settings.png" /><Image x="500" y="500" pivotX="0" pivotY="0" pivotZ="100" rotationZ="360*(#touch_x-#touch_begin_x)/2000" align="center" alignV="center" src="settings.png" />8.scale :等比缩放 scaleX/Y 沿X/Y缩放 pivotX/Y :缩放的中心点(都是以图片坐标x,y为原点)<Image x="100" y="100" pivotX="100" pivotY="100" scale="1+1*(#touch_x-#touch_begin_x)/800" align="center" alignV="center" src="settings.png"/><Image x="300" y="300" pivotX="100" pivotY="100" scaleX="1+1*(#touch_x-#touch_begin_x)/800" align="center" alignV="center" src="settings.png"/><Image x="500" y="500" pivotX="100" pivotY="100" scaleY="1+1*(#touch_x-#touch_begin_x)/800" align="center" alignV="center" src="settings.png"/>9.图片 - 动画实现 - 法一,属性支持变量表达式,可动态改变位置(x,y)、大小(w,h或者scale)、透明度(alpha)、角度(rotation,pivotX/Y/Z)- 法二,动态图片<Image x="0" y="0" src="test.png"> <PositionAnimation> <Position x="0" y="0" time="0" /> <Position x="100" y="100" time="1000" /> </PositionAnimation> <SizeAnimation> <Size w="100" h="100" time="0" /> <Size w="200" h="200" time="1000" /> </SizeAnimation> <AlphaAnimation> <Alpha a="0" time="0" /> <Alpha a="255" time="1000" /> </AlphaAnimation> <RotationAnimation> <Rotation angle="0" time="0" /> <Rotation angle="360" time="1000" /> </RotationAnimation></Image>10.图片 - Mask遮罩-(黑色部分代表“图片会显示出来”,透明部分代表“图片不显示出来”)- align 相对/绝对位置。相对:遮罩随图片移动而移动。绝对:遮罩保持不动。- 支持 源动画、旋转动画、位置动画、属性支持变量表达式<Image x="100" y="100" src="test.png"> <!-- mask 是绝对位置,不会随图片移动而移动 --> <Mask x="0" y="0" src="mask_1.png" align="absolute" /> <!-- mask 是先对位置,随图片移动而移动 --> <Mask x="0" y="0" src="mask_2.png" /> <!-- mask 支持动画 --> <Mask x="" y="" src="" pivotX="" pivotY="" rotation="" align=""> <SourcesAnimation/> <RotationAnimation/> <PositionAnimation/> </Mask></Image>
2015年06月01日
byMI-谢