Class: DisplayObject

new JC.DisplayObject()

core/DisplayObject.js, line 15

显示对象的基类，继承至Eventer

Extends

JC.Eventer

Members

alphaNumber

控制渲染对象的透明度

cursorBoolean

当渲染对象是按钮时所具备的光标样式

interactiveboolean

Enable interaction events for the DisplayObject. Touch, pointer and mouse
events will not be emitted unless interactive is set to true.

maskJC.Graphics

对象的遮罩层

originXNumber

控制渲染对象的x变换中心

originYNumber

控制渲染对象的y变换中心

passEventBoolean

当前对象是否穿透自身的事件检测

pivotXNumber

控制渲染对象的相对本身x轴位置的进一步偏移，将会影响旋转中心点

pivotYNumber

控制渲染对象的相对本身y轴位置的进一步偏移，将会影响旋转中心点

rotationNumber

控制渲染对象的旋转角度

scaleNumber

对渲染对象进行x、y轴同时缩放

scaleNumber

对渲染对象进行x、y轴同时缩放

scaleXNumber

控制渲染对象的x轴的缩放

scaleYNumber

控制渲染对象的y轴的缩放

skewXNumber

控制渲染对象的x轴的斜切

skewYNumber

控制渲染对象的y轴的斜切

visibleBoolean

控制渲染对象是否显示

xNumber

控制渲染对象的x位置

yNumber

控制渲染对象的y位置

Methods

animate(options, clear){JC.Animate} core/DisplayObject.js, line 287

animate动画，指定动画的启始位置和结束位置

display.animate({
  from: {x: 100},
  to: {x: 200},
  ease: JC.Tween.Bounce.Out, // 执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  duration: 1000, // 动画时长 ms单位 默认 300ms
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});

Name Type Description

options

Object

动画配置参数

Name	Type	Description
`from`	Object	optional 设置对象的起始位置和起始姿态等，该项配置可选
`to`	Object	设置对象的结束位置和结束姿态等
`ease`	String	optional 执行动画使用的缓动函数默认值为 JC.Tween.Ease.InOut
`repeats`	Number	optional 设置动画执行完成后再重复多少次，优先级没有infinite高
`infinite`	Boolean	optional 设置动画无限次执行，优先级高于repeats
`alternate`	Boolean	optional 设置动画是否偶数次回返
`duration`	Number	optional 设置动画执行时间默认 300ms
`wait`	Number	optional 设置动画延迟时间，在重复动画不会生效默认 0ms
`delay`	Number	optional 设置动画延迟时间，在重复动画也会生效默认 0ms
`onUpdate`	function	optional 设置动画更新时的回调函数
`onComplete`	function	optional 设置动画结束时的回调函数，如果infinite为true该事件将不会触发

clear

Boolean

是否去掉之前的动画

Returns:

Type	Description
JC.Animate

contains(global){Boolean} core/DisplayObject.js, line 586

检测坐标点是否在多变性内

Name	Type	Description
`global`	JC.Point

Returns:

Type	Description
Boolean	是否包含该点

inherited emit(type, ev) eventer/Eventer.js, line 86

事件对象的触发事件函数

Name	Type	Description
`type`	String	事件类型
`ev`	JC.InteractionData	事件数据

getGlobalPos(){Object} core/DisplayObject.js, line 564

获取物体相对于canvas世界坐标系的坐标位置

Returns:

Type	Description
Object

isVisible(){Boolean} core/DisplayObject.js, line 423

检查对象是否可见

Returns:

Type	Description
Boolean	对象是否可见

keyFrames(options, clear){JC.Animate} core/DisplayObject.js, line 354

keyFrames动画，设置物体动画的keyframe，可以为相邻的两个keyFrames之前配置差值时间及时间函数

display.keyFrames({
  ks: data.layers[0], // ae导出的动画数据
  fr: 30, // 动画的帧率，默认：30fps
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});

Name Type Description

options

Object

动画配置参数

Name	Type	Description
`ks`	Object	配置关键帧的位置、姿态，ae导出的动画数据
`fr`	Number	optional 配置关键帧的位置、姿态，ae导出的动画数据
`repeats`	Number	optional 设置动画执行完成后再重复多少次，优先级没有infinite高
`infinite`	Boolean	optional 设置动画无限次执行，优先级高于repeats
`alternate`	Boolean	optional 设置动画是否偶数次回返
`wait`	Number	optional 设置动画延迟时间，在重复动画不会生效默认 0ms
`delay`	Number	optional 设置动画延迟时间，在重复动画也会生效默认 0ms
`onUpdate`	function	optional 设置动画更新时的回调函数
`onComplete`	function	optional 设置动画结束时的回调函数，如果infinite为true该事件将不会触发

clear

Boolean

是否去掉之前的动画

Returns:

Type	Description
JC.Animate

motion(options, clear){JC.Animate} core/DisplayObject.js, line 322

motion动画，让物体按照设定好的曲线运动

