首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HT for Web基础动画介绍

在上一篇《基于HT for Web矢量实现3D叶轮旋转》一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介绍及用法。...在HT的数据模型驱动图形组件的设计架构下,动画可理解为将某些属性由起始值逐渐变到目标值的过程, HT提供了ht.Default.startAnim的动画函数,其示例代码如下。...默认采用Time-Based的方式,如果不设置duration和frames参数,则duration参数将被系统自动设置为ht.Default.animDuration值。...ht.Default.startAnim({ duration: 500, // 动画周期毫秒数,默认采用`ht.Default.animDuration` action: function...它就是一个球,我们要做的就是点击浏览器的某个位置,然后它平滑地滑到点击位置,点击自身的话,就做旋转收缩,然后再旋转还原,整个过程都是通过HT for Web的基础动画来完成的。

92690
您找到你想要的搜索结果了吗?
是的
没有找到

HT for Web基础动画介绍

在上一篇《基于HT for Web矢量实现3D叶轮旋转》一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介绍及用法。...在HT的数据模型驱动图形组件的设计架构下,动画可理解为将某些属性由起始值逐渐变到目标值的过程, HT提供了ht.Default.startAnim的动画函数,其示例代码如下。...默认采用Time-Based的方式,如果不设置duration和frames参数,则duration参数将被系统自动设置为ht.Default.animDuration值。...ht.Default.startAnim({ duration: 500, // 动画周期毫秒数,默认采用`ht.Default.animDuration` action: function...它就是一个球,我们要做的就是点击浏览器的某个位置,然后它平滑地滑到点击位置,点击自身的话,就做旋转收缩,然后再旋转还原,整个过程都是通过HT for Web的基础动画来完成的。

64940

HT图形组件设计之道(一)

HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create cutting-edge...这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只做我们感觉自己能得更好,能给用户综合体验更佳的功能,在这样理念驱动下我们慢慢形成了这样的愿景...讨论前先设定话题的边界,HT是基于HTML5的图形组件库,因此文章的案例更多会涉及HTML和JavaScript语言,但并不局限于Web前端,设计思想上同样适用于任何GUI语言平台。...因此我选择在话题展开之前,先用HT来扩展定制几个应用案例,以便大家了解HT组件及其扩展设计思路。 ?...全矢量化的图形组件设计》文章介绍的HT自定义的矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供的矢量格式,用户可采用较为直观易读的JSON格式来描述图形,并通过数据绑定的方式实现模型数据与界面呈现的关联

83550

HT图形组件设计之道(三)

上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题,谈谈模型...相信更少有人敢说熟练精通,你可能在某个项目中用了好几个月甚至一两年,但一段时间不用你很容易忘记,因此对喊出精通缺乏勇气了,我觉得这不是大家不聪明不勤奋,而是目前的这些框架真还没做到足够好,我们一直努力让HT...朝我们觉得满意的方向发展,以后文章我再展开讨论HT如何设计让用户不健忘的API接口。...启动初始化时只有”HT for 3D Web”的第一个页签,因此通过Chrome的Debug Profiles可查看到ht.graph3d.Graph3dView的Objects Count项只有1,通过...最后可以发现第一个HT for 3D Web的页签浴火重生了 ?

1.6K30

HT图形组件设计之道(四)

在《HT图形组件设计之道(二)》我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展示如果将数据绑定机制运用于...3D模型,同时会运用到HT的动画机制,以及OBJ 3D模型加载等技术细节,正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。...选择了的这款免费的飞机模型,这个飞机模型是3dsmax格式,飞机模型是一体化的,由于我还需要控制机头的螺旋桨,因此我用3dsmax做了点改造,将螺旋桨分离了机身独立作为一个材质,同时导出成HT for...飞行路线是通过ht.Polyline类型构建的,上图的几个黄色球是飞行路线Polyline对象的部分控制点,通过这几个控制点我们甚至可以在飞机飞行过程动态改变飞行路线。...该例子综合运用了HT for Web的多种技术功能,大家能体会到HT这种数据绑定机制灵活且强大的特点,通过数据绑定机制,我们可以动态修改从2D拓扑图、到通用组件渲染,甚至到3D引擎的数据模型,所有图形元素的颜色

67350

HT图形组件设计之道(一)

HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create cutting-edge...这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只做我们感觉自己能得更好,能给用户综合体验更佳的功能,在这样理念驱动下我们慢慢形成了这样的愿景...讨论前先设定话题的边界,HT是基于HTML5的图形组件库,因此文章的案例更多会涉及HTML和JavaScript语言,但并不局限于Web前端,设计思想上同样适用于任何GUI语言平台。...因此我选择在话题展开之前,先用HT来扩展定制几个应用案例,以便大家了解HT组件及其扩展设计思路。 ?...全矢量化的图形组件设计》文章介绍的HT自定义的矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供的矢量格式,用户可采用较为直观易读的JSON格式来描述图形,并通过数据绑定的方式实现模型数据与界面呈现的关联

61950

HT图形组件设计之道(四)

在《HT图形组件设计之道(二)》我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展示如果将数据绑定机制运用于...3D模型,同时会运用到HT的动画机制,以及OBJ 3D模型加载等技术细节,正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。...选择了的这款免费的飞机模型,这个飞机模型是3dsmax格式,飞机模型是一体化的,由于我还需要控制机头的螺旋桨,因此我用3dsmax做了点改造,将螺旋桨分离了机身独立作为一个材质,同时导出成HT for...飞行路线是通过ht.Polyline类型构建的,上图的几个黄色球是飞行路线Polyline对象的部分控制点,通过这几个控制点我们甚至可以在飞机飞行过程动态改变飞行路线。...该例子综合运用了HT for Web的多种技术功能,大家能体会到HT这种数据绑定机制灵活且强大的特点,通过数据绑定机制,我们可以动态修改从2D拓扑图、到通用组件渲染,甚至到3D引擎的数据模型,所有图形元素的颜色

86550

HT图形组件设计之道(二)

上一篇我们自定义CPU和内存的展示界面效果,这篇我们将继续采用HT完成一个新任务:实现一个能进行展开和合并切换动作的刀闸控件。...**毫秒级响应我只能呵呵了,为了上这个系统一堆兄弟在沈阳某农村封闭了八个多月,我很好奇那个老系统现在是否健在… 回到我们的任务,一个刀闸最主要的就是可开闭的部分,其他部分都是装饰物效果而已,因此我采用HT...的类,提供了setExpanded的函数,在函数里面操作底层绑定图形的‘switch.angle’属性,以及启动动画封装: ht.Switch = function(){         ht.Switch.superClass.constructor.call...(this);      this.s('switch.angle', 0); }; ht.Default.def('ht.Switch', ht.Node, {     _image : 'switch..._animation = ht.Default.startAnim({                     action: function(t){

58340

HT图形组件设计之道(二)

上一篇我们自定义CPU和内存的展示界面效果,这篇我们将继续采用HT完成一个新任务:实现一个能进行展开和合并切换动作的刀闸控件。...**毫秒级响应我只能呵呵了,为了上这个系统一堆兄弟在沈阳某农村封闭了八个多月,我很好奇那个老系统现在是否健在… 回到我们的任务,一个刀闸最主要的就是可开闭的部分,其他部分都是装饰物效果而已,因此我采用HT...的类,提供了setExpanded的函数,在函数里面操作底层绑定图形的‘switch.angle’属性,以及启动动画封装: ht.Switch = function(){ ht.Switch.superClass.constructor.call...(this); this.s('switch.angle', 0); }; ht.Default.def('ht.Switch', ht.Node, { _image : 'switch..._animation = ht.Default.startAnim({ action: function(t){

88070

HT图形组件设计之道(三)

上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题,谈谈模型...相信更少有人敢说熟练精通,你可能在某个项目中用了好几个月甚至一两年,但一段时间不用你很容易忘记,因此对喊出精通缺乏勇气了,我觉得这不是大家不聪明不勤奋,而是目前的这些框架真还没做到足够好,我们一直努力让HT...朝我们觉得满意的方向发展,以后文章我再展开讨论HT如何设计让用户不健忘的API接口。...启动初始化时只有”HT for 3D Web”的第一个页签,因此通过Chrome的Debug Profiles可查看到ht.graph3d.Graph3dView的Objects Count项只有1,通过...最后可以发现第一个HT for 3D Web的页签浴火重生了 ?

2.6K90
领券