vue-cuihovah-ueditor
Version:
将ueditor添加了修改mathjax公式的功能，封装成了Vue组件
1,467 lines (1,452 loc) • 309 kB
JavaScript
/*!
* ====================================================
* kity - v2.0.5 - 2015-11-12
* https://github.com/fex-team/kity
* GitHub: https://github.com/fex-team/kity.git
* Copyright (c) 2015 Baidu FEX; Licensed BSD
* ====================================================
*/
(function () {
var _p = {
r: function(index) {
if (_p[index].inited) {
return _p[index].value;
}
if (typeof _p[index].value === "function") {
var module = {
exports: {}
}, returnValue = _p[index].value(null, module.exports, module);
_p[index].inited = true;
_p[index].value = returnValue;
if (returnValue !== undefined) {
return returnValue;
} else {
for (var key in module.exports) {
if (module.exports.hasOwnProperty(key)) {
_p[index].inited = true;
_p[index].value = module.exports;
return module.exports;
}
}
}
} else {
_p[index].inited = true;
return _p[index].value;
}
}
};
//src/animate/animator.js
/**
* @fileOverview
*
* 提供基本的动画支持
*/
_p[0] = {
value: function(require) {
function parseTime(str) {
var value = parseFloat(str, 10);
if (/ms/.test(str)) {
return value;
}
if (/s/.test(str)) {
return value * 1e3;
}
if (/min/.test(str)) {
return value * 60 * 1e3;
}
return value;
}
var Timeline = _p.r(8);
var easingTable = _p.r(1);
/**
* @class kity.Animator
* @catalog animate
* @description 表示一个动画启动器，可以作用于不同的对象进行动画
*/
var Animator = _p.r(11).createClass("Animator", {
/**
* @constructor
* @for kity.Animator
* @catalog animate
*
* @grammar new kity.Animator(beginValue, finishValue, setter)
* @grammar new kity.Animator(option)
*
* @param {any} beginValue|opt.beginValue
* 动画的起始值，允许的类型有数字、数组、字面量、kity.Point、kity.Vector、kity.Box、kity.Matrix
*
* @param {any} finishValue|opt.beginValue
* 动画的结束值，类型应于起始值相同
*
* @param {Function} setter|opt.setter
* 值的使用函数，接受三个参数: function(target, value, timeline)
* target {object} 动画的目标
* value {any} 动画的当前值
* timeline {kity.Timeline} 动画当前的时间线对象
*/
constructor: function(beginValue, finishValue, setter) {
if (arguments.length == 1) {
var opt = arguments[0];
this.beginValue = opt.beginValue;
this.finishValue = opt.finishValue;
this.setter = opt.setter;
} else {
this.beginValue = beginValue;
this.finishValue = finishValue;
this.setter = setter;
}
},
/**
* @method start()
* @for kity.Animator
* @description 使用当前的动画器启动在指定目标上启动动画
*
* @grammar start(target, duration, easing, delay, callback) => {kity.Timeline}
* @grammar start(target, option) => {kity.Timeline}
*
* @param {object} target
* 启动动画的目标
*
* @param {Number|String} duration|option.duration
* [Optional] 动画的持续时间，如 300、"300ms"、"1.5min"
*
* @param {String|Function} easing|option.easing
* [Optional] 动画使用的缓动函数，如 "ease"、"linear"、"swing"
*
* @param {Number|String} delay|option.delay
* [Optional] 动画的播放延迟时间
*
* @param {Function} callback|option.callback
* [Optional] 动画结束后的回调函数
*
* @example
*
* ```js
* var turnRed = new kity.Animator(
* new kity.Color('yellow'),
* new kity.Color('red'),
* function(target, value) {
* target.fill(value);
* });
*
* turnRed.start(rect, 300, 'ease', function() {
* console.log('I am red!');
* });
* ```
*/
start: function(target, duration, easing, delay, callback) {
if (arguments.length === 2 && typeof duration == "object") {
easing = duration.easing;
delay = duration.delay;
callback = duration.callback;
duration = duration.duration;
}
if (arguments.length === 4 && typeof delay == "function") {
callback = delay;
delay = 0;
}
var timeline = this.create(target, duration, easing, callback);
delay = parseTime(delay);
if (delay > 0) {
setTimeout(function() {
timeline.play();
}, delay);
} else {
timeline.play();
}
return timeline;
},
/**
* @method create()
* @for kity.Animator
* @description 使用当前的动画器为指定目标创建时间线
*
* @grammar create(target, duration, easing, callback) => {kity.Timeline}
*
* @param {object} target 要创建的时间线的目标
* @param {Number|String} duration 要创建的时间线的长度，如 300、"5s"、"0.5min"
* @param {String|Function} easing 要创建的时间线的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 时间线播放结束之后的回调函数
*
* @example
*
* ```js
* var expand = new kity.Animator({
* beginValue: function(target) {
* return target.getBox();
* },
* finishValue: function(target) {
* return target.getBox().expand(100, 100, 100, 100);
* },
* setter: function(target, value) {
* target.setBox(value)
* }
* });
*
* var timeline = expand.create(rect, 300);
* timeline.repeat(3).play();
* ```
*/
create: function(target, duration, easing, callback) {
var timeline;
duration = duration && parseTime(duration) || Animator.DEFAULT_DURATION;
easing = easing || Animator.DEFAULT_EASING;
if (typeof easing == "string") {
easing = easingTable[easing];
}
timeline = new Timeline(this, target, duration, easing);
if (typeof callback == "function") {
timeline.on("finish", callback);
}
return timeline;
},
/**
* @method reverse()
* @for kity.Animator
* @grammar reverse() => {kity.Animator}
* @description 创建一个与当前动画器相反的动画器
*
* @example
*
* ```js
* var turnYellow = turnRed.reverse();
* ```
*/
reverse: function() {
return new Animator(this.finishValue, this.beginValue, this.setter);
}
});
Animator.DEFAULT_DURATION = 300;
Animator.DEFAULT_EASING = "linear";
var Shape = _p.r(60);
_p.r(11).extendClass(Shape, {
/**
* @method animate()
* @for kity.Shape
* @description 在图形上播放使用指定的动画器播放动画，如果图形当前有动画正在播放，则会加入播放队列
*
* @grammar animate(animator, duration, easing, delay, callback)
*
* @param {object} animator 播放动画使用的动画器
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*
* @example
*
* ```js
* rect.animate(turnRed, 300); // turnRect 是一个动画器
* rect.animate(expand, 500); // turnRect 播放结束后播放 expand
* ```
*/
animate: function(animator, duration, easing, delay, callback) {
var queue = this._KityAnimateQueue = this._KityAnimateQueue || [];
var timeline = animator.create(this, duration, easing, callback);
function dequeue() {
queue.shift();
if (queue.length) {
setTimeout(queue[0].t.play.bind(queue[0].t), queue[0].d);
}
}
timeline.on("finish", dequeue);
queue.push({
t: timeline,
d: delay
});
if (queue.length == 1) {
setTimeout(timeline.play.bind(timeline), delay);
}
return this;
},
/**
* @method timeline()
* @for kity.Shape
* @description 获得当前正在播放的动画的时间线
*
* @grammar timeline() => {kity.Timeline}
*
* @example
*
* ```js
* rect.timeline().repeat(2);
* ```
*/
timeline: function() {
return this._KityAnimateQueue[0].t;
},
/**
* @method stop()
* @for kity.Shape
* @description 停止当前正在播放的动画
*
* @grammar stop() => {this}
*
* @example
*
* ```js
* rect.stop(); // 停止 rect 上的动画
* ```
*/
stop: function() {
var queue = this._KityAnimateQueue;
if (queue) {
while (queue.length) {
queue.shift().t.stop();
}
}
return this;
}
});
return Animator;
}
};
//src/animate/easing.js
/**
* Kity Animate Easing modified from jQuery Easing
* Author: techird
* Changes:
* 1. make easing functions standalone
* 2. remove the 'x' parameter
*/
/* ============================================================
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
* https://raw.github.com/danro/jquery-easing/master/LICENSE
* ======================================================== */
_p[1] = {
value: function(require, exports, module) {
var easings = {
// t: current_time, b: begin_value, c: change_value, d: duration
linear: function(t, b, c, d) {
return c * (t / d) + b;
},
swing: function(t, b, c, d) {
return easings.easeOutQuad(t, b, c, d);
},
ease: function(t, b, c, d) {
return easings.easeInOutCubic(t, b, c, d);
},
easeInQuad: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * (--t * (t - 2) - 1) + b;
},
easeInCubic: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
easeInQuart: function(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
easeInQuint: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
easeInSine: function(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function(t, b, c, d) {
return t === 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function(t, b, c, d) {
return t == d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function(t, b, c, d) {
if (t === 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
easeInElastic: function(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t === 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
s = p / 4;
} else s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t === 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
s = p / 4;
} else s = p / (2 * Math.PI) * Math.asin(c / a);
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t === 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
easeInBack: function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
},
easeInBounce: function(t, b, c, d) {
return c - easings.easeOutBounce(d - t, 0, c, d) + b;
},
easeOutBounce: function(t, b, c, d) {
if ((t /= d) < 1 / 2.75) {
return c * (7.5625 * t * t) + b;
} else if (t < 2 / 2.75) {
return c * (7.5625 * (t -= 1.5 / 2.75) * t + .75) + b;
} else if (t < 2.5 / 2.75) {
return c * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= 2.625 / 2.75) * t + .984375) + b;
}
},
easeInOutBounce: function(t, b, c, d) {
if (t < d / 2) return easings.easeInBounce(t * 2, 0, c, d) * .5 + b;
return easings.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
};
return easings;
}
};
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
//src/animate/frame.js
/**
* @fileOverview
*
* 提供动画帧的基本支持
*/
_p[2] = {
value: function(require, exports) {
// 原生动画帧方法 polyfill
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(fn) {
return setTimeout(fn, 1e3 / 60);
};
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.clearTimeout;
// 上一个请求的原生动画帧 id
var frameRequestId;
// 等待执行的帧动作的集合，这些帧的方法将在下个原生动画帧同步执行
var pendingFrames = [];
/**
* 添加一个帧到等待集合中
*
* 如果添加的帧是序列的第一个，至少有一个帧需要被执行，则会请求一个原生动画帧来执行
*/
function pushFrame(frame) {
if (pendingFrames.push(frame) === 1) {
frameRequestId = requestAnimationFrame(executePendingFrames);
}
}
/**
* 执行所有等待帧
*/
function executePendingFrames() {
var frames = pendingFrames;
pendingFrames = [];
while (frames.length) {
executeFrame(frames.pop());
}
frameRequestId = 0;
}
/**
* @method kity.requestFrame
* @catalog animate
* @grammar kity.requestFrame(action) => {frame}
* @description 请求一个帧，执行指定的动作。动作回调提供一些有用的信息
*
* @param {Function} action
*
* 要执行的动作，该动作回调有一个参数 frame，其中：
*
* frame.time {Number}
* 动作执行时的时间戳（ms）
*
* frame.index {Number}
* 当前执行的帧的编号（首帧为 0）
*
* frame.dur {Number}
* 上一帧至当前帧经过的时间，单位 ms
*
* frame.elapsed {Number}
* 从首帧开始到当前帧经过的时间，单位 ms
*
* frame.action {Number}
* 指向当前的帧处理函数
*
* frame.next()
* 表示下一帧继续执行。如果不调用该方法，将不会执行下一帧。
*
* @example
*
* ```js
* kity.requestFrame(function(frame) {
* console.log('平均帧率:' + frame.elapsed / (frame.index + 1));
*
* // 更新或渲染动作
*
* frame.next(); //继续执行下一帧
* });
* ```
*/
function requestFrame(action) {
var frame = initFrame(action);
pushFrame(frame);
return frame;
}
/**
* @method kity.releaseFrame
* @catalog animate
* @grammar kity.releaseFrame(frame)
* @description 释放一个已经请求过的帧，如果该帧在等待集合里，将移除，下个动画帧不会执行释放的帧
*
* @param {frame} frame 使用 kity.requestFrame() 返回的帧
*
* @example
*
* ```js
* var frame = kity.requestFrame(function() {....});
* kity.releaseFrame(frame);
* ```
*/
function releaseFrame(frame) {
var index = pendingFrames.indexOf(frame);
if (~index) {
pendingFrames.splice(index, 1);
}
if (pendingFrames.length === 0) {
cancelAnimationFrame(frameRequestId);
}
}
/**
* 初始化一个帧，主要用于后续计算
*/
function initFrame(action) {
var frame = {
index: 0,
time: +new Date(),
elapsed: 0,
action: action,
next: function() {
pushFrame(frame);
}
};
return frame;
}
/**
* 执行一个帧动作
*/
function executeFrame(frame) {
// 当前帧时间错
var time = +new Date();
// 当上一帧到当前帧经过的时间
var dur = time - frame.time;
//
// http://stackoverflow.com/questions/13133434/requestanimationframe-detect-stop
// 浏览器最小化或切换标签，requestAnimationFrame 不会执行。
// 检测时间超过 200 ms（频率小于 5Hz ） 判定为计时器暂停，重置为一帧长度
//
if (dur > 200) {
dur = 1e3 / 60;
}
frame.dur = dur;
frame.elapsed += dur;
frame.time = time;
frame.action.call(null, frame);
frame.index++;
}
// 暴露
exports.requestFrame = requestFrame;
exports.releaseFrame = releaseFrame;
}
};
//src/animate/motionanimator.js
/**
* @fileOverview
*
* 路径动画器，可以让一个物体沿着某个轨迹运动
*/
_p[3] = {
value: function(require) {
var Animator = _p.r(0);
var g = _p.r(34);
var Path = _p.r(46);
var Shape = _p.r(60);
/**
* @class kity.MotionAnimator
* @catalog animate
* @base kity.Animator
* @description 路径动画器，可以让一个物体沿着某个轨迹运动
*
* @example
*
* ```js
* var motionAnimator = new MotionAnimator('M0,0C100,0,100,0,100,100L200,200');
* motionAnimator.start(rect, 3000);
* ```
*/
var MotionAnimator = _p.r(11).createClass("MotionAnimator", {
base: Animator,
/**
* @constructor
* @for kity.MotionAnimator
* @grammar new kity.MotionAnimator(path, doRotate)
* @param {kity.Path|String|PathSegment} path 运动的轨迹，或者是 kity.Path 对象
* @param {boolean} doRotate 是否让运动的目标沿着路径的切线方向旋转
*/
constructor: function(path, doRotate) {
var me = this;
this.callBase({
beginValue: 0,
finishValue: 1,
setter: function(target, value) {
var path = me.motionPath instanceof Path ? me.motionPath.getPathData() : me.motionPath;
var point = g.pointAtPath(path, value);
target.setTranslate(point.x, point.y);
if (this.doRotate) target.setRotate(point.tan.getAngle());
}
});
/**
* @property doRotate
* @for kity.MotionAnimator
* @type {boolean}
* @description 是否让运动的目标沿着路径的切线方向旋转
*
* @example
*
* ```js
* motionAnimator.doRotate = true; // 目标沿着切线方向旋转
* ```
*/
this.doRotate = doRotate;
/**
* @property motionPath
* @for kity.MotionAnimator
* @type {kity.Path|String|PathSegment}
* @description 运动沿着的路径，可以在动画过程中更新
*/
this.motionPath = path;
}
});
_p.r(11).extendClass(Shape, {
/**
* @method motion()
* @catalog animate
* @for kity.Shape
* @description 让图形沿着指定的路径运动
*
* @grammar motion(path, duration, easing, delay, callback) => this
*
* @param {kity.Path|String|PathSegment} path 运动的轨迹，或者是 kity.Path 对象
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
motion: function(path, duration, easing, delay, callback) {
return this.animate(new MotionAnimator(path), duration, easing, delay, callback);
}
});
return MotionAnimator;
}
};
//src/animate/opacityanimator.js
/**
* @fileOverview
*
* 透明度动画器，让图形动画过度到指定的透明度。
*/
_p[4] = {
value: function(require) {
var Animator = _p.r(0);
/**
* @class kity.OpacityAnimator
* @catalog animate
* @base kity.Animator
* @description 透明度动画器，让图形动画过度到指定的透明度
*/
var OpacityAnimator = _p.r(11).createClass("OpacityAnimator", {
base: Animator,
/**
* @constructor
* @for kity.OpacityAnimator
* @grammar new kity.OpacityAnimator(opacity)
*
* @param {Number} opacity 目标透明度，取值范围 0 - 1
*/
constructor: function(opacity) {
this.callBase({
beginValue: function(target) {
return target.getOpacity();
},
finishValue: opacity,
setter: function(target, value) {
target.setOpacity(value);
}
});
}
});
var Shape = _p.r(60);
_p.r(11).extendClass(Shape, {
/**
* @method fxOpacity()
* @catalog animate
* @for kity.Shape
* @description 让图形的透明度以动画的形式过渡到指定的值
*
* @grammar fxOpacity(opacity, duration, easing, delay, callback) => {this}
*
* @param {Number} opacity 动画的目标透明度
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fxOpacity: function(opacity, duration, easing, delay, callback) {
return this.animate(new OpacityAnimator(opacity), duration, easing, delay, callback);
},
/**
* @method fadeTo()
* @catalog animate
* @for kity.Shape
* @description 让图形的透明度以动画的形式过渡到指定的值
*
* @grammar fadeTo(opacity, duration, easing, delay, callback) => {this}
*
* @param {Number} opacity 动画的目标透明度
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fadeTo: function() {
return this.fxOpacity.apply(this, arguments);
},
/**
* @method fadeIn()
* @catalog animate
* @for kity.Shape
* @description 让图形淡入
*
* @grammar fadeIn(duration, easing, delay, callback) => {this}
*
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fadeIn: function() {
return this.fxOpacity.apply(this, [ 1 ].concat([].slice.call(arguments)));
},
/**
* @method fadeOut()
* @catalog animate
* @for kity.Shape
* @description 让图形淡出
*
* @grammar fadeIn(duration, easing, delay, callback) => {this}
*
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fadeOut: function() {
return this.fxOpacity.apply(this, [ 0 ].concat([].slice.call(arguments)));
}
});
return OpacityAnimator;
}
};
//src/animate/pathanimator.js
/**
* @fileOverview
*
* 路径补间动画器，让图形从一个形状变为另一个形状
*/
_p[5] = {
value: function(require) {
var Animator = _p.r(0);
var g = _p.r(34);
/**
* @catalog animate
*
* @class kity.PathAnimator
* @base kity.Animator
* @description 路径补间动画器，让图形从一个形状变为另一个形状
*
* @example
*
* ```js
* var path = new kity.Path('M0,0L0,100');
* var pa = new kity.PathAnimator('M0,0C100,0,100,0,100,100');
* pa.start(path, 300);
* ```
*/
var PathAnimator = _p.r(11).createClass("OpacityAnimator", {
base: Animator,
/**
* @constructor
* @for kity.PathAnimator
*
* @grammar new kity.Path.Animator(path)
*
* @param {String|PathSegment} path 目标形状的路径数据
*
*/
constructor: function(path) {
this.callBase({
beginValue: function(target) {
this.beginPath = target.getPathData();
return 0;
},
finishValue: 1,
setter: function(target, value) {
target.setPathData(g.pathTween(this.beginPath, path, value));
}
});
}
});
var Path = _p.r(46);
_p.r(11).extendClass(Path, {
/**
* @catalog animate
*
* @method fxPath()
* @for kity.Shape
* @description 以动画的形式把路径变换为新路径
*
* @grammar fxPath(path, duration, easing, delay, callback) => {this}
*
* @param {String|PathSegment} path 要变换新路径
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fxPath: function(path, duration, easing, delay, callback) {
return this.animate(new PathAnimator(path), duration, easing, delay, callback);
}
});
return PathAnimator;
}
};
//src/animate/rotateanimator.js
/**
* @fileOverview
*
* 提供支持目标旋转的动画器
*/
_p[6] = {
value: function(require) {
var Animator = _p.r(0);
/**
* @class kity.RotateAnimator
* @base Animator
* @description 提供支持目标旋转的动画器
*/
var RotateAnimator = _p.r(11).createClass("RotateAnimator", {
base: Animator,
/**
* @constructor
* @for kity.RotateAnimator
*
* @grammar new kity.RotateAnimator(deg, ax, ay)
*
* @param {Number} deg 要旋转的角度
*/
constructor: function(deg) {
this.callBase({
beginValue: 0,
finishValue: deg,
setter: function(target, value, timeline) {
var delta = timeline.getDelta();
target.rotate(delta, ax, ay);
}
});
}
});
var Shape = _p.r(60);
_p.r(11).extendClass(Shape, {
/**
* @method fxRotate()
* @for kity.Shape
* @description 让目标以动画旋转指定的角度
*
* @grammar fxRotate(deg, duration, easing, delay) => {this}
*
* @param {Number} deg 要旋转的角度
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fxRotate: function(deg, duration, easing, delay, callback) {
return this.animate(new RotateAnimator(deg), duration, easing, delay, callback);
}
});
return RotateAnimator;
}
};
//src/animate/scaleanimator.js
/**
* @fileOverview
*
* 提供支持目标缩放的动画器
*/
_p[7] = {
value: function(require) {
var Animator = _p.r(0);
/**
* @class kity.ScaleAnimator
* @base kity.Animator
* @description 提供支持目标缩放的动画器
*/
var ScaleAnimator = _p.r(11).createClass("ScaleAnimator", {
base: Animator,
/**
* @constructor
* @for kity.ScaleAnimator
*
* @grammar new kity.ScaleAnimator(sx, sy)
* @param {Number} sx x 轴的缩放比例
* @param {Number} sy y 轴的缩放比例
*/
constructor: function(sx, sy) {
this.callBase({
beginValue: 0,
finishValue: 1,
setter: function(target, value, timeline) {
var delta = timeline.getDelta();
var kx = Math.pow(sx, delta);
var ky = Math.pow(sy, delta);
target.scale(ky, kx);
}
});
}
});
var Shape = _p.r(60);
_p.r(11).extendClass(Shape, {
/**
* @method fxScale
* @for kity.Shape
* @description 动画缩放当前的图形
*
* @grammar fxScale(sx, sy, duration, easing, delay, callback) => {this}
*
* @param {Number} sx x 轴的缩放比例
* @param {Number} sy y 轴的缩放比例
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fxScale: function(sx, sy, duration, easing, delay, callback) {
return this.animate(new ScaleAnimator(sx, sy), duration, easing, delay, callback);
}
});
return ScaleAnimator;
}
};
//src/animate/timeline.js
/**
* @fileOverview
*
* 动画时间线的实现
*/
_p[8] = {
value: function(require) {
var EventHandler = _p.r(33);
var utils = _p.r(12);
var frame = _p.r(2);
function getPercentValue(b, f, p) {
return utils.paralle(b, f, function(b, f) {
return b + (f - b) * p;
});
}
function getDelta(v1, v2) {
return utils.paralle(v1, v2, function(v1, v2) {
return v2 - v1;
});
}
function TimelineEvent(timeline, type, param) {
this.timeline = timeline;
this.target = timeline.target;
this.type = type;
for (var name in param) {
if (param.hasOwnProperty(name)) {
this[name] = param[name];
}
}
}
/**
* @class kity.Timeline
* @catalog animate
* @mixins EventHandler
* @description 动画时间线
*/
var Timeline = _p.r(11).createClass("Timeline", {
mixins: [ EventHandler ],
/**
* @constructor
* @for kity.Timeline
* @private
* @description 时间线应该由动画器进行构造，不应手动创建
*
*/
constructor: function(animator, target, duration, easing) {
this.callMixin();
this.target = target;
this.time = 0;
this.duration = duration;
this.easing = easing;
this.animator = animator;
this.beginValue = animator.beginValue;
this.finishValue = animator.finishValue;
this.setter = animator.setter;
this.status = "ready";
},
/**
* @private
*
* 让时间线进入下一帧
*/
nextFrame: function(frame) {
if (this.status != "playing") {
return;
}
this.time += frame.dur;
this.setValue(this.getValue());
if (this.time >= this.duration) {
this.timeUp();
}
frame.next();
},
/**
* @method getPlayTime()
* @for kity.Timeline
* @grammar getPlayTime() => {Number}
* @description 获得当前播放的时间，取值区间为 [0, duration]
*/
getPlayTime: function() {
return this.rollbacking ? this.duration - this.time : this.time;
},
/**
* @method getTimeProportion()
* @for kity.Timeline
* @grammar getTimeProportion() => {Number}
* @description 获得当前播放时间的比例，取值区间为 [0, 1]
*/
getTimeProportion: function() {
return this.getPlayTime() / this.duration;
},
/**
* @method getValueProportion()
* @for kity.Timeline
* @grammar getValueProportion() => {Number}
* @description 获得当前播放时间对应值的比例，取值区间为 [0, 1]；该值实际上是时间比例值经过缓动函数计算之后的值。
*/
getValueProportion: function() {
return this.easing(this.getPlayTime(), 0, 1, this.duration);
},
/**
* @method getValue()
* @for kity.Timeline
* @grammar getValue() => {any}
* @description 返回当前播放时间对应的值。
*/
getValue: function() {
var b = this.beginValue;
var f = this.finishValue;
var p = this.getValueProportion();
return getPercentValue(b, f, p);
},
/**
* @private
*
* 把值通过动画器的 setter 设置到目标上
*/
setValue: function(value) {
this.lastValue = this.currentValue;
this.currentValue = value;
this.setter.call(this.target, this.target, value, this);
},
/**
* @method getDelta()
* @for kity.Timeline
* @grammar getDelta() => {any}
* @description 返回当前值和上一帧的值的差值
*/
getDelta: function() {
this.lastValue = this.lastValue === undefined ? this.beginValue : this.lastValue;
return getDelta(this.lastValue, this.currentValue);
},
/**
* @method play()
* @for kity.Timeline
* @grammar play() => {this}
* @description 让时间线播放，如果时间线还没开始，或者已停止、已结束，则重头播放；如果是已暂停，从暂停的位置继续播放
*/
play: function() {
var lastStatus = this.status;
this.status = "playing";
switch (lastStatus) {
case "ready":
if (utils.isFunction(this.beginValue)) {
this.beginValue = this.beginValue.call(this.target, this.target);
}
if (utils.isFunction(this.finishValue)) {
this.finishValue = this.finishValue.call(this.target, this.target);
}
this.time = 0;
this.setValue(this.beginValue);
this.frame = frame.requestFrame(this.nextFrame.bind(this));
break;
case "finished":
case "stoped":
this.time = 0;
this.frame = frame.requestFrame(this.nextFrame.bind(this));
break;
case "paused":
this.frame.next();
}
/**
* @event play
* @for kity.Timeline
* @description 在时间线播放后触发
*
* @param {String} event.lastStatus
* 表示播放前的上一个状态，可能取值为 'ready'、'finished'、'stoped'、'paused'
*/
this.fire("play", new TimelineEvent(this, "play", {
lastStatus: lastStatus
}));
return this;
},
/**
* @method pause()
* @for kity.Timeline
* @description 暂停当前的时间线
*
* @grammar pause() => {this}
*/
pause: function() {
this.status = "paused";
/**
* @event pause
* @for kity.Timeline
* @description 暂停事件，在时间线暂停时触发
*/
this.fire("pause", new TimelineEvent(this, "pause"));
frame.releaseFrame(this.frame);
return this;
},
/**
* @method stop()
* @for kity.Timeline
* @description 停止当前时间线
*
* @grammar stop() => {this}
*/
stop: function() {
this.status = "stoped";
this.setValue(this.finishValue);
this.rollbacking = false;
/**
* @event stop
* @for kity.Timeline
* @description 停止时间，在时间线停止时触发
*/
this.fire("stop", new TimelineEvent(this, "stop"));
frame.releaseFrame(this.frame);
return this;
},
/**
* @private
*
* 播放结束之后的处理
*/
timeUp: function() {
if (this.repeatOption) {
this.time = 0;
if (this.rollback) {
if (this.rollbacking) {
this.decreaseRepeat();
this.rollbacking = false;
} else {
this.rollbacking = true;
/**
* @event rollback
* @for kity.Timeline
* @description 回滚事件，在时间线回滚播放开始的时候触发
*/
this.fire("rollback", new TimelineEvent(this, "rollback"));
}
} else {
this.decreaseRepeat();
}
if (!this.repeatOption) {
this.finish();
} else {
/**
* @event repeat
* @for kity.Timeline
* @description 循环事件，在时间线循环播放开始的时候触发
*/
this.fire("repeat", new TimelineEvent(this, "repeat"));
}
} else {
this.finish();
}
},
/**
* @private
*
* 决定播放结束的处理
*/
finish: function() {
this.setValue(this.finishValue);
this.status = "finished";
/**
* @event finish
* @for kity.Timeline
* @description 结束事件，在时间线播放结束后触发（包括重复和回滚都结束）
*/
this.fire("finish", new TimelineEvent(this, "finish"));
frame.releaseFrame(this.frame);
},
/**
* @private
*
* 循环次数递减
*/
decreaseRepeat: function() {
if (this.repeatOption !== true) {
this.repeatOption--;
}
},
/**
* @method repeat()
* @for kity.Timeline
* @description 设置时间线的重复选项
*
* @grammar repeat(repeat, rollback) => {this}
*
* @param {Number|Boolean} repeat
* 是否重复播放，设置为 true 无限循环播放，设置数值则循环指定的次数
* @param {Boolean} rollback
* 指示是否要回滚播放。
* 如果设置为真，一次事件到 duration 则一个来回算一次循环次数，否则播放完成一次算一次循环次数
*
*/
repeat: function(repeat, rollback) {
this.repeatOption = repeat;
this.rollback = rollback;
return this;
}
});
Timeline.requestFrame = frame.requestFrame;
Timeline.releaseFrame = frame.releaseFrame;
return Timeline;
}
};
//src/animate/translateanimator.js
/**
* @fileOverview
*
* 提供让图形移动的动画器
*/
_p[9] = {
value: function(require) {
var Animator = _p.r(0);
/**
* @class kity.TranslateAnimator
* @base kity.Animator
* @description 提供让图形移动的动画器
*/
var TranslateAnimator = _p.r(11).createClass("TranslateAnimator", {
base: Animator,
/**
* @constructor
* @for kity.TranslateAnimator
* @grammar new kity.TranslateAnimator(x, y)
* @param {Number} x x 方向上需要移动的距离
* @param {Number} y y 方向上需要移动的距离
*/
constructor: function(x, y) {
this.callBase({
x: 0,
y: 0
}, {
x: x,
y: y
}, function(target, value, timeline) {
var delta = timeline.getDelta();
target.translate(delta.x, delta.y);
});
}
});
var Shape = _p.r(60);
_p.r(11).extendClass(Shape, {
/**
* @method fxTranslate()
* @for kity.Shape
* @description 让目标以动画平移指定的距离
*
* @grammar fxTranslate(x, y, duration, easing, delay, callback) => {this}
*
* @param {Number} x x 方向上需要移动的距离
* @param {Number} y y 方向上需要移动的距离
* @param {Number|String} duration 动画的播放长度，如 300、"5s"、"0.5min"
* @param {Number|String} delay 动画播放前的延时
* @param {String|Function} easing 动画播放使用的缓动函数，如 'ease'、'linear'、'swing'
* @param {Function} callback 播放结束之后的回调函数
*/
fxTranslate: function(x, y, duration, easing, delay, callback) {
return this.animate(new TranslateAnimator(x, y), duration, easing, delay, callback);
}
});
return TranslateAnimator;
}
};
//src/core/browser.js
/**
* @fileOverview
*
* 提供浏览器判断的一些字段
*/
_p[10] = {
value: function() {
/**
* @class kity.Browser
* @catalog core
* @static
* @description 提供浏览器信息
*/
var browser = function() {
var agent = navigator.userAgent.toLowerCase(), opera = window.opera, browser;
// 浏览器对象
browser = {
/**
* @property platform
* @description 获取浏览器所在系统,"Win"->Windows;"Mac"->Mac;"Lux"->Linux
* @type {String}
*/
platform: function(navigator) {
var _p = {
win32: "Win",
macintel: "Mac"
};
return _p[navigator.platform.toLowerCase()] || "Lux";
}(navigator),
/**
* 猎豹,区分两种不同内核
*/
lb: function(agent) {
if (~agent.indexOf("lbbrowser")) {
return ~agent.indexOf("msie") ? "ie" : "chrome";
}
return false;
}(agent),
/**
* 搜狗
*/
sg: /se[\s\S]+metasr/.test(agent),