2.0 贝塔
这个分支在β. 报告问题值得赞赏,请提及,问题机构是2.0.
单位测试失败是已知的问题 请不要报告.
插件架构不完整,因此预计会断开.
TweenJS是JavaScript中使用的简单编译库. 它的开发是为了与"EaselJS"库很好地融合,但并不依赖或特指它(虽然默认使用相同的Ticker和Event类). 它支持对数字对象属性和 CSS 样式属性进行tweing.
安装
国家预防机制
npm install @createjs/tweenjs --save
光盘N
<script src="https://code.createjs.com/2.0/tweenjs.min.js"></script>
简单示例
API虽然简单但非常强大,使得通过连锁命令可以很容易地创造出复杂的t.
import { Tween } from "@createjs/tweenjs";
let tween = Tween.get(target)
.to({ x: 300 }, 400)
.set({ label: "hello!" })
.wait(500)
.to({ alpha: 0, visible: false }, 1000)
.call((p1, p2) => { ... }, [ 10, true ]); // p1 === 10, p2 === true, this === target
上面的例子将产生一个新的特温实例:
- 将目标调整到300多分400毫秒的x值,并将其标签设置为"你好!"
- 等待500毫秒时
- 将目标alpha 调整为 0 大于 1s( 使其可见为虚假) (t)
- 调用“完成”函数
Tweens由两个要素组成:步骤和行动.
步骤定义了被子化的属性,并且始终具有与这些属性相关的持续时间(即使持续时间为0). 步骤用"to"和"wait"的方法定义. 步骤完全是决定性的。 你可以任意设置tween的位置,它会永远为这个位置设置相同的属性.
行动没有期限,在步骤之间执行。 它们的定义是: call(), (中文(简体) ), set(), (中文(简体) ), play(),以及 pause() 方法。 。 。 它们被保证按照正确的顺序执行,但不能在序列中指明的准确的时间时刻执行. 这可能导致不确定的结果,特别是在tweens通过游戏和暂停动作进行互动时.
Tweens支持一些配置属性,这些属性在创建新 tween 时被指定为第二段 :
Tween.get(target, {
loop: true,
useTicks: true,
css: true,
ignoreGlobalPause: true
}).to(etc...);
所有配置属性默认为虚假 。 属性为:
loop - 说明当圆圈到尾端时是否应该循环
useTicks - 双胞胎会持续使用滴子而不是毫秒
css - 允许 css 映射一些 css 属性
ignoreGlobalPause - 滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答.
使用时 Tween.get(),您也可以指定真实性作为第三个参数来覆盖目标上的任何活性扭矩.
Tween.get(target, null, true); // this will remove any existing tweens on the target.
支助和资源
- 查找示例和更多信息 TweenJS网站。 。 。 .
- 读取 文档。 。 。 .
- 讨论、分享项目,并与其他用户就 编辑。 。 。 .
- 技术问题 叠叠流。 。 。 .
- 文件已校验出错误或正式特性请求 GitHub 图像。 。 。 .
- 有一个 谷歌组 供讨论和支持.
- 看看里面有什么东西 实例 更深入的指示.
它的建造者是 gskinner.com (中文(简体) ),并且根据麻省理工学院的许可证免费发放,这意味着你可以将其用于几乎任何目的(包括商业项目). 我们尽可能赞赏功劳,但这不是一项要求.
谢谢
特别感谢 罗伯特·潘纳 他的宽松方程, 构成Ease类的基础.