beeshell/dist/common/animations/index.js

import { Animated, Easing } from 'react-native';
class CommonAnimated {
    constructor(props) {
        props = props || {};
        this.state = {
            opacityList: props.opacityList || [0, 1],
            duration: props.duration || 300,
            easing: props.easing || Easing.elastic(0.8)
        };
    }
    getState() {
        return {
            ...this.state
        };
    }
    setState(key, value) {
        this.state[key] = value;
    }
    stop() {
        if (this.animated) {
            this.animated.stop();
            this.animated = null;
        }
    }
    /* tslint:disable:no-empty */
    toIn() { }
    /* tslint:disable:no-empty */
    toOut() { }
}
export class FadeAnimated extends CommonAnimated {
    constructor(props) {
        props = props || {};
        super(props);
        this.state = {
            ...this.state,
            scaleList: [0, 1],
            translateXList: [0, 0],
            translateYList: [0, 0],
            ...props,
        };
        this.state.opacity = new Animated.Value(this.getPropertyValue('opacity', true));
        this.state.scale = new Animated.Value(this.getPropertyValue('scale', true));
        this.state.translateX = new Animated.Value(this.getPropertyValue('translateX', true));
        this.state.translateY = new Animated.Value(this.getPropertyValue('translateY', true));
    }
    getPropertyValue(type, tag) {
        if (tag) {
            return this.state[type + 'List'][0];
        }
        else {
            return this.state[type + 'List'][1];
        }
    }
    toIn() {
        return this.fade(true);
    }
    toOut() {
        return this.fade(false);
    }
    reset(params) {
        const ret = {};
        params.forEach((paramItem) => {
            const key = paramItem.key + 'List';
            const tmp = this.state[key].concat();
            tmp.splice(0, 1, paramItem.value);
            ret[key] = tmp;
        });
        this.state = {
            ...this.state,
            ...ret
        };
    }
    fade(tag) {
        this.stop();
        this.state.opacity.setValue(this.getPropertyValue('opacity', tag));
        this.state.scale.setValue(this.getPropertyValue('scale', tag));
        this.state.translateX.setValue(this.getPropertyValue('translateX', tag));
        this.state.translateY.setValue(this.getPropertyValue('translateY', tag));
        return new Promise((resolve) => {
            const invalid = ['translateXList', 'translateYList'].some((key) => {
                return this.state[key][0] == null;
            });
            if (invalid) {
                setTimeout(() => {
                    resolve('pre animated end');
                    // console.log('pre animated end')
                }, 100);
            }
            else {
                resolve('pre animated end');
            }
        }).then(() => {
            this.state.translateX.setValue(this.getPropertyValue('translateX', tag));
            this.state.translateY.setValue(this.getPropertyValue('translateY', tag));
            this.animated = Animated.parallel([
                Animated.timing(this.state.opacity, {
                    toValue: this.getPropertyValue('opacity', !tag),
                    duration: this.state.opacityDuration || this.state.duration,
                    easing: this.state.easing
                }),
                Animated.timing(this.state.scale, {
                    toValue: this.getPropertyValue('scale', !tag),
                    duration: this.state.scaleDuration || this.state.duration,
                    easing: this.state.easing
                }),
                Animated.timing(this.state.translateX, {
                    toValue: this.getPropertyValue('translateX', !tag),
                    duration: this.state.duration,
                    easing: this.state.easing
                }),
                Animated.timing(this.state.translateY, {
                    toValue: this.getPropertyValue('translateY', !tag),
                    duration: this.state.duration,
                    easing: this.state.easing
                })
            ]);
        }).then(() => {
            return new Promise(resolve => {
                this.animated.start(() => {
                    resolve('animated end');
                });
            }).catch(e => {
                console.log(e);
            });
        });
    }
}
export class SlideAnimated extends CommonAnimated {
    constructor(props) {
        props = props || {};
        super(props);
        this.state = {
            ...this.state,
            directionType: ['horizontal'],
            translateYList: [null, 0],
            translateXList: [null, 0],
            ...props,
        };
        this.state.opacity = new Animated.Value(this.getPropertyValue('opacity', true));
        this.state.translateY = new Animated.Value(this.getPropertyValue('translateY', true));
        this.state.translateX = new Animated.Value(this.getPropertyValue('translateX', true));
    }
    reset(params) {
        const map = {
            vertical: 'translateYList',
            horizontal: 'translateXList'
        };
        const ret = {};
        params.forEach((paramItem) => {
            const key = map[paramItem.directionTypeItem];
            const tmp = this.state[key].concat();
            tmp.splice(0, 1, paramItem.size);
            ret[key] = tmp;
        });
        this.state = {
            ...this.state,
            ...ret
        };
    }
    getPropertyValue(type, tag) {
        const tmp = tag
            ? this.state[type + 'List'][0]
            : this.state[type + 'List'][1];
        return tmp == null ? 0 : tmp;
    }
    toIn() {
        return this.slide(true);
    }
    toOut() {
        return this.slide(false);
    }
    slide(tag) {
        this.stop();
        this.state.opacity.setValue(this.getPropertyValue('opacity', tag));
        const map = {
            vertical: 'translateY',
            horizontal: 'translateX'
        };
        const keys = this.state.directionType.map((item) => {
            return map[item];
        });
        keys.forEach((key) => {
            this.state[key].setValue(this.getPropertyValue(key, tag));
        });
        return new Promise(resolve => {
            const invalid = keys.some((key) => {
                return this.state[key + 'List'][0] == null;
            });
            if (invalid) {
                setTimeout(() => {
                    // console.log('setTimeout 100 resolve')
                    resolve('pre animated end');
                }, 100);
            }
            else {
                resolve('pre animated end');
            }
        })
            .then(ret => {
            keys.forEach((key) => {
                this.state[key].setValue(this.getPropertyValue(key, tag));
            });
            const parallelArray = keys.map((key) => {
                return Animated.timing(this.state[key], {
                    toValue: this.getPropertyValue(key, !tag),
                    duration: this.state.duration,
                    easing: this.state.easing
                });
            });
            this.animated = Animated.parallel([
                Animated.timing(this.state.opacity, {
                    toValue: this.getPropertyValue('opacity', !tag),
                    duration: this.state.duration,
                    easing: this.state.easing
                }),
                ...parallelArray
            ]);
            return new Promise(resolve => {
                this.animated.start(() => {
                    resolve('animated end');
                });
            });
        })
            .catch(e => {
            console.log(e);
        });
    }
}
//# sourceMappingURL=index.js.map