思考?!*有哪些动效设计工具?*MIUI 的动效设计是如何实现?-------------------------------------------------AE - 高级动效设计工具Framer.js -交互原型设计框架 Framer Studio (Mac 桌面软件) Framer.js 开源(基于JavaScript) JS 类库:View视图、animation动画、event事件绑定 等Pixate webflow - 网页应用Marvel - 网页应用Macaw - 桌面端Invision - 网页应用Flinto - 网页应用Quartz Composer - 苹果创建的开发者工具Origami - Facebook设计团队开发的 QC Patch库 (POP动画引擎)Avocado - 类QCForm - 由RelativeWave开发的交互设计工具---------------------------------------------------动效设计工具引发的思考动效设计工具层出不穷,大大降低了学习门槛。这可以让大量非动画专业的人能轻而易举地设计出Animation来。但,不了解Disney《动画12法则》,做出的动画效果不尽人意。动效设计方法:时间轴(AE/Adobe Edge Animate/Google WebDesigner/Hype)、信号流仿真(QC)、编码(FramerJS)缓动函数(贝塞尔曲线)缓动函数速查表 - easing.net
2015年06月01日
byMI-谢
根据“坑爹的官方提供alpha版文档”可以得到以下情报:---------------------------------------------------0.壁纸...... 1.文本...... 2.时间...... 、3.图片...... 、4.变量...... 不可见5.按钮...... 不可见6.滑块...... 不可见7.组........ 不可见8.音乐...... 9.帧率...... 不可见10.变量绑定. 不可见---------------------------------------------------11.oneMoreThing...待补充!线条<Line /><strokeColor描边色 fillColor填充色 weight画笔粗细><1.指定weight,按strokeColor画,fillColor失效><Line x="50" y="100" x1="500" y1="700" strokeColor="#ff00ff" fillColor="ffffff" weight="10"><Line x="50" y="200" x1="500" y1="700" strokeColor="#ffffff" fillColor="ff00ff" weight="10"><2.指定weight,按strokeColor画><Line x="50" y="300" x1="500" y1="700" strokeColor="#ff00ff" weight="10"><Line x="50" y="400" x1="500" y1="700" strokeColor="#ffffff" weight="10"><3.未指定weight,按fillColor画--><Line x="50" y="500" x1="500" y1="700" fillColor="#ff00ff"><Line x="50" y="600" x1="500" y1="700" fillColor="#ffffff"><!--4.指定weight,按fillColor画,weight失效 ><Line x="50" y="700" x1="500" y1="700" fillColor="#ff00ff" weight="10"><Line x="50" y="800" x1="500" y1="700" fillColor="#ffffff" weight="10">圆角矩形<Rectangle><!--cornerRadius 圆角矩形的倒角半径,--><!-- cornerRadius="15" 圆角半径是15 --><Rectangle x="100" y="100" w="200" h="200" cornerRadius="15" fillColor="#ffffff" weight="10"/><Rectangle x="400" y="100" w="200" h="200" cornerRadius="15" strokeColor="#ff00ff" weight="10"/><Rectangle x="700" y="100" w="200" h="200" cornerRadius="15" strokeColor="#ff00ff" fillColor="#ffffff" weight="10"/><!-- cornerRadius="15,30"圆角横向半径是15,纵向半径是30--><Rectangle x="100" y="400" w="200" h="200" cornerRadius="30,15" fillColor="#ffffff" weight="10"/><Rectangle x="400" y="400" w="200" h="200" cornerRadius="30,15" strokeColor="#ff00ff" weight="10"/><Rectangle x="700" y="400" w="200" h="200" cornerRadius="30,15" strokeColor="#ff00ff" fillColor="#ffffff" weight="10"/>圆形<Circle /><!--r 圆半径--><Circle x="500" y="200" r="60" strokeColor="#ff00ff" weight="10" /><Circle x="500" y="500" r="60" fillColor="#ffffff" weight="10" /><Circle x="500" y="800" r="60" strokeColor="#ff00ff" fillColor="#ffffff" weight="10" />椭圆<Ellipse/> <!--x y 椭圆坐标点 w h 椭圆大小--><Ellipse x="200" y="200" w="300" h="150" strokeColor="#ff00ff" weight="10"/><Ellipse x="200" y="600" w="300" h="150" fillColor="#ffffff" weight="10"/><Ellipse x="200" y="1000" w="300" h="150" strokeColor="#ff00ff" fillColor="#ffffff" weight="10"/><!--rotation 椭圆旋转角度,可以指定旋转中心点,未指定时中心点为x,y--><Ellipse x="600" y="200" w="300" h="150" rotation="30" strokeColor="#ff00ff" weight="10"/><Ellipse x="600" y="600" w="300" h="150" rotation="60" fillColor="#ffffff" weight="10"/><Ellipse x="600" y="1000" w="300" h="150" rotation="90" strokeColor="#ff00ff" fillColor="#ffffff" weight="10"/>弧形<Arc/><!--x y w h 弧形圆形中心和大小,必须指定这四个参数 * --><Arc x="0" y="0" w="200" h="200" startAngle="0" sweep="60" close="false" fillColor="#ffffff" weight="10"/><Arc x="200" y="0" w="200" h="200" startAngle="0" sweep="30" close="false" strokeColor="#ff00ff" weight="10"/><Arc x="400" y="0" w="200" h="200" startAngle="0" sweep="60" close="false" strokeColor="#ff00ff" fillColor="#ffffff" weight="10"/><!--startAngle 弧形开始的角度(以横轴x正方向,顺时针方向)--><!--sweep 弧形扫过的角度--><!--close 弧形是否两半径闭合成封闭图形--><Arc x="0" y="400" w="200" h="200" startAngle="0" sweep="175" close="false" fillColor="#ffffff" /><Arc x="200" y="400" w="200" h="200" startAngle="30" sweep="175" close="false" strokeColor="#ff00ff" weight="10"/><Arc x="400" y="400" w="200" h="200" startAngle="60" sweep="175" close="true" fillColor="#ffffff"/><!--w h 影响弧形的大小而不是r半径决定的--><!--w h 若不等比,则弧形为椭圆弧形--><Arc x="400" y="800" w="400" h="400" startAngle="0" sweep="125" close="false" fillColor="#ffffff" /><Arc x="400" y="1250" w="200" h="400" startAngle="0" sweep="175" close="false" fillColor="#ffffff" />
2015年06月01日
byMI-谢
采用xml标签化的编码方式,使得maml的编写就像乐高积木式的搭建自己所需要的界面。每一个标签或..标签对,就如同一块乐高积木一样。需要什么,就添加自己喜欢的元素。------------------------------MAML与FramerJS引发的思考,你会发现maml脚本有点像framerjs原型设计框架。通过脚本语言构造界面元素甚至动态效果。在FramerJS中,提供了大量的JS类库:View Animation Layer Events Utils .虽然在maml框架中并没有提及这点,但是我们可以类比的方法去看maml提供给我们的每一个元素。Layer图层,正如我们看到的百变框架下众多的根标签 ...在这些“图层”中,我们可以发挥我们的想象力绘制任何界面效果。而同样可以理解为父图层中的子图层,在一个图层上,附上另外一个小图层有何尝不可呢。View视图,则是可以绘制在图层上的小控件。这些控件有些是可见的,有些是不可见的。就是可见的控件,而则是不可见。当然,Layer图层和View视图,都是可以配置各自的属性值。甚至是Animation动画效果。Animation动画,可以单独为某些View设置动画效果。当然,maml目前没有想FramerJS一样,可以灵活地添加各种特殊效果。Events时间绑定,FramerJS中对事件的监听是非常多的,单击、触摸、动画开始/结束、拖拽、滚动等等。maml中,目前为止也有类似的事件监听,按钮的单双击/取消监听,触摸开始/结束坐标值、电源开关、变量值阈值触发监听。虽然对事件的监听比较局限,但发挥的空间仍旧很大。Utils工具,maml提供了各种类型的Binder和FramerateContrll帧率调节,使得可利用系统级数据更多了,对动效的控制更为灵活。-----------------------------------目前看来,maml想要成为FramerJS一样的原型设计框架,还有很多事要做吧。有限的积木块是无法构建一个漂亮而宏伟的建筑的。即使我是一个勤劳的搬运工,可搬动的砖块也是有限的。即使我是一个勤劳的木匠,没有一把好斧头也不可能徒手造出一个好房子。即使我是一个才华横溢的画家,没有一块调色板也不可能空手画出一份五彩斑斓的油画。so.我们需要MAML得到完善,你说呢?
2015年06月01日
byMI-谢
百变壁纸与百变锁屏的制作方法几乎一致,只是在文件结构和manifest的编写上有些许差别。1. 文件结构在工程中建立fancy_icons/目录,所有的百变图标都放在该目录下。每一个百变图标单独一个目录,以相应app的包名来命名,而每个图标目录下的文件结构与锁屏中advance/下的结构几乎一致。比如:fancy_icons/|— com.android.calendar/ (日历). |— manifest.xml (锁屏脚本). |— 默认分辨率(hdpi)的图片文件. |— 声音文件. |— den240/ (hdpi设备上使用的图片都放在该目录下). |— den320/ (xhdpi设备上使用的图片都放在该目录下). |— den480/ (xxhdpi设备上使用的图片都放在该目录下). |— strings/ (如果你想让图标支持多语言,在这里添加相应语言的字符串). |— strings.xml (默认语言). |— strings_en.xml (英文). |— strings_zh_TW.xml (繁体中文-台湾).|— com.miui.weather2/ (天气)|— com.wali.miui.networkassistant/ (网络助手)1) 多分辨率(按密度)适配的说明与锁屏的多分编率适配不同,图标是按照设备密度进行适配的。对于小米手机,屏幕宽度和密度有如下的对照关系:___________________________屏幕宽度 | 密度___________________________480P | 240 (hdpi)720P | 320 (xhdpi)1080P | 480 (xxhdpi)___________________________按照密度的自动适配机制是与按屏幕适配的方式完全一致的,参考百变锁屏多分编率适配说明。比如:你有den320,den480两个目录,在den320的设备上,系统就会使用den320目录下的图片,在den240的设备上,系统就会使用默认分辨率的图片(根目录下的);在den350的设备上,系统会使用den320目录下的图片,然后将其拉伸以适应den350。2)多语言支持参考百变锁屏多语言支持。2. 编写Manifest参照MAML教程。
2015年05月06日
by官方
百变壁纸与百变锁屏的制作方法几乎一致,只是在文件结构和manifest的编写上有些许差别。1. 文件结构在工程中建立miwallpaper/目录,其下的文件结构与锁屏中advance/下的结构完全一致,不支持theme_values.xml文件。2. 编写Manifest参照MAML教程。
2015年05月06日
by官方
百变锁屏的制作主要分为五个步骤:1. 设计,切图 2. 建立工程 3. 编写manifest(锁屏脚本) 4. 支持个性化设置(可选) 5. 测试。1. 设计 & 切图为了能在各种分辨率的设备上都有完美的显示效果,建议分别为480P,720P,1080P等分辨率的设备切图。2. 建立工程在主题编辑器生成的工程目录下,创建lockscreen/目录,所有锁屏相关的文件都放置在该目录下。lockscreen/目录的文件结构如下,其中,除了manifest.xml(锁屏脚本)是必选的,其他文件都是可选的。lockscreen/|— advance/. |— manifest.xml (锁屏脚本). |— 默认分辨率(480P)的图片文件. |— 声音文件. |— sw480/ (480P设备上使用的图片都放在该目录下). |— sw720/ (720P设备上使用的图片都放在该目录下). |— sw1080/ (1080P设备上使用的图片都放在该目录下). |— strings/ (如果你想让锁屏支持多语言,在这里添加相应语言的字符串). |— strings.xml (默认语言). |— strings_en.xml (英文). |— strings_zh_TW.xml (繁体中文-台湾).|— theme_values.xml (主题相关的配置写在这里)1)多分编率(屏幕宽度)适配的说明多分编率的适配是系统自动完成的,具体地说:锁屏在被应用的时候,系统会去advance/下寻找相应分配率的图片(swXXX/或默认资源)来显示,比如在720P 上会去寻找sw720/。如果没有相应分辨率的目录,系统会采用与该分辨率最接近分辨率的资源,比如:你有sw720,sw1080两个目录,在800P 的设备上,因为800P与720P最接近,就会使用720P中的图片,然后将其拉伸以适配800P的设备;在500P的设备上,因为500P与 480P(默认分辨率)最接近,所以会使用默认图片资源(advance/目录下的图片),将其拉伸以适配500P的设备。// TODO screenWidth, extraResourcesScreenWidth说明2)多语言支持有些文字在不同的国家或地区的显示是不一样的,所以你可能需要多语言的支持。比如:大陆的“紧急呼叫”,在英文中是“Emergency call”,在台湾是“緊急撥號”。支持多语言的步骤:a. 建立strings/目录,分别创建strings.xml,strings_en.xml,strings_zh_TW.xmlb. 编辑文件,strings.xml:<strings><string name=”emergency_call” value=”紧急呼叫” /></strings>strings_en.xml:<strings><string name=”emergency_call” value=”Emergency call” /></strings>strings_zh_TW.xml:3) theme_values.xml配置在锁屏模式下,状态栏显示哪些信息。文件demo如下:<MIUI_Theme_Values> <!– 状态栏是否显示电池 –><bool name=”config_show_status_bar_battery_for_keyguard”>true</bool> <!– 状态栏是否显示运营商 –><bool name=”config_show_status_bar_carrier_for_keyguard”>true</bool> <!– 状态栏是否显示日期 –><bool name=”config_show_status_bar_date_for_keyguard”>true</bool> <!– 状态栏是否显示时间 –><bool name=”config_show_status_bar_time_for_keyguard”>false</bool> <!– 状态栏是否显示通知 –><bool name=”config_show_status_bar_notification_for_keyguard”>false</bool> <!– 状态栏是否显示状态 TODO –><bool name=”config_show_status_bar_status_for_keyguard”>false</bool></MIUI_Theme_Values>3. 编写Manifestmanifest.xml是锁屏脚本文件,描述了图片的布局、动画等效果,是锁屏制作的关键。该脚本采用MAML语言编写(MIUI Application Markup Language,MIUI百变框架自定义的一种语言),其详细语法参考MAML教程4. 支持个性化设置(可选) 5. 测试使用主题编辑器,将主题导入手机,即可预览锁屏效果。
2015年05月06日
by官方
主题内基本模块clock_2x4 时钟com.android.contacts 通讯录以及拨号com.android.fileexplorer 文件管理器com.android.mms 短信com.android.providers.downloads.ui 下载管理com.android.settings 设置com.android.systemui 通知栏以及任务管理器com.android.updater 系统更新com.miui.antispam 防打扰com.miui.backup 备份com.miui.home 桌面com.wali.miui.networkassistant 流量监控framework-miui-res MIUI全局framework-res Android原生全局icons 图标MIUI全局主要存放文件是会在各种界面都会调用到的东西,比如按钮,弹窗,进度条,每个每块都会用到的小图标等等,如在当前模块没有想要修改的素材时,可以去全局找。主题内增值模块miwallpaper 百变壁纸icons\fancy_icons 动态图标com.miui.home.freestyle 自由桌面
2015年05月06日
by官方
安装说明:1. 最新编辑器下载地址:http://www.miui.com/thread-2421703-1-1.htmlV6系统素材包下载:http://pan.baidu.com/s/1eQ6H65W#path=%252F 注意,在切换V5 V6的时候遇到无法导出模块问题,可能需要再第三方里进行刷新列表的操作此版本更新内容:高清视频教程下载地址:猛击这里文字教程地址:猛击这里遇到问题可以先参考主题编辑器WIKI另外也可以参考这篇英文教程此版本更新内容:20141211 new修复“刷新列表”有可能丢失模块的问题修复“同步模块”后属性条目重复的问题,需要手动清理已有问题的素材库目录(如:..\resourceCatalog_V6\framework-miui-res)20141124更新V6模板,添加文件管理器支持制作状态栏上的百变模块(时钟和音乐)修复导入framework可能出错的bug20141112替换桌面和锁屏壁纸更全面的图标名称精简完美图标个数更新V6模板V6英文模板20140923检测theme_values改动,自动重新加载20140917添加V6模板添加英文模板修复V6无法导入framework-miui问题20140804添加自动更新添加移动弹出窗20140708图标的异步加载修复图标导致的无法启动无法加载图标时显示未知应用20140703添加颜色选取修复修改颜色时光标抖动20140625修复bug20140530添加.9编辑器修复有时替换或删除图片后回复顶部问题修复mac下无法使用的问题修复mac下无法显示注释图片的问题20140516新版设计和实现的编辑器更新主题模板20131115更新适配列表支持部分不适配1080P自动适配拨号盘高度20131025更新模板20130827再次修复适配分辨率时的一些偏差20130820修复适配分辨率时的一些偏差20130814添加适配低分辨率的提示提供自动适配高低分辨率功能更新模板替换更易用的.9编辑器更严格的.9信息检查(不允许非透明或者纯黑出现在.9黑边上)20130619支持主题初始化助手20130606支持关闭完美图标支持theme_values注释图片的直接预览20130521更新模板支持图标滤镜完善图标中文名称完善系统图标添加清理第三方图标添加全局快捷键添加主题wiki站点20130329更新模板自由桌面编辑器添加更多功能20130306V5模板V4转换V5自由桌面(在有自由桌面的V4主题里切换版本号会自动提示转换)V5自由桌面编辑新版本adb20130225不提示已编译.9.png自动删除Thumb.db.9.png错误的文本显示优化.9错误提示一次检测所有.9.png图片错误V4自由桌面转换到V5自由桌面 20130131应用到手机应用最近改动(只保证最近修改成功应用,可能不完整,用于快速查看效果)同步资源新的图标替换模式更新主题模板更新theme_values注释theme_values编辑支持单独修改模块的全局属性其他:另外百变锁屏的编辑器还未更新,可以上上个版本的编辑器的帖子下载:猛击这里自由桌面需要加载包含自由桌面模块的主题才能看到!注意,部分功能需要联机使用,请提前安装号驱动,使用时最好连着手机有些win7上会出现小米手机驱动安装困难,如果官网的驱动安装失败可以尝试一下驱动精灵支持win,linux,osx(osx下拖放功能不能用,请注意!)
2015年05月06日
by官方
制作主题前,我们需要做一些准备工作。1.至少要配备一台分辨率为480P或720P的刷有MIUI系统的机器。(最好同时配备480P和720P,这样也有利于你更好的适配两个分辨率,减少BUG)2.MIUI系统必须为V5开发版,附上刷机教程链接:http://www.miui.com/download.html3.下载PC端运行的主题编辑器:http://www.miui.com/thread-2421703-1-1.html4.下载并安装小米手机助手:http://zhushou.xiaomi.com/5.打开小米手机助手,连接手机,手机必须打开系统设置–全部设置–开发者选项–usb调试,电脑会自动安装驱动,这时就可以正常连接上主题编辑器了
2015年05月06日
by官方
组 组的意思,相当于一些控件元素的容器可以用来包含其他元素,比如Image、Time、Text 等x y w h // 设置 组 坐标和宽高,可以一次性调整 组里面多个元素的位置和大小align/alignV // 支持 对齐方式,需要添加当前Group的宽w和高h支持动画(同 Image)帧率控制,如果一个组里的元素都是静止的,可以添加framaRate="0",系统会根据当前各个组的帧率来自动调整刷新频率,降低内存和cpu占用。(推荐,在添加Group时随手加上对应的帧率)规范代码: <Group name="" x="" y="" w="" h="" frameRate="0"> <Image/> <Time/> <DateTime/> <Text/> <PositionAnimation/> <SizeAnimation></Group> <Group w="100" h="200" align="center" alignV="center" > <Image x="0" y="#screen_height-335" src="bottom_bg.png" /> <mage x="0" y="#screen_height-335" src="bottom_bg.png"/></Group>
2015年05月06日
byMI-谢