CreateJS-TweenJS文档翻译

TweenJS 模块TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。简单tween下面的示例渐变：1000ms内将目标的alpha属性从0-1渐变，之后调用 'handleComplete' 函数target.alpha = 0;createjs.Tween.get(target).to({alpha: 1}, 1000).call(handleComplete);function handleComplete(){}参数和作用域Tween 也支持带参数和(或)作用域的 'call()' 方法。如果没有传递作用域，则匿名调用函数(就是通常javascript的行为)。在进行面向对象风格的开发时，传递scope对于维护scope是非常有用的。createjs.Tween.get(target).to({alpha: 0}).call(handleComplete, [argument1, argument2], this);链式tween下面的示例渐变：等待0.5s，1000ms内将目标的alpha属性渐变到0，并设置visible为false。之后调用 'handleComplete' 函数target.alpha = 1;createjs.Tween.get(target).wait(500).to({alpha: 0, visible: false}, 1000).call(handleComplete);function handleComplete(){}浏览器支持TweenJS支持所有的浏览器1.TweenJSTweenJS 是一个静态类，可获取类库的具体信息，例如：库的版本、构建日期等。2.AbstractTweenTween 和 Timeline 的基类。不应该被直接实例化。3.Tween针对单个目标元素进行属性渐变。可以链式操作，创建复杂的动画序列示例：createjs.Tween.get(target).wait(500).to({alpha: 0, visible: false}, 1000).call(handleComplete);多个渐变，可共享一个目标元素，但如果多个渐变，影响的是同一个属性，可能会出现意想不到的行为。要停止一个对象上的所有渐变，使用 'removeTweens' 或者传递 'override: true' 原型参数createjs.Tween.get(target, {override: true}).to({alpha: 0, visible: false}, 1000);订阅 Tween/change事件createjs.Tween.get(target, {override: true}).to({x: 100}).addEventListener('change', handleChange);function handleChange(){// 渐变发生时触发   }4.TimelineTimeline 类同步多个渐变，并允许把多个渐变作为一组来进行控制。注意：如果时间轴正在循环，即使渐变自身的 'loop' 属性设置的是false，时间轴上的渐变也可能循环。注意：时间轴目前也接受如下形式的参数列表：tweens, labels, props。这只是为了向后兼容，将来会被移除。原型对象上会包含 tweens 和 labels 作为它的属性。5.EaseEase 类提供了用于 TweenJS 的easing功能集合。它不使用 standard 4 param easing signature(标准easing签名)。相反，它使用单个参数，表示渐变的当前线性比率(0-1)。Ease上的大多数方法，可以直接作为easing功能直接传递：Tween.get(target).to({x: 100}, 500, Ease.linear);然而，以 'get' 前缀开头的方法，需要根据参数值返回一个easing功能：Tween.get(target).to({x: 100}, 500, Ease.getPowIn(2.2));查看 TweenJS 支持的 ease 类型：https://www.createjs.com/demos/tweenjs/tween_sparktable6.ColorPluginColorPlugin 使得渐变支持几乎任意的CSS颜色值。包括：3或6位十六进制颜色(#fff, #ffffff), rgb, rgba, hsl和hsla颜色。(但不支持名称颜色，例如：red)ColorPlugin 可以操作 rgb或hsl 模式。它会将所有颜色转换为当下的模式，并相应的输出它们。7.CSSPluginCSSPlugin 用于处理数字CSS字符串属性(例如：top, left)。使用的话，需要在 TweenJS 加载完毕后，简单安装：createjs.CSSPlugin.install();CSSPlugin 几乎适用于任何style属性或单位。它通过查找元素style对象上的初始值，来识别 CSS 值。也使用这个初始值来解析出，该值所使用的单位。在下面的例子中，通过 CSSPlugin，'top' 属性将会被渐变，且使用 'em' 单位(由 CSSPlugin 根据初始值解析出来)，且，而 'width' 属性不会被渐变(因为width没有初始的内联样式值)myEl.style.top = '10em';createjs.Tween.get(myEl).to({top: 20, width: 100}, 1000);CSSPlugin 也可用于计算样式。请查看 'AbstractTween/compute:property' 获取更多信息CSSPlugin 对于 'transform' 样式有特定的处理，只要它们的操作和单位匹配，就会进行任意转换的渐变。例如：myEl.style.transform = 'translate(20px, 30px)';createjs.Tween.get(myEl).to({transform: 'translate(40px, 50px)'}, 900)    // 可渐变，每项都匹配上了.to({transform: 'translate(5em, 300px)'}, 900)   // 不可渐变，出现不同的单位(px 对 em).to({transform: 'scaleX(2)'}, 900) // 不可渐变，不同的操作(translate 对 scaleX)也可使用 '*' 来复制上个 'transform' 相同位置的操作myEl.style.transform = 'translate(0px, 0px) rotate(0deg)';createjs.Tween.get(myEl).to({transform: 'translate(50px, 50px) *'}, 900)   // 会复制 'rotate' 操作.to({transform: '* rotate(90deg)'}, 900)  // 会复制 'translate' 操作注意：CSSPlugin 不包含在 TweenJS 压缩文件8.MotionGuidePluginMotionGuidePlugin 用于处理运动导向。定义对象可以跟随或定向的路径。使用该插件，需要在 TweenJS 加载完毕后安装。createjs.MotionGuidePlugin.install();定义一个路径：// 使用运动导向createjs.Tween.get(target).to({guide: {path: [0, 0, 0, 200, 200, 200, 200, 0, 0, 0]}}, 7000);// 上方运动导向的可视化线条graphics.moveTo(0, 0).curveTo(0, 200, 200, 200).curveTo(200, 0, 0, 0);每条路径都需要预先计算，以确保最高性能。正因为预先计算，Tween不支持改变路径。下面是导向对象的属性:path - 必须，数组。用于绘制路径的多个点(x, y)。start - 可选，0-1。初始位置，默认为0(我们可以将路径理解为0-1一个区间，可能中间一个点开始运动，中间点就是0.5)end - 可选，0-1。结束位置，默认为1orient - 可选，字符串：'fixed/auto/cw/ccw'。fixed - auto - cw/ccw - 即便是每个渐变的所有属性都一样，也不应该在各个渐变间共享导向对象。MotionGuidePlugin库 在后台会存储这些对象的信息，如果共享它们会产生意外行为。'0-1' 范围之外的渐变，will be a "best guess" from the appropriate part of the defined curve(将是定义曲线适当部分的"最佳猜测")9.RelativePluginRelativePlugin 可以让渐变使用 '相对数值'。安装:RelativePlugin.install();一旦安装，可以使用以 '+/-' 的相对数值属性的字符串。例如：下面的渐变，使 'x' 从 200 渐变到 50，再到 125。foo.x = 200;Tween.get(foo).to({x: '-150'}, 500).to({x: '+75'}, 500);10.RotationPluginRotationPlugin 可以修改渐变的 '旋转' 属性。安装：RotationPlugin.install();安装后，默认情况下，渐变的所有旋转，会以最短方向旋转。例如：从15°渐变渲染到330°，将会逆时针旋转45°。可以通过设置 rotationDir 渐变值，来改变默认行为。-1 - 强制 'CCW' 旋转1 - 强制 'CW' 旋转0 - 禁用插件旋转效果注意：rotationDir 值一旦设置，将会持久保存，除非之后调用，被覆盖掉。设置为 'null'，来重置默认行为。myTween.get(foo).to({rotation: 30, rotationDir: -1})  // CCW.to({rotation: 60})                       // 仍然是 CCW(因为持久保存).to({rotation: 10, rotationDir: 1});  // CW也可以对单个渐变，完全禁用插件：tween.pluginData.Rotation_disabled = true;  // tween - 具体的一个渐变11.SamplePluginTweenJS的示例插件。这个插件纯粹是为了演示，并包含有关构建插件的文档和有用的技巧。(可参考官方实例，来发布自己的插件)// 下面几个，在 CreateJS 套件里是公共的12.Event13.EventDispatcher14.Ticker15.Utility Methods

CreateJS-TweenJS文档翻译相关推荐

CreateJS 学习4 动画、TweenJS
水平移动动画示例 <html><head><script src="easeljs.min.js" charset="utf-8" ...
Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...
createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
CreateJs入门必知必会
CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. CreateJS主要包含如下四个类库: Ea ...
canvas 动画库 CreateJs 之 EaselJS（上篇）
本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
createjs入门
createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...
CreateJS 指南
https://zhuanlan.zhihu.com/p/40799542 简介 CreateJS是基于HTML5开发的一套模块化的库和工具,基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画 ...
CreateJS入门 -- 注释详细到爆炸（My Style）
写在前面首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...
createjs打飞机
此文章代码来源于createjs打飞机我只是将他教程代码,一步步写出来了而已下面给出完整代码,其中有一张雪碧图和音效资源,包含在源文章中,这里没有 <!DOCTYPE html> &l ...

CreateJS-TweenJS文档翻译

CreateJS-TweenJS文档翻译相关推荐

最新文章

热门文章