实践HTML5中关联动画的使用方法

作者:课课家教育更新于： 2016-09-02 09:00:23

　　据我了解，HTML5可以制作动画的，而我们这次课课家教育将为大家带来的是：HTML5技术教程之关联动画的使用。而我们为了便于无代码基础的设计师完成一些相对复杂的动画内容，就在我们的mugeda最新添加了一些新的功能，而关联动画就是其中的一项。呵呵，这就是所谓关联动画就是一个物体的某项属性，那么我们便可以随另一个物体的某项属性变化而变化。

　　其实我们可以了解一些HTML5设计动画的工具（这些包含一些新添加的功能）：

　　1.Mixeek

　　这是一款用来设计和运行Web动画和交互的免费应用工具。它就是基于javaScript，CSS3和HTML5，但它却是具有着轻量级、已使用的特点。

　　2.Animatron

　　它应该主要用来设计和发布动画/交互的内容，包括在PC端和手机端两个地方。

　　3.TumultHype

　　设计师们可以用它创造出漂亮的Web内容，而且几乎不用任何的Coding，可以运行在桌面、手机和Pad上。

　　4.Mugeda

　　Mugeda是一个基于云平台的专业可视化环境，用于直接在浏览器中制作富含动画和交互的HTML5内容。设计师无需任何编码，就可以制作富有感染力的移动动画内容。

　　5.HTML5Maker

　　这是一款制作动画、标语和有感染力图像的最佳帮手，而且它是免费的。

　　6.Hippostudios

　　它提供了一个可以创造超强动画、复杂游戏、多媒体、App等的平台。

　　7.Sencha

　　SenchaSpace是安全应用管理平台，帮助你更好的部署你的应用给大部分用户，支持大多数设备，使用最新的hassle。

　　8.Blysk

　　这又是一款实用工具，它可以帮助Web设计师创造页面上的动画，有更多的交互效果。

　　9.Radiapp

　　它可以为你的网站创造视频、动画和图像。

　　10.Createjs

　　CreateJS是一个Javascript库，可以说是一款为HTML5游戏开发的引擎，帮助用户有更好的体验。

　　11.MotionComposer

　　MotionComposer是一套用于对比、整合和展示动作捕捉数据的软件包。可以制作多特征的动画，有着简单易用的接口。

　　步骤1：首先看一个例子，这样我们就以便有个直观的了解：

　　步骤2：其实演示动画中转动棕色齿轮，其他齿轮会一起转动。这个动画就是用的关联动画来实现的。首先让棕色齿轮“拖动/旋转”属性设置为旋转，即该物体是可以通过手指或鼠标来转动的。

　　步骤3：然后我们可以给棕色齿轮起名为a。然后再选中一个需要被关联的物体，点开它的旋转属性右边的关联按钮：

　　步骤4：其实我们在弹出的编辑选项中，参考物体选择要参考的物体a,参考属性选择旋转角度，关联方式选公式，“被控量=”填入被控制物体的属性值。

　　我们填写完后，就可以点击右边的编辑按钮来保存

　　步骤5：呵呵，我们对其他需要被关联的物体也做同样的事情。“被控量=”公式需要根据需要做相应的变化。

　　最后预览动画。

　　当参考物体（棕色的齿轮）转动时，我们可以看出被关联的物体也会跟着转动。（我们可以找到一些编辑动画的网址或软件）

　　然而上面只是用旋转的属性举得例子，实际上，其他只要右边带有关联按钮的属性都可以用来设置关联动画。比如物体的位置（左，上），物体的透明度等，而且可以关联参考物体的不同属性，比如被关联物体的透明属性关联参考物体的旋转属性，就可以用参考物体的旋转来改变关联物体的透明度。同样也可以用参考物体的位置来控制关联物体的旋转等等。

　　步骤6：就在我们在设置关联方式时，除了公式以外还有“控制点插值”的方式：

　　然后我们需要点击图片左下角标出的按钮可以增加控制点数量，点击控制点右边的“—”按钮可以删除该控制点。控制点的，主控制量是参考物的属性值，被控量是关联物体的属性值。然而当参考物的属性值为某一控制点的主控量的值时，其关联物体的相应属性值也会变为相应的被控量值，在两个控制点之间，被控量随主控量变化是线性的，也就是均匀变化的。

　　二：以上讲的是关联动画的一种情景，还有另一种情景是一个舞台上的元件实例的播放受参考物体属性值变化的控制：

　　步骤1：动画中蓝色的方块是个元件实例，而红色的圆是它的参考物体，然后拖动红色圆左右移动，蓝色元件实例会伴随播放。并且元件播放的帧数是和参考物体的横坐标是对应的。我们来看下是如何实现的：

　　步骤2：先在物体上放一个元件实例和一个用来做参考的物体，给参考物体命名为a，将它的“拖动/旋转”属性设置为“水平拖动”。选中元件实例，将其“动画关联”属性设为：启用。

　　步骤3：然后点开右边的关联编辑按钮：

　　参考物体选a，参考属性选左，即参考物体的左边界坐标（left）值。那么我们可以填入开始阈值和结束阈值，其实这就是参考物体的属性值在这个区间时，元件实例被控制播放。我们的播放模式选同步播放。同步播放的意思是当参考物体的参考属性值处于开始阈值和结束阈值之间时，元件实例的帧数与参考属性值相对应，即开始阈值对应元件实例的第一帧，其实，结束阈值对应最后一帧，中间部分线性变化，即均匀变化。还有另一种播放模式：切换状态，这种模式的意思是当参考物体的属性值处于开始阈值和结束阈值之间时，元件实例自动播放，即按元件设定的帧数播放，当我们处于这个范围以外时，就在元件停止播放，其实就是相当于一个开关的作用。

　　其实我们在预览看动画效果的时候，就可以发现频率是否正确。

　　小编结语：相信大家看完这个教程之后，都会感觉到这个需要一定的基础才能完成的，最重要的是，我们需要一定的耐心去完成的，希望大家不要操之过急而导致失误的。如果大家还想需要更多更精彩的教程，那么欢迎继续关注我们课课家教育，我们将为大家继续带来更多更精彩的教育咨询，谢谢大家的支持。