Skip to content

F
fyge_for_tb
Commit f7723ae1 authored by wjf's avatar wjf
Browse files
Options

2.0.28

parent e1714ace
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1769 additions and 2000 deletions
build/FYGE.d.ts
View file @ f7723ae1
declare namespace FYGE{export const VERSION = "2.0.27";
declare namespace FYGE{export const VERSION = "2.0.28";
export const osType: "ios" | "android" | "pc";
......@@ -6167,7 +6167,7 @@ export class Container extends DisplayObject {
*/
protected _renderCanvas(renderer: CanvasRenderer): void;
/**
* 更新方法，注意别覆盖，子类可继承修改
* 节点每帧更新方法，注意别覆盖，否则每帧监听将失效，子类可继承修改
*/
update(): void;
/**
......@@ -8614,6 +8614,10 @@ export class AnimationClip extends EventDispatcher {
* 记录时间
*/
protected curTime: number;
/**
* 当前时间
*/
get currentTime(): number;
private _endMark;
/**
* 需要挂在循环里的方法，传时间间隔
......@@ -8661,62 +8665,250 @@ export class AnimationClip extends EventDispatcher {
resetState(): void;
}
export const getBezierEasing: (a: any, b: any, c: any, d: any, nm?: any) => any;
export function buildBezierProps(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, points: any, fnc: any, limit?: number): void;
export function buildBezierProp(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, time: any, fnc: any): any[];
export class Lottie extends Container {
export abstract class AnimationNode extends Container {
/**
* 原始数据，尽量只获取，不修改
*/
private rawData;
protected rawData: any;
/**
* 总时间，秒计
*/
get totalTime(): number;
abstract get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
abstract get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
abstract get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
private _fps;
abstract get videoHeight(): number;
/**
* 帧率
*/
protected _fps: number;
/**
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
/**
* 设置每秒刷新率，可能值30，60等等
* 子类重写get方法时必须重写set方法，否则执行不到父类的set方法
*/
set fps(v: number);
private lottieContainer;
/**
* 用于控制动画，这里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
* 用于控制动画，
* Lottie和SvgaAni里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
*/
animationClip: AnimationClip;
constructor(data: LottieData);
init(data: LottieData): void;
protected animationClip: AnimationClip;
constructor(data: any);
/**
* 抽象的初始化类
* @param data
*/
abstract init(data: any): void;
private lastTime;
/**
* 更新方法，直接写了，后续继承的Lottie和SvgaAni基本不用改，有需要自行重写
*/
update(): void;
/**
* 从头播放，需要自定义的用this.animationClip
* @param loop 播放测试，默认0，一直循环播放
* @param callback 回调
* 播放loop次后回调
* @param loop 播放次数
* @param callback 播放次数完后回调
*/
play(loop?: number, callback?: () => void): void;
/**
* 开始播放
* @param isFront 是否正向，默认是
*/
play(isFront?: boolean): void;
/**
* 停止，需要自定义的用this.animationClip
* @param isReset 是否重置，默认false，不重置
*/
stop(isReset?: boolean): void;
/**
* 当前帧，从0开始
* @property currentFrame
* @public
* @since 1.0.0
* @type {number}
* @default 1
* @readonly
*/
get currentFrame(): number;
/**
* 当前动画是否处于播放状态
* @property isPlaying
* @readOnly
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isPlaying(): boolean;
/**
* 动画的播放方向,是顺着播还是在倒着播
* @property isFront
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isFront(): boolean;
/**
* 停在指定时间
* @param time
* @param force 是否强制更新，默认false，如果发现没stop在指定位置，可以试试设置true
*/
gotoAndStop: (time: number, force?: boolean) => void;
/**
* 从某时刻开始播放
* @param time
* @param isFront 默认true，正向播放
*/
gotoAndPlay: (time: number, isFront?: boolean) => void;
/**
* 在一个区间范围内播放
* @param beginTime 开始时间，秒计，默认0，
* @param endTime 结束时间，秒计，默认_totalTime
* @param loops 循环次数，默认1，0表示无限循环
* @param callback 参数loop表示还剩几次
*/
startAniRange: (beginTime: number, endTime: number, loops: number, callback?: (loop: number) => void) => void;
}
export class SvgaAni extends AnimationNode {
/**
* 原始数据，接口在解析类上，不搞先，尽量只获取，不修改
*/
protected rawData: VideoEntity;
/**
* 总时间，秒计
*/
get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
/**
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
set fps(v: number);
/**
* 用于控制动画，这里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
*/
animationClip: AnimationClip;
constructor(data: VideoEntity);
/**
* 初始化方法
* @param data
* @returns
*/
init(data: VideoEntity): void;
/**
* 添加一个动画部件，主要用于换装添加部件
* @param imageKey 用于查找图层对应动画的key值，只找首个用key的图层，所以建议视觉保证使用唯一
* @param child 需要设置动画的显示对象
* @param index 需要显示的层级
* @param x 调整位置x
* @param y 调整位置y
* @param scaleX
* @param scaleY
* @param rotation
* @param anchorX
* @param anchorY
* @returns
*/
addAniPart(imageKey: string, child: Container, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): void;
/**
* 给图层修改图片，一般用于出奖动效的奖品图片的替换，尺寸不一致时会做居中适配
* @param imagekey 会查找所有用了imagekey的图层
* @param imageUrl 图片路径
*/
setImage(imagekey: string, imageUrl: string): void;
/**
* 给对应图层修改纹理，直接替换，所以建议原纹理和替换纹理尺寸一致
* @param imagekey 会查找所有用了imagekey的图层
* @param texture 纹理
*/
setTexture(imagekey: string, texture: Texture): void;
/**
* 根据imagekey获取所有用到过的图层
* @param imagekey
* @returns
*/
getSpritesByImageKey(imagekey: string): Sprite[];
/**
* 用源数据拷贝一份，用相应参数，并未拷贝遮罩或矢量数据
* @param frames 源数据
* @param x 偏移x，默认0
* @param y 偏移y，默认0
* @param scaleX 相对缩放x，默认1
* @param scaleY 相对缩放y，默认1
* @param rotation 相对旋转,角度制，默认0
* @param anchorX 相对锚点x，默认0
* @param anchorY 相对锚点y，默认0
*/
static deepCopyFrames(frames: FrameEntity[], x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): any[];
}
export {};
export const getBezierEasing: (a: any, b: any, c: any, d: any, nm?: any) => any;
export function buildBezierProp(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, time: any, fnc: any): any[];
export class Lottie extends AnimationNode {
/**
* 原始数据，尽量只获取，不修改
*/
protected rawData: LottieData;
/**
* 总时间，秒计
*/
get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
/**
* 重写
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
set fps(v: number);
private lottieContainer;
constructor(data: LottieData);
/**
* 初始化方法
* @param data
* @returns
*/
init(data: LottieData): void;
}
export {};
......
build/fyge.min.js
View file @ f7723ae1
This diff is collapsed.
build/fyge.min.js.map
View file @ f7723ae1
This diff is collapsed.
build/types.d.ts
View file @ f7723ae1
export const VERSION = "2.0.27";
export const VERSION = "2.0.28";
export const osType: "ios" | "android" | "pc";
......@@ -6167,7 +6167,7 @@ export class Container extends DisplayObject {
*/
protected _renderCanvas(renderer: CanvasRenderer): void;
/**
* 更新方法，注意别覆盖，子类可继承修改
* 节点每帧更新方法，注意别覆盖，否则每帧监听将失效，子类可继承修改
*/
update(): void;
/**
......@@ -8614,6 +8614,10 @@ export class AnimationClip extends EventDispatcher {
* 记录时间
*/
protected curTime: number;
/**
* 当前时间
*/
get currentTime(): number;
private _endMark;
/**
* 需要挂在循环里的方法，传时间间隔
......@@ -8661,62 +8665,250 @@ export class AnimationClip extends EventDispatcher {
resetState(): void;
}
export const getBezierEasing: (a: any, b: any, c: any, d: any, nm?: any) => any;
export function buildBezierProps(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, points: any, fnc: any, limit?: number): void;
export function buildBezierProp(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, time: any, fnc: any): any[];
export class Lottie extends Container {
export abstract class AnimationNode extends Container {
/**
* 原始数据，尽量只获取，不修改
*/
private rawData;
protected rawData: any;
/**
* 总时间，秒计
*/
get totalTime(): number;
abstract get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
abstract get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
abstract get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
private _fps;
abstract get videoHeight(): number;
/**
* 帧率
*/
protected _fps: number;
/**
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
/**
* 设置每秒刷新率，可能值30，60等等
* 子类重写get方法时必须重写set方法，否则执行不到父类的set方法
*/
set fps(v: number);
private lottieContainer;
/**
* 用于控制动画，这里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
* 用于控制动画，
* Lottie和SvgaAni里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
*/
animationClip: AnimationClip;
constructor(data: LottieData);
init(data: LottieData): void;
protected animationClip: AnimationClip;
constructor(data: any);
/**
* 抽象的初始化类
* @param data
*/
abstract init(data: any): void;
private lastTime;
/**
* 更新方法，直接写了，后续继承的Lottie和SvgaAni基本不用改，有需要自行重写
*/
update(): void;
/**
* 从头播放，需要自定义的用this.animationClip
* @param loop 播放测试，默认0，一直循环播放
* @param callback 回调
* 播放loop次后回调
* @param loop 播放次数
* @param callback 播放次数完后回调
*/
play(loop?: number, callback?: () => void): void;
/**
* 开始播放
* @param isFront 是否正向，默认是
*/
play(isFront?: boolean): void;
/**
* 停止，需要自定义的用this.animationClip
* @param isReset 是否重置，默认false，不重置
*/
stop(isReset?: boolean): void;
/**
* 当前帧，从0开始
* @property currentFrame
* @public
* @since 1.0.0
* @type {number}
* @default 1
* @readonly
*/
get currentFrame(): number;
/**
* 当前动画是否处于播放状态
* @property isPlaying
* @readOnly
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isPlaying(): boolean;
/**
* 动画的播放方向,是顺着播还是在倒着播
* @property isFront
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isFront(): boolean;
/**
* 停在指定时间
* @param time
* @param force 是否强制更新，默认false，如果发现没stop在指定位置，可以试试设置true
*/
gotoAndStop: (time: number, force?: boolean) => void;
/**
* 从某时刻开始播放
* @param time
* @param isFront 默认true，正向播放
*/
gotoAndPlay: (time: number, isFront?: boolean) => void;
/**
* 在一个区间范围内播放
* @param beginTime 开始时间，秒计，默认0，
* @param endTime 结束时间，秒计，默认_totalTime
* @param loops 循环次数，默认1，0表示无限循环
* @param callback 参数loop表示还剩几次
*/
startAniRange: (beginTime: number, endTime: number, loops: number, callback?: (loop: number) => void) => void;
}
export class SvgaAni extends AnimationNode {
/**
* 原始数据，接口在解析类上，不搞先，尽量只获取，不修改
*/
protected rawData: VideoEntity;
/**
* 总时间，秒计
*/
get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
/**
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
set fps(v: number);
/**
* 用于控制动画，这里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
*/
animationClip: AnimationClip;
constructor(data: VideoEntity);
/**
* 初始化方法
* @param data
* @returns
*/
init(data: VideoEntity): void;
/**
* 添加一个动画部件，主要用于换装添加部件
* @param imageKey 用于查找图层对应动画的key值，只找首个用key的图层，所以建议视觉保证使用唯一
* @param child 需要设置动画的显示对象
* @param index 需要显示的层级
* @param x 调整位置x
* @param y 调整位置y
* @param scaleX
* @param scaleY
* @param rotation
* @param anchorX
* @param anchorY
* @returns
*/
addAniPart(imageKey: string, child: Container, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): void;
/**
* 给图层修改图片，一般用于出奖动效的奖品图片的替换，尺寸不一致时会做居中适配
* @param imagekey 会查找所有用了imagekey的图层
* @param imageUrl 图片路径
*/
setImage(imagekey: string, imageUrl: string): void;
/**
* 给对应图层修改纹理，直接替换，所以建议原纹理和替换纹理尺寸一致
* @param imagekey 会查找所有用了imagekey的图层
* @param texture 纹理
*/
setTexture(imagekey: string, texture: Texture): void;
/**
* 根据imagekey获取所有用到过的图层
* @param imagekey
* @returns
*/
getSpritesByImageKey(imagekey: string): Sprite[];
/**
* 用源数据拷贝一份，用相应参数，并未拷贝遮罩或矢量数据
* @param frames 源数据
* @param x 偏移x，默认0
* @param y 偏移y，默认0
* @param scaleX 相对缩放x，默认1
* @param scaleY 相对缩放y，默认1
* @param rotation 相对旋转,角度制，默认0
* @param anchorX 相对锚点x，默认0
* @param anchorY 相对锚点y，默认0
*/
static deepCopyFrames(frames: FrameEntity[], x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): any[];
}
export {};
export const getBezierEasing: (a: any, b: any, c: any, d: any, nm?: any) => any;
export function buildBezierProp(pt1: any, pt2: any, pt3: any, pt4: any, startIndex: any, endIndex: any, time: any, fnc: any): any[];
export class Lottie extends AnimationNode {
/**
* 原始数据，尽量只获取，不修改
*/
protected rawData: LottieData;
/**
* 总时间，秒计
*/
get totalTime(): number;
/**
* 总帧数
*/
get totalFrames(): number;
/**
* 动画显示宽度
*/
get videoWidth(): number;
/**
* 动画显示高度
*/
get videoHeight(): number;
/**
* 重写
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number;
set fps(v: number);
private lottieContainer;
constructor(data: LottieData);
/**
* 初始化方法
* @param data
* @returns
*/
init(data: LottieData): void;
}
export {};
......
examples/2d.html
View file @ f7723ae1
......@@ -201,7 +201,7 @@
//svga动画
SvgaParser.loadSvga("./res/小贱成年常态.svga", (v) => {
stage.addChild(new FYGE.MovieClip(v)).y -= 600
stage.addChild(new FYGE.SvgaAni(v)).y -= 600
})
//lottie动画（文件全）
FYGE.GlobalLoader.loadJson((s, json) => {
......@@ -248,7 +248,7 @@
//测试svga蒙版
SvgaParser.loadSvga("./res/测蒙版.svga", (v) => {
stage.addChild(new FYGE.MovieClip(v)).y -= 100
stage.addChild(new FYGE.SvgaAni(v)).y -= 100
})
// var ss = stage.addChild(new FYGE.EditableText())
......
examples/previewLottieSvga.html
View file @ f7723ae1
......@@ -75,7 +75,7 @@
if (name.indexOf(".svga") >= 0) {
SvgaParser.loadSvga(src, (v) => {
console.log(v)
stage.addChild(new FYGE.MovieClip(v))
window.asd= stage.addChild(new FYGE.SvgaAni(v))
// .position.set(
// (750 - v.videoSize.width) / 2,
// (stage.viewRect.height - v.videoSize.height) / 2,
......@@ -93,6 +93,14 @@
}
})
</script>
<!-- <script src="http://172.16.228.98:8090/dist/index.js"></script>
<script>
agent.start()
setTimeout(()=>{
sssss
},1000)
</script> -->
</body>
</html>
\ No newline at end of file
package.json
View file @ f7723ae1
{
"name": "fyge",
"version": "2.0.27",
"version": "2.0.28",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......
record.txt
View file @ f7723ae1
......@@ -363,6 +363,16 @@
Spine添加遮罩（tempClipContainers，ClippingAttachment，readAttachment添加SkinType.clipping，createGraphics，updateGraphics）
SpineAniManager的showAni方法loops参数默认值修改为0，默认无限循环，applyMixingFrom修改为私有方法
2.0.28 AnimationClip加了个currentTime的get方法
AnimationClip的gotoAndPlay、gotoAndStop、startAniRange方法的time修正改用clamp方法
AnimationClip的startAniRange放的循环监听里callback后加上rectify。否则下一帧生效，会导致部分动效会闪一帧
添加抽象类AnimationNode，用于SvgaAni和Lottie的抽象
删除原先的Lottie，LottieNew作为Lottie
导出SvgaAni
MovieClip构造函数添加提醒替换类
删除buildBezierEaserProps.ts文件
buildBezierProps文件改成buildBezierProp，去掉原先的buildBezierProps方法
现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT
......
src/2d/AnimationClip.ts
View file @ f7723ae1
import { EventDispatcher, Event } from "./events";
import { clamp } from "./utils";
/**
* 就是个时间轴，setValue和resetValue方法自行实现
......@@ -83,6 +84,12 @@ export class AnimationClip extends EventDispatcher {
* 记录时间
*/
protected curTime: number = 0;
/**
* 当前时间
*/
get currentTime() {
return this.curTime;
}
private _endMark: boolean = false;
/**
......@@ -148,8 +155,9 @@ export class AnimationClip extends EventDispatcher {
let s = this;
s._isFront = isFront;
s._isPlaying = true;
if (time > s._totalTime) time = s._totalTime;
if (time < 1) time = 0;
// if (time > s._totalTime) time = s._totalTime;
// if (time < 0) time = 0;
time = clamp(time, 0, s._totalTime);//改成用clamp
s.curTime = time;
}
/**
......@@ -159,8 +167,9 @@ export class AnimationClip extends EventDispatcher {
*/
public gotoAndStop(time: number, force: boolean = false): void {
this._isPlaying = false;
if (time > this.totalTime) time = this.totalTime;
if (time < 0) time = 0;
// if (time > this.totalTime) time = this.totalTime;
// if (time < 0) time = 0;
time = clamp(time, 0, this._totalTime);//改成用clamp
this.curTime = time;
//这样会强制更新
if (force) this.lastTime = null
......@@ -185,10 +194,12 @@ export class AnimationClip extends EventDispatcher {
loops = loops || 0;//去掉null等等
loops = Math.max(0, loops);//去掉负数
if (beginTime <= 0) beginTime = 0;
if (beginTime > this._totalTime) beginTime = this._totalTime;
if (endTime <= 0) endTime = 0;
if (endTime > this._totalTime) endTime = this._totalTime;
// if (beginTime <= 0) beginTime = 0;
// if (beginTime > this._totalTime) beginTime = this._totalTime;
// if (endTime <= 0) endTime = 0;
// if (endTime > this._totalTime) endTime = this._totalTime;
beginTime = clamp(beginTime, 0, this._totalTime);
endTime = clamp(endTime, 0, this._totalTime);
if (beginTime === endTime) {
this.gotoAndStop(beginTime)
//如果相等
......@@ -212,10 +223,12 @@ export class AnimationClip extends EventDispatcher {
if (s.curTime >= endTime || s._endMark) {//
loopCount--;
if (loopCount <= 0) {
s.gotoAndStop(endTime);
s.gotoAndStop(endTime);//这个在下一帧才生效，所以加一个矫正rectify
// s.rectify();
s.removeEventListener(Event.ENTER_FRAME, this.startAniRangeFun, this);
this.startAniRangeFun = null;
callback && callback(loopCount);
s.rectify();//放在最后吧，callback里也可能干了啥
} else {
s.gotoAndPlay(beginTime);
}
......@@ -224,10 +237,12 @@ export class AnimationClip extends EventDispatcher {
if (s.curTime <= beginTime || s._endMark) {
loopCount--
if (loopCount <= 0) {
s.gotoAndStop(beginTime);
s.gotoAndStop(beginTime);//这个在下一帧才生效，所以加一个矫正rectify
// s.rectify();
s.removeEventListener(Event.ENTER_FRAME, this.startAniRangeFun, this);
this.startAniRangeFun = null;
callback && callback(loopCount);
s.rectify();//放在最后吧，callback里也可能干了啥
} else {
s.gotoAndPlay(endTime, false);
}
......
src/2d/const.ts
View file @ f7723ae1
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.27";
export const VERSION = "2.0.28";
/**
......
src/2d/display/Container.ts
View file @ f7723ae1
......@@ -534,7 +534,7 @@ export default class Container extends DisplayObject {
}
/**
* 更新方法，注意别覆盖，子类可继承修改
* 节点每帧更新方法，注意别覆盖，否则每帧监听将失效，子类可继承修改
*/
update() {
if (!this.visible) return;
......
src/2d/ui/AnimationNode.ts 0 → 100644
View file @ f7723ae1
import { AnimationClip } from "../AnimationClip";
import { Container } from "../display";
/**
* 抽象动画类，暂时用于SvgaAni和Lottie的基类
*/
export abstract class AnimationNode extends Container {
/**
* 原始数据，尽量只获取，不修改
*/
protected rawData: any;
/**
* 总时间，秒计
*/
abstract get totalTime(): number;
/**
* 总帧数
*/
abstract get totalFrames(): number;
/**
* 动画显示宽度
*/
abstract get videoWidth(): number;
/**
* 动画显示高度
*/
abstract get videoHeight(): number;
/**
* 帧率
*/
protected _fps: number;
/**
* 每秒刷新帧数，没设置过直接用数据里的
*/
get fps(): number {
return this._fps || 0
}
/**
* 设置每秒刷新率，可能值30，60等等
* 子类重写get方法时必须重写set方法，否则执行不到父类的set方法
*/
set fps(v: number) {
this._fps = v;
}
/**
* 用于控制动画，
* Lottie和SvgaAni里面的按帧数计，animationClip.totalTime是总帧数，因为文件标记的是帧，而不是时间
*/
protected animationClip: AnimationClip;
constructor(data: any) {
super();
this._instanceType = "AnimationNode";
this.init(data)
}
/**
* 抽象的初始化类
* @param data
*/
abstract init(data: any): void;
private lastTime: number;
/**
* 更新方法，直接写了，后续继承的Lottie和SvgaAni基本不用改，有需要自行重写
*/
update() {
if (this.animationClip) {
var now = Date.now()
var delta = this.lastTime ? (now - this.lastTime) * 0.001 : 0.01667
this.lastTime = now;
//时间需要转换下帧小数，animationClip及各个track里的都是帧数
this.animationClip.update(delta * this.fps);
}
super.update();
}
/**
* 播放loop次后回调
* @param loop 播放次数
* @param callback 播放次数完后回调
*/
play(loop?: number, callback?: () => void): void;
/**
* 开始播放
* @param isFront 是否正向，默认是
*/
play(isFront?: boolean): void;
/**
* 从头播放，需要自定义的用this.animationClip
* @param {number|boolean} loop 播放测试，默认0，一直循环播放
* @param callback 回调
*/
play(loop?: any, callback?: () => void): void {
if (!this.animationClip) return;
//如果没有参数，或者第一个参数是布尔的走animationClip.play
if (!arguments.length || typeof arguments[0] == "boolean") {
this.animationClip.play(arguments[0]);
return;
}
//其他走播放次数
loop = loop || 0;
this.animationClip.startAniRange(0, this.animationClip.totalTime, loop, callback)
}
/**
* 停止，需要自定义的用this.animationClip
* @param isReset 是否重置，默认false，不重置
*/
stop(isReset: boolean = false) {
if (!this.animationClip) return;
isReset ? this.animationClip.gotoAndStop(0, true) : this.animationClip.stop();
}
/**
* 当前帧，从0开始
* @property currentFrame
* @public
* @since 1.0.0
* @type {number}
* @default 1
* @readonly
*/
get currentFrame(): number {
return this.animationClip ? Math.round(this.animationClip.currentTime) : 0;
}
/**
* 当前动画是否处于播放状态
* @property isPlaying
* @readOnly
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isPlaying() {
return this.animationClip ? this.animationClip.isPlaying : false
}
/**
* 动画的播放方向,是顺着播还是在倒着播
* @property isFront
* @public
* @since 1.0.0
* @type {boolean}
* @default true
* @readonly
*/
get isFront(): boolean {
return this.animationClip ? this.animationClip.isFront : true;
}
/**
* 停在指定时间
* @param time
* @param force 是否强制更新，默认false，如果发现没stop在指定位置，可以试试设置true
*/
gotoAndStop: (time: number, force?: boolean) => void;
/**
* 从某时刻开始播放
* @param time
* @param isFront 默认true，正向播放
*/
gotoAndPlay: (time: number, isFront?: boolean) => void;
/**
* 在一个区间范围内播放
* @param beginTime 开始时间，秒计，默认0，
* @param endTime 结束时间，秒计，默认_totalTime
* @param loops 循环次数，默认1，0表示无限循环
* @param callback 参数loop表示还剩几次
*/
startAniRange: (beginTime: number, endTime: number, loops: number, callback?: (loop: number) => void) => void;
};
//这三个直接用clip的
["gotoAndStop", "gotoAndPlay", "startAniRange"].forEach((v) => {
Object.defineProperty(AnimationNode.prototype, v, {
value: function () {
if (!this.animationClip) return;
//直接用
this.animationClip[v](...Array.prototype.slice.call(arguments));
},
writable: true,
enumerable: true,
})
})
\ No newline at end of file
src/2d/ui/Lottie.ts
View file @ f7723ae1
This diff is collapsed.
src/2d/ui/LottieNew.ts deleted 100644 → 0
View file @ e1714ace
This diff is collapsed.
src/2d/ui/MovieClip.ts
View file @ f7723ae1
......@@ -146,6 +146,8 @@ export class MovieClip extends Container {
s._instanceType = "MovieClip";
//初始化
if (mv) s.init(mv);
console.warn("MovieClip类即将废弃，建议使用SvgaAni显示类")
}
/**
......
src/2d/ui/SvgaAni.ts 0 → 100644
View file @ f7723ae1
This diff is collapsed.
src/2d/ui/forLottie/buildBezierEaserProps.ts deleted 100644 → 0
View file @ e1714ace
import { getBezierEasing } from "./BezierEaser";
export function buildBezierEaserProps(
startValue: number[],
endValue: number[],
outV,
inV,
startIndex: number,
endIndex: number,
points,
useH:boolean,
limit?: number
) {
if(useH){
for (var k = startIndex; k < endIndex; k++) {//这时不算最后一个
points[k] = startValue.slice();
}
return
}
var outX, outY, inX, inY, keyValue, perc;
var len = startValue.length;
var fncts, fnc;
if (outV.x.constructor === Array) {
fncts = [];
for (var i = 0; i < len; i++) {
outX = (typeof outV.x[i] === 'undefined') ? outV.x[0] : outV.x[i];
outY = (typeof outV.y[i] === 'undefined') ? outV.y[0] : outV.y[i];
inX = (typeof inV.x[i] === 'undefined') ? inV.x[0] : inV.x[i];
inY = (typeof inV.y[i] === 'undefined') ? inV.y[0] : inV.y[i];
fncts[i] = getBezierEasing(outX, outY, inX, inY).get;
}
} else {
outX = outV.x;
outY = outV.y;
inX = inV.x;
inY = inV.y;
fnc = getBezierEasing(outX, outY, inX, inY).get;
}
var delta = endIndex - startIndex
for (var k = startIndex; k <= endIndex; k++) {
if (limit) {
//小于0的不算了，浪费时间
if (k < 0) continue;
//超出的也不要了
if (k >= limit) break;//遇到那种
}
var frameNum = k;
var newValue = [];
for (var i = 0; i < len; i += 1) {
if (frameNum == endIndex) {
perc = 1;
} else if (frameNum == startIndex) {
perc = 0;
} else {
if (fncts) {
perc = fncts[i]((frameNum - startIndex) / delta);
} else {
perc = fnc((frameNum - startIndex) / delta);
}
}
keyValue = startValue[i] + (endValue[i] - startValue[i]) * perc;
newValue[i] = keyValue;
}
points[k] = newValue
}
}
\ No newline at end of file
src/2d/ui/forLottie/buildBezierProps.ts → src/2d/ui/forLottie/buildBezierProp.ts
View file @ f7723ae1
export function buildBezierProps(pt1, pt2, pt3, pt4, startIndex, endIndex, points, fnc, limit?: number) {
var bezierData = buildBezierData(pt1, pt2, pt3, pt4);
//处理完所有的点
for (var i = startIndex; i <= endIndex; i++) {
if (limit) {
//小于0的不算了，浪费时间
if (i < 0) continue;
//超出的也不要了
if (i >= limit) break;//遇到那种
}
var perc = fnc((i - startIndex) / (endIndex - startIndex));
var distanceInLine = bezierData.segmentLength * perc;
if (perc == 0) {
points[i] = bezierData.points[0].point;
continue;
}
if (perc == 1) {
points[i] = bezierData.points[bezierData.points.length - 1].point;
continue;
}
//找最近的点
points[i] = findNearest(distanceInLine, bezierData.points);
}
}
export function buildBezierProp(pt1, pt2, pt3, pt4, startIndex, endIndex, time, fnc) {
var bezierData = buildBezierData(pt1, pt2, pt3, pt4);
var perc = fnc((time - startIndex) / (endIndex - startIndex));
......
src/2d/ui/index.ts
View file @ f7723ae1
......@@ -3,8 +3,10 @@ export * from "./FrameAni";
export * from "./ScrollPage";
export * from "./ScrollList";
export * from "./MovieClip";
export * from "./MovieClip";//暂时只有一个项目用过换装，三只松鼠，暂时再放几个版本后删掉
// export * from "./Lottie";
// export { SvgaAni as MovieClip } from "./SvgaAni";//也可以考虑直接修改名字
export * from "./LottieNew";
\ No newline at end of file
export * from "./SvgaAni";
export * from "./Lottie";
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment