You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.0 KiB
128 lines
3.0 KiB
// const defaultOption = { |
|
// duration: 300, |
|
// timingFunction: 'linear', |
|
// delay: 0, |
|
// transformOrigin: '50% 50% 0' |
|
// } |
|
// #ifdef APP-NVUE |
|
const nvueAnimation = uni.requireNativePlugin('animation') |
|
// #endif |
|
class MPAnimation { |
|
constructor(options, _this) { |
|
this.options = options |
|
this.animation = uni.createAnimation(options) |
|
this.currentStepAnimates = {} |
|
this.next = 0 |
|
this.$ = _this |
|
|
|
} |
|
|
|
_nvuePushAnimates(type, args) { |
|
let aniObj = this.currentStepAnimates[this.next] |
|
let styles = {} |
|
if (!aniObj) { |
|
styles = { |
|
styles: {}, |
|
config: {} |
|
} |
|
} else { |
|
styles = aniObj |
|
} |
|
if (animateTypes1.includes(type)) { |
|
if (!styles.styles.transform) { |
|
styles.styles.transform = '' |
|
} |
|
let unit = '' |
|
if(type === 'rotate'){ |
|
unit = 'deg' |
|
} |
|
styles.styles.transform += `${type}(${args+unit}) ` |
|
} else { |
|
styles.styles[type] = `${args}` |
|
} |
|
this.currentStepAnimates[this.next] = styles |
|
} |
|
_animateRun(styles = {}, config = {}) { |
|
let ref = this.$.$refs['ani'].ref |
|
if (!ref) return |
|
return new Promise((resolve, reject) => { |
|
nvueAnimation.transition(ref, { |
|
styles, |
|
...config |
|
}, res => { |
|
resolve() |
|
}) |
|
}) |
|
} |
|
|
|
_nvueNextAnimate(animates, step = 0, fn) { |
|
let obj = animates[step] |
|
if (obj) { |
|
let { |
|
styles, |
|
config |
|
} = obj |
|
this._animateRun(styles, config).then(() => { |
|
step += 1 |
|
this._nvueNextAnimate(animates, step, fn) |
|
}) |
|
} else { |
|
this.currentStepAnimates = {} |
|
typeof fn === 'function' && fn() |
|
this.isEnd = true |
|
} |
|
} |
|
|
|
step(config = {}) { |
|
// #ifndef APP-NVUE |
|
this.animation.step(config) |
|
// #endif |
|
// #ifdef APP-NVUE |
|
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) |
|
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin |
|
this.next++ |
|
// #endif |
|
return this |
|
} |
|
|
|
run(fn) { |
|
// #ifndef APP-NVUE |
|
this.$.animationData = this.animation.export() |
|
this.$.timer = setTimeout(() => { |
|
typeof fn === 'function' && fn() |
|
}, this.$.durationTime) |
|
// #endif |
|
// #ifdef APP-NVUE |
|
this.isEnd = false |
|
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref |
|
if(!ref) return |
|
this._nvueNextAnimate(this.currentStepAnimates, 0, fn) |
|
this.next = 0 |
|
// #endif |
|
} |
|
} |
|
|
|
|
|
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', |
|
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', |
|
'translateZ' |
|
] |
|
const animateTypes2 = ['opacity', 'backgroundColor'] |
|
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] |
|
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { |
|
MPAnimation.prototype[type] = function(...args) { |
|
// #ifndef APP-NVUE |
|
this.animation[type](...args) |
|
// #endif |
|
// #ifdef APP-NVUE |
|
this._nvuePushAnimates(type, args) |
|
// #endif |
|
return this |
|
} |
|
}) |
|
|
|
export function createAnimation(option, _this) { |
|
if(!_this) return |
|
clearTimeout(_this.timer) |
|
return new MPAnimation(option, _this) |
|
}
|
|
|