2015年10月2日星期五

透过HT for Web 3D看动画Easing函数本质 - xhload3d

本邮件内容由第三方提供,如果您不想继续收到该邮件,可 点此退订
透过HT for Web 3D看动画Easing函数本质 - xhload3d  阅读原文»

http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html

50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了。在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了。

如今消费者对用户体验的高要求,以远不能以静态平面图形打动人心,动画已是衡量前端产品用户体验不可忽视的重要因素,最近Facebook开源的Pop动画框架已发了iOS业界极大的关注,其实Apple早在Cocoa和Cocoa Touch框架内置了动画框架Core Animation,HTML5的CSS3也内置了动画机制,不知是自己脑子不好似还是HTML5接口提供的不够友好,久不用总会忘只能考写了个小例子帮自己记忆。

基于HT for Web的自动布局动画例子视频

基于HT for Web的3D机房动画例子视频

动画的原理比较容易理解:在一定的时间间隔内,不断改变颜色、大小或角度等图形界面参数,直到最终的目标参数结果,整个过程人眼观察起来就是个动画的效果。但提供一套完善的动画框架是一项超出大部分一般人脑子的系统工程,我很喜欢阅读《技术奇异点》的博客,他的《Core Animation 初探》对OS X的Core Animation进行了深入的思考。

一套好的动画框架是模型接口、用户体验和运行性能等多方面极难得到平衡的挑战,即使是如今各种GUI平台提供的主流动画框架这么多年了依然问题不少,不是具体场景的性能问题,就是多组件同时动画是莫名其妙各种bug,加上前面提到的我脑子不好使,实在记不住各种平台提供五发八门接口,因此我喜欢自己通过Model来达到控制View的动画效果,这样在动画过程改变哪些属性,改变的每个动画帧改变的幅度,动画之前之后的各种事件处理,多动画的并行还是串行处理一切都可以在自己的掌控之中。

最早接触到Easing概念是学Flash/Flex时接触到的这里demo,这个demo第一次给我对Easing直观的感受,如今基于HTML5的可以参考 http://easings.net/,Easing函数的作用在于通过定义不同曲线的数据公式方式,来描述每一帧回调时需要改变图形参数属性的幅度,从而达到均匀、先快后慢、先慢后快,甚至先超出起始值和结束值再慢慢恢复的各种动画特效,如今有很多工具提供了可视化编辑Easing曲线函数的功能,待会介绍的例子将会枚举一堆常用的Easing函数供大家参考应用,先上张图和视频开门见山让大家体验下基于WebGL的3D下,如何更直观的展示不同Easing动画效果

http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html

该例子近20种动画Easing类型分布在不同的箭头跑道上,当点击控制面板的animation按钮则开始启动动画,动画过程箭头将随着Easing的函数的逻辑决定前进的速度,这样多组动画同时进行时刻直观的对不同动画效果进行比较。箭头的颜色也随着前进距离逐渐由白变红,当达到终点时完全变红。

示例还借助了3D的空间新轴线,在垂直轴方向动态用曲线表示Easing函数在当前时间点的函数值,因此大家可以直观的体验到Easing函数曲线的动态变化过程,同时曲线段的颜色也根据该时间段箭头的前进距离由白变红。

右侧控制面板上端是HTTableView表格组件,通过表格的CheckMode可勾选需要显示的Easing函数类型,可点击表头全部选中或者全部取消,或逐行控制具体特效的是否可见,下端HT拉条组件的frames为帧数,代表整个过程要跑多少帧,interval代表每一帧的时间间隔,增加frames会让曲线更均匀,增减interval可控制动画的快慢程度。

以下HT for Web的3D例子为在Android平板上运行的效果,可勾选部分类型更容易直观观察具体的Easing函数运行效果:

