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.TweenJS
	TweenJS 是一个静态类,可获取类库的具体信息,例如:库的版本、构建日期等。

2.AbstractTween
	Tween 和 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.Timeline
	Timeline 类同步多个渐变,并允许把多个渐变作为一组来进行控制。注意:如果时间轴正在循环,即使渐变自身的 'loop' 属性设置的是false,时间轴上的渐变也可能循环。

	注意:时间轴目前也接受如下形式的参数列表:tweens, labels, props。这只是为了向后兼容,将来会被移除。原型对象上会包含 tweens 和 labels 作为它的属性。

5.Ease
	Ease 类提供了用于 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_sparktable

6.ColorPlugin
	ColorPlugin 使得渐变支持几乎任意的CSS颜色值。包括:3或6位十六进制颜色(#fff, #ffffff), rgb, rgba, hsl和hsla颜色。(但不支持名称颜色,例如:red)

	ColorPlugin 可以操作 rgb或hsl 模式。它会将所有颜色转换为当下的模式,并相应的输出它们。

7.CSSPlugin
	CSSPlugin 用于处理数字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.MotionGuidePlugin
	MotionGuidePlugin 用于处理运动导向。定义对象可以跟随或定向的路径。

	使用该插件,需要在 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。结束位置,默认为1
		orient - 可选,字符串:'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.RelativePlugin
	RelativePlugin 可以让渐变使用 '相对数值'。安装:

		RelativePlugin.install();

	一旦安装,可以使用以 '+/-' 的相对数值属性的字符串。例如:下面的渐变,使 'x' 从 200 渐变到 50,再到 125。

		foo.x = 200;
		Tween.get(foo)
			.to({x: '-150'}, 500)
			.to({x: '+75'}, 500);

10.RotationPlugin
	RotationPlugin 可以修改渐变的 '旋转' 属性。安装:

		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.SamplePlugin
	TweenJS的示例插件。这个插件纯粹是为了演示,并包含有关构建插件的文档和有用的技巧。(可参考官方实例,来发布自己的插件)

// 下面几个,在 CreateJS 套件里是公共的

12.Event

13.EventDispatcher

14.Ticker

15.Utility Methods

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: createjs是一个JavaScript的开源库,用于创建富媒体和互动性的Web应用程序。目前,它已经成为很多开发者在开发HTML5游戏和动画的首选工具。 createjs中文文档可以帮助中国开发者更好地使用和了解createjs库。这个文档包括了关于createjs库的详细介绍、使用指南和示例代码,以及API文档、常见问题和一些实用的技巧。 通过createjs中文文档,开发者可以学习如何创建和管理画布、图像、声音和交互等各种元素。文档还介绍了如何使用createjs的动画和缓动功能,来创建流畅的动画效果。 此外,文档还介绍了createjs的事件系统,开发者可以学习如何监听和处理各种交互事件,与用户进行互动。 createjs中文文档还提供了关于网络请求和加载资源的方法,使开发者能够在创建Web应用程序时更好地管理和加载素材。 总之,createjs中文文档是一个非常有价值的资源,可以帮助中国开发者更好地理解和使用createjs库,创建出更丰富、更有互动性的Web应用程序。 ### 回答2: CreateJS 是一个用于构建富媒体和交互式 Web 应用程序的 JavaScript 框架。它由一系列广受欢迎的库组成,包括 EaselJS、TweenJS、SoundJS 和 PreloadJS。 CreateJS 包含的核心库是 EaselJS。它是一个用于创建 2D 图形的库,可以帮助开发人员轻松地绘制形状、添加图像和文字,以及创建交互式界面。EaselJS 提供了一组强大的 API,使开发人员能够创建动画、进行图形变换和处理用户交互。 除了 EaselJS,CreateJS 还包含 TweenJS。这是一个用于创建平滑动画效果的库。它可以轻松地实现对象的动态属性变化,如位置、大小、透明度等。TweenJS 提供了丰富的缓动函数,可以让开发人员创建各种各样的动画效果。 另外一个很有用的库是 SoundJS。它使开发人员能够在 Web 应用程序中播放音频。SoundJS 提供了多种加载音频文件的方式,并提供了易于使用的 API,以控制音频的播放、暂停和停止。 最后,CreateJS 还包含 PreloadJS。这是一个用于预加载媒体资源的库。它可以加载图像、音频和其他类型的文件,并提供了进度跟踪、错误处理和加载完成的回调函数。 CreateJS 是一个强大而易于使用的框架,适用于构建各种类型的 Web 应用程序。通过利用 CreateJS 提供的功能和库,开发人员可以更快速地创建交互式和具有动画效果的 Web 应用程序。此外,还有许多中文文档和教程可供参考,帮助开发人员更好地理解和使用 CreateJS。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值