display.motion({
  path: new JC.SvgCurve('M10 10 H 90 V 90 H 10 L 10 10), // path路径，需要继承自Curve
  attachTangent: true, // 物体是否捕获切线方向
  ease: JC.Tween.Ease.bezier(0.25,0.1,0.25,1), // 执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  duration: 1000, // 动画时长 ms单位 默认 300ms
  onUpdate: function(state,rate){}, // 动画更新回调
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});

Name Type Description

options

Object

动画配置参数

Name	Type	Description
`path`	Curve	path路径，需要继承自Curve，可以传入BezierCurve实例、NURBSCurve实例、SvgCurve实例
`attachTangent`	Boolean	optional 物体是否捕获切线方向
`ease`	String	optional 执行动画使用的缓动函数默认值为 JC.Tween.Ease.InOut
`repeats`	Number	optional 设置动画执行完成后再重复多少次，优先级没有infinite高
`infinite`	Boolean	optional 设置动画无限次执行，优先级高于repeats
`alternate`	Boolean	optional 设置动画是否偶数次回返
`duration`	Number	optional 设置动画执行时间默认 300ms
`wait`	Number	optional 设置动画延迟时间，在重复动画不会生效默认 0ms
`delay`	Number	optional 设置动画延迟时间，在重复动画也会生效默认 0ms
`onUpdate`	function	optional 设置动画更新时的回调函数
`onComplete`	function	optional 设置动画结束时的回调函数，如果infinite为true该事件将不会触发

clear

Boolean

是否去掉之前的动画

Returns:

Type	Description
JC.Animate

inherited off(type, fn){this} eventer/Eventer.js, line 44

事件对象的事件解绑函数

Name	Type	Description
`type`	String	事件类型
`fn`	function	注册时回调函数的引用

Returns:

Type	Description
this

inherited on(type, fn){this} eventer/Eventer.js, line 29

事件对象的事件绑定函数

Name	Type	Description
`type`	String	事件类型
`fn`	function	回调函数

Returns:

Type	Description
this

inherited once(type, fn){this} eventer/Eventer.js, line 69

事件对象的一次性事件绑定函数

Name	Type	Description
`type`	String	事件类型
`fn`	function	回调函数

Returns:

Type	Description
this

queues(runner, options, clear){JC.Queues} core/DisplayObject.js, line 414

以链式调用的方式触发一串动画（不支持alternate）

display.queues({ from: { x: 1 }, to: { x: 2 } })
  .then({ path: JC.BezierCurve([ point1, point2, point3, point4 ]) })
  .then({ from: { x: 2 }, to: { x: 1 } })
  .then({ from: { scale: 1 }, to: { scale: 0 } })
  .on('complete', function() {
    console.log('end queues');
  });

Name Type Default Description

runner

Object

optional

添加动画，可以是 animate 或者 motion 动画配置

options

Object

{}

optional

整个动画的循环等配置

Name	Type	Default	Description
`repeats`	Object	0	optional 设置动画执行完成后再重复多少次，优先级没有infinite高
`infinite`	Object	false	optional 设置动画无限次执行，优先级高于repeats
`wait`	Number		optional 设置动画延迟时间，在重复动画不会生效默认 0ms
`delay`	Number		optional 设置动画延迟时间，在重复动画也会生效默认 0ms

clear

Boolean

false

optional

是否去掉之前的动画

Returns:

Type	Description
JC.Queues

removeMask() core/DisplayObject.js, line 430

移除对象上的遮罩

runners(options, clear){JC.Animate} core/DisplayObject.js, line 388

不推荐使用，建议使用queues方法达到同样效果
runners动画，多个复合动画的组合形式，不支持alternate

display.runners({
  runners: [
    { from: {}, to: {} },
    { path: JC.BezierCurve([ point1, point2, point3, point4 ]) },
  ], // 组合动画，支持组合 animate、motion
  delay: 1000, // ae导出的动画数据
  wait: 100, // ae导出的动画数据
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});

Name Type Description

options

Object

动画配置参数

Name	Type	Default	Description
`runners`	Object		组合动画，支持 animate、motion 这些的自定义组合
`repeats`	Number	0	optional 设置动画执行完成后再重复多少次，优先级没有infinite高
`infinite`	Boolean	false	optional 设置动画无限次执行，优先级高于repeats
`wait`	Number	0	optional 设置动画延迟时间，在重复动画不会生效默认 0ms
`delay`	Number	0	optional 设置动画延迟时间，在重复动画也会生效默认 0ms
`onUpdate`	function		optional 设置动画更新时的回调函数
`onComplete`	function		optional 设置动画结束时的回调函数，如果infinite为true该事件将不会触发

clear

Boolean

是否去掉之前的动画

Returns:

Type	Description
JC.Animate

setArea(shape, clock) core/DisplayObject.js, line 574

设置显示对象的事件检测区域

Name	Type	Description
`shape`	JC.Polygon \| JC.Rectangle	JC内置形状类型的实例
`clock`	Boolean	是否锁住当前设置的监测区域不会被内部更新修改。

jcc2d

Class: DisplayObject

new JC.DisplayObject()

Extends

Members

alphaNumber

cursorBoolean

interactiveboolean

maskJC.Graphics

originXNumber

originYNumber

passEventBoolean

pivotXNumber

pivotYNumber

rotationNumber

scaleNumber

scaleNumber

scaleXNumber

scaleYNumber

skewXNumber

skewYNumber

visibleBoolean

xNumber

yNumber

Methods

animate(options, clear){JC.Animate}

Returns:

contains(global){Boolean}

Returns:

inherited emit(type, ev)

getGlobalPos(){Object}

Returns:

isVisible(){Boolean}

Returns:

keyFrames(options, clear){JC.Animate}

Returns:

motion(options, clear){JC.Animate}

Returns:

inherited off(type, fn){this}

Returns:

inherited on(type, fn){this}

Returns:

inherited once(type, fn){this}

Returns:

queues(runner, options, clear){JC.Queues}

Returns:

removeMask()

runners(options, clear){JC.Animate}

Returns:

setArea(shape, clock)