整个例子的运行效果给我感觉就像这个社会各式各样的人生路,大家都逃不过出生和死亡,大家的起点是一样的,终点的死亡也是谁也躲不过的,但不同人可以走出不同的人生曲线,easeNone:function(t){return t}这条是均匀的直线,给我感觉就是公务员之路,没有大起大落,每年都会收入更好,但快不来只能慢慢熬;elasticOut是最顺利的年少就达到事业巅峰,当然后续也没啥追求一路高位稳定等死;elasticOut是大器晚成类型,一路平平毫无建树,终老之前也有幸快速达到了目的地;其他波折动荡的类型如创业人生,每天你都不知道明天会发生什么,你可能一直坐着过山车,时而在低谷时而在顶峰,不过怎么样只要坚持继续前进人人都会达到理想的终点:

Everything will be okay in the end. If it’s not okay, it’s not the end.

http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html


本文链接:透过HT for Web 3D看动画Easing函数本质,转载请注明。

MapReduce程序的工作过程 - 1000sprites  阅读原文»

还记得2.5年前就搭建好了Hadoop伪分布式集群,安装好Eclipse后运行成功了WordCount.java,然后学习Hadoop的步伐就变得很慢了,相信有很多小伙伴和我一样。自己对MR程序(特指Hadoop 1.x版本)的工作过程一直都不是很清楚,现在重点总结一下,为MR编程打好基础。由于MapReduce是基于HDFS的操作,因此要想深入理解MapReduce(解决的是分布式计算问题),首先得深入理解HDFS(解决的是分布式存储问题)。

一. HDFS框架组成

hdfsarchitecture

HDFS采用master/slaver的主从架构,一个HDFS集群包括一个NameNode节点(主节点)和多个DataNode节点(从节点),并提供应用程序的访问接口。NameNode,DataNode和Client的解释,如下所示:

  • NameNode负责文件系统名字空间的管理与维护,同时负责客户端文件操作(比如打开,关闭,重命名文件或目录等)的控制及具体存储任务的管理与分配(比如确定数据块到具体DataNode节点的映射等);
  • DataNode负责处理文件系统客户端的读写请求,提供真实文件数据的存储服务;
  • Client是客户端,一般指的是访问HDFS接口的应用程序,或者HDFS的Web服务(就是让用户通过浏览器来查看HDFS的运行状况)等。

1. 文件的读取

Client与之交互的HDFS、NameNode、DataNode文件的读取流程,如下所示:

捕获

  • Client向远程的NameNode发起RPC请求;(1)
  • NameNode会返回文件的部分或者全部Block列表,对于每个Block,NameNode都会返回该Block副本的DataNode地址;(2)
  • Client会选择与其最接近的DataNode来读取Block,如果Client本身就是DataNode,那么将从本地直接读取数据;(3)
  • 读完当前Block后,关闭与当前的DataNode连接,并为读取下一个Block寻找最近的DataNode;(4)
  • 读完Block列表后,并且文件读取还没有结束,Client会继续向NameNode获取下一批Block列表;(5)
  • 读完一个Block都会进行Cheeksum验证,如果读取DataNode时出现错误,Client会通知NameNode,然后从该Block的另外一个最近邻DataNode继续读取数据。Client读取数据完毕之后,关闭数据流。(6)

2. 文件的写入

Client与之交互的HDFS、NameNode、DataNode文件的写入流程,如下所示:

