@es-react/react
Version:
Hippy react framework
203 lines (187 loc) • 6.38 kB
text/typescript
/*
* Tencent is pleased to support the open source community by making
* Hippy available.
*
* Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
* All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { warn } from '../utils';
import { repeatCountDict } from '../utils/animation';
import '../global';
import {HippyTypes} from '../types'
const animationEvent = {
START: 'animationstart',
END: 'animationend',
CANCEL: 'animationcancel',
REPEAT: 'animationrepeat',
};
/**
* Better performance of Animation series solution.
*
* It pushes the animation scheme to native at once.
*/
class AnimationSet implements HippyTypes.AnimationSet {
animationId: number;
animation?: HippyTypes.AnimationSetInstance;
animationList: HippyTypes.AnimationList;
onHippyAnimationStart?: Function | undefined;
onHippyAnimationEnd?: Function | undefined;
onHippyAnimationCancel?: Function | undefined;
onHippyAnimationRepeat?: Function | undefined;
onAnimationStartCallback?: HippyTypes.AnimationCallback | undefined;
onAnimationEndCallback?: HippyTypes.AnimationCallback | undefined;
onAnimationCancelCallback?: HippyTypes.AnimationCallback | undefined;
onAnimationRepeatCallback?: HippyTypes.AnimationCallback | undefined;
public constructor(config: HippyTypes.AnimationSetOptions) {
this.animationList = [] as HippyTypes.AnimationList ;
config?.children.forEach((item) => {
this.animationList.push({
animationId: item.animation.animationId,
follow: item.follow || false,
});
});
this.animation = new global.Hippy.AnimationSet({
repeatCount: repeatCountDict(config.repeatCount || 0),
children: this.animationList,
}) as HippyTypes.AnimationSetInstance;
this.animationId = this.animation.getId();
// TODO: Deprecated compatible, will remove soon.
this.onHippyAnimationStart = this.onAnimationStart.bind(this);
this.onHippyAnimationEnd = this.onAnimationEnd.bind(this);
this.onHippyAnimationCancel = this.onAnimationCancel.bind(this);
this.onHippyAnimationRepeat = this.onAnimationRepeat.bind(this);
}
/**
* Remove all animation event listeners
*/
public removeEventListener() {
if (!this.animation) {
throw new Error('animation has not been initialized yet');
}
if (typeof this.onAnimationStartCallback === 'function') {
this.animation.removeEventListener(animationEvent.START);
}
if (typeof this.onAnimationEndCallback === 'function') {
this.animation.removeEventListener(animationEvent.END);
}
if (typeof this.onAnimationCancelCallback === 'function') {
this.animation.removeEventListener(animationEvent.CANCEL);
}
if (typeof this.onAnimationCancelCallback === 'function') {
this.animation.removeEventListener(animationEvent.REPEAT);
}
}
/**
* Start animation execution
*/
public start() {
if (!this.animation) {
throw new Error('animation has not been initialized yet');
}
this.removeEventListener();
if (typeof this.onAnimationStartCallback === 'function') {
this.animation.addEventListener(animationEvent.START, () => {
if (typeof this.onAnimationStartCallback === 'function') {
this.onAnimationStartCallback();
}
});
}
if (typeof this.onAnimationEndCallback === 'function') {
this.animation.addEventListener(animationEvent.END, () => {
if (typeof this.onAnimationEndCallback === 'function') {
this.onAnimationEndCallback();
}
});
}
if (typeof this.onAnimationCancelCallback === 'function') {
this.animation.addEventListener(animationEvent.CANCEL, () => {
if (typeof this.onAnimationCancelCallback === 'function') {
this.onAnimationCancelCallback();
}
});
}
if (typeof this.onAnimationRepeatCallback === 'function') {
this.animation.addEventListener(animationEvent.CANCEL, () => {
if (typeof this.onAnimationRepeatCallback === 'function') {
this.onAnimationRepeatCallback();
}
});
}
this.animation.start();
}
/**
* Use destroy() to destroy animation.
*/
public destory() {
warn('AnimationSet.destory() method will be deprecated soon, please use Animation.destroy() as soon as possible');
this.destroy();
}
/**
* Destroy the animation
*/
public destroy() {
if (!this.animation) {
throw new Error('animation has not been initialized yet');
}
this.animation.destroy();
}
/**
* Pause the running animation
*/
public pause() {
if (!this.animation) {
throw new Error('animation has not been initialized yet');
}
this.animation.pause();
}
/**
* Resume execution of paused animation
*/
public resume() {
if (!this.animation) {
throw new Error('animation has not been initialized yet');
}
this.animation.resume();
}
/**
* Call when animation started.
* @param {Function} cb - callback when animation started.
*/
public onAnimationStart(cb: HippyTypes.AnimationCallback) {
this.onAnimationStartCallback = cb;
}
/**
* Call when animation is ended.
* @param {Function} cb - callback when animation started.
*/
public onAnimationEnd(cb: HippyTypes.AnimationCallback) {
this.onAnimationEndCallback = cb;
}
/**
* Call when animation is canceled.
* @param {Function} cb - callback when animation started.
*/
public onAnimationCancel(cb: HippyTypes.AnimationCallback) {
this.onAnimationCancelCallback = cb;
}
/**
* Call when animation is repeated.
* @param {Function} cb - callback when animation started.
*/
public onAnimationRepeat(cb: HippyTypes.AnimationCallback) {
this.onAnimationRepeatCallback = cb;
}
}
export default AnimationSet;