132 lines
3.2 KiB
JavaScript
132 lines
3.2 KiB
JavaScript
// 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
|
||
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
|
||
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)
|
||
}
|