捕获

  • Client向远程的NameNode发起RPC请求;(1)
  • NameNode便会检查要创建的文件是否已经存在,创建者是否有权限进行操作等,如果满足相关条件,就会创建文件,否则会让Client抛出异常;(2)
  • 在Client开始写入文件的时候,开发库(即DFSOutputStream)会将文件切分成一个个的数据包,并写入”数据队列“,然后向NameNode申请新的Block,从而得到用来存储复本(默认为3)的合适的DataNode列表,每个列表的大小根据NameNode中对replication的设置而定;(3)
  • 首先把一个数据包以流的方式写入第一个DataNode,其次将其传递给在此管线中的下一个DataNode,然后直到最后一个DataNode,这种写数据的方式呈流水线的形式;(假设复本为3,那么管线由3个DataNode节点构成,即Pipeline of datanodes)(4)
  • 当最后一个DataNode完成之后,就会返回一个确认包,在管线里传递至Client,开发库(即DFSOutputStream)也维护着一个”确认队列”,当成功收到DataNode发回的确认包后便会从“确认队列”中删除相应的包;(5)
  • 如果某个DataNode出现了故障,那么DataNode就会从当前的管线中删除,剩下的Block会继续在余下的DataNode中以管线的形式传播,同时NameNode会再分配一个新的DataNode,以保持replication设定的数量。Client写入数据完毕之后,关闭数据流。(6)

说明:HDFS默认Block的大小为64M,提供SequenceFile和MapFile二种类型的文件。

二. MapReduce框架组成

MapReduce框架的主要组成部分和它们之间的相关关系,如下所示:

20141219140722943

上述过程包含4个实体,各实体的功能,如下所示:

  • Client:提交的MapReduce作业,比如,写的MR程序,或者CLI执行的命令等;
  • JobTracker:协调作业的运行,本质是一个管理者;
  • TaskTracker:运行作业划分后的任务,本质就是一个执行者;
  • HDFS:用来在集群间共享存储的一种抽象文件系统。

直观来说,NameNode就是一个元数据仓库,就像Windows中的注册表一样。SecondaryNameNode可以看成NameNode的备份。DataNode可以看成是用来存储作业划分后的任务。在通常搭建的3台Hadoop分布式集群中,Master是NameNode,SecondaryNameNode,JobTracker,其它2台Slaver都是TaskTracker,DataNode,并且TaskTracker都需要运行在HDFS的DataNode上面。

上述用到的类,或者进程的功能,如下所示:

  • Mapper和Reducer

基于Hadoop的MapReduce应用程序最今本的组成部分包括:一个Mapper抽象类,一个Reducer抽象类,一个创建JobConf的执行程序。

  • JobTracker

JobTracker属于master,一般情况应该部署在单独的机器上,它的功能就是接收Job,负责调度Job的每一个子任务Task运行在TaskTracker上,并且监控它们,如果发现有失败的Task就重启它即可。

  • TaskTracker

TaskTracker是运行于多节点的slaver服务,它的功能是主动通过心跳与JobTracker进行通信接收作业,并且负责执行每一个任务。

  • JobClient

JobClient的功能是在Client提交作业后,把一些文件上传到HDFS,比如作业的jar包(包括应用程序以及配置参数)等,并且把路径提交到JobTracker,然后由JobTracker创建每一个Task(即MapTask和ReduceTask)并将它们分别发送到各个TaskTracker上去执行。

  • JobInProgress

JobClient提交Job后,JobTracker会创建一个JobInProgress来跟踪和调度这个Job,并且把它添加到Job队列中。JobInProgress根据提交的Job Jar中定义的输入数据集(已分解成FileSplit)创建对应的一批TaskInProgress1用于监控和调度Task。

  • TaksInProgress2

JobTracker通过每一个TaskInProgress1来运行Task,这时会把Task对象(即MapTask和ReduceTask)序列化写入相应的TaskTracker中去,TaskTracker会创建对应的TaskInProgress2用于监控和调度该MapTask和ReduceTask。

  • MapTask和ReduceTask

Mapper根据Job Jar中定义的输入数据<key1, value1>读入,生成临时的<key2, value2>,如果定义了Combiner,MapTask会在Mapper完成后调用该Combiner将相同Key的值做合并处理,目的是为了减少输出结果。MapTask全部完成后交给ReduceTask进程调用Reducer处理,生成最终结果<key3, value3>。具体过程可以参见[4]。

三. MapReduce工作原理

整个MapReduce作业的工作工程,如下所示:

20141219104145474

1. 作业的提交

没有评论:

发表评论