1

xuxueyang

2024-08-14 f21977f88d46ff73c8345d85e3a9b988b2306b2b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// 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)
}