uview-ultra 4.5.74 → 4.5.75

package/changelog.md

@@ -1,3 +1,28 @@
+## 4.5.75
+feat: 新增 up-lottie 动画组件（对齐 uview-plus 3.8.135）
+
+加载 AE 导出的 Lottie JSON 并播放。API 与 uview-plus 3.x 的 u-lottie 完全一致，.vue / .uvue 两套实现同步提供。
+
+新增：
+- up-lottie 组件，props：filePath（http(s) 地址；H5 / App-Vue 额外支持本地静态路径）、animationData（直接传 JSON 对象，优先级高于 filePath）、contentModel（ScaleToFill / AspectFill / Center，默认 AspectFill）、loop（默认 false）、autoplay（默认 true）
+- 实例方法：reload / playAnimation / pauseAnimation / resumeAnimation / cancelAnimation
+- 事件 statechange：ready / play / pause / resume / stop / complete / error（error 附 message）；微信小程序从 event.detail 读取，统一按 event.detail || event 兼容
+- 新增示例页 pages/componentsD/lottie，含填充模式切换、播放控制与状态日志
+
+平台实现分两条轨：
+- .vue（uni-app Vue3）：H5 / App-Vue 走 lottie-web 5.13.0 的 SVG 渲染器，H5 端引擎按需 import() 拆成独立异步 chunk、不进共享入口包，加载失败会重置缓存以便重试；微信小程序 / 鸿蒙走 lottie-miniprogram 1.0.12 + up-canvas 的 canvas 渲染器，鸿蒙无 DOM canvas 节点，由 harmony-canvas-adapter 把旧版 CanvasContext 适配成标准 2D 上下文；nvue 与其他小程序统一通过 statechange 的 error 类型暴露，不发散报错
+- .uvue（uni-app x）：无 DOM，不走 SVG 渲染器，直接用 up-canvas 暴露的原生 CanvasRenderingContext2D 承载 lottie-miniprogram 的 canvas 渲染器。lottie-miniprogram 在模块加载期就会调用 wx.getSystemInfoSync()，而 uni-app x 没有 wx 全局，因此单独提供一份注入了 wx 桩的副本 libs/lottie-miniprogram.uvue.js（原文件保持不动，供 .vue 侧使用）
+- .uvue 侧初始化前会探测 2D API 覆盖度（save / restore / bezierCurveTo / setTransform / fillText 等 16 项），缺失时通过 error 事件报出具体缺哪个方法，不会静默白屏
+
+已知限制：
+- 同一页面仅支持一个并行的 canvas 轨实例（lottie-miniprogram 持有全局 canvas 引用，组件内已加互斥守卫）
+- 微信小程序 / 鸿蒙 / uni-app x 无法读取本地 JSON 文件，请改用 animationData 或 http(s) 地址
+- 图片类资源在 canvas 轨下受平台限制（小程序不支持动态创建 canvas），建议保持图片原始宽高与 JSON 描述一致
+- 远程 JSON 可包含可执行表达式（lottie 的 expressions 特性），请仅加载可信来源
+- .uvue 侧本次仅完成编译级验证（全项目 109 页面编译通过），未做真机运行时验证；.vue 侧与 3.x 实现一致
+
+体量：引擎资源约 451 KB（lottie_svg.min.js 242 KB、lottie-miniprogram.min.js 209 KB、lottie-miniprogram.uvue.js 210 KB 含 wx 桩）。H5 端 lottie-web 为异步 chunk 不影响首屏；仅使用 up-lottie 的项目才会引入对应引擎，不影响其他组件。
+
 ## 4.5.74
 fix: 对齐 uview-plus 3.8.129 ~ 3.8.137 的上游修复
 

package/components/up-lottie/libs/LICENSE-lottie-miniprogram

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 wechat-miniprogram
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/up-lottie/libs/LICENSE-lottie-web

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Bodymovin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/up-lottie/libs/gen-uvue-variant.py

@@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+"""生成 uvue 专用的 lottie-miniprogram 副本。
+
+lottie-miniprogram 在**模块加载期**就会执行 `var b = wx.getSystemInfoSync()`，
+而 uni-app x 没有 wx 全局，直接 import 会在启动时抛 ReferenceError。
+这里在文件最前面补一个模块作用域的 wx 桩，后续压缩代码里的 `wx` 引用
+会解析到这个局部变量（比挂 globalThis 更可靠，不依赖运行时全局对象）。
+
+只补 getSystemInfoSync / request 两项：
+- getSystemInfoSync：lottie 只用来取 pixelRatio（dpr 我们显式传 1）
+- request：仅在按 path 加载远程 JSON 时使用，本组件只用 animationData
+
+原始文件保持不动，供 .vue 侧（微信小程序/鸿蒙，有真实 wx）使用。
+"""
+import io
+
+SRC = 'lottie-miniprogram.min.js'
+DST = 'lottie-miniprogram.uvue.js'
+
+SHIM = """/* ------------------------------------------------------------------
+ * uni-app x 适配层（本文件由 lottie-miniprogram.min.js 自动生成）
+ * lottie-miniprogram 在模块加载期即调用 wx.getSystemInfoSync()，
+ * 而 uni-app x 没有 wx 全局，故在此补一个模块作用域的 wx 桩。
+ * 下方代码与 lottie-miniprogram.min.js 完全一致，未做任何修改。
+ * ------------------------------------------------------------------ */
+var wx = {
+    getSystemInfoSync: function () {
+        try {
+            var info = (typeof uni !== 'undefined' && uni.getSystemInfoSync) ? (uni.getSystemInfoSync() || {}) : {}
+            return { pixelRatio: info.pixelRatio || 1, platform: info.platform || '' }
+        } catch (e) {
+            return { pixelRatio: 1, platform: '' }
+        }
+    },
+    request: function () {}
+};
+
+"""
+
+with io.open(SRC, 'rb') as f:
+    body = f.read()
+
+with io.open(DST, 'wb') as f:
+    f.write(SHIM.encode('utf-8'))
+    f.write(body)
+
+print('generated %s, size=%d' % (DST, len(SHIM.encode('utf-8')) + len(body)))

package/components/up-lottie/libs/harmony-canvas-adapter.js

@@ -0,0 +1,394 @@
+function parseFontSize(font) {
+    const matched = String(font || '').match(/(\d+(?:\.\d+)?)px/)
+    return matched ? Number(matched[1]) : 10
+}
+
+export function createHarmonyCanvasAdapter(options = {}) {
+    const legacy = options.context
+    if (!legacy) {
+        throw new Error('harmony canvas context is required')
+    }
+
+    const width = Number(options.width) > 0 ? Number(options.width) : 1
+    const height = Number(options.height) > 0 ? Number(options.height) : 1
+
+    const state = {
+        fillStyle: '#000000',
+        strokeStyle: '#000000',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        miterLimit: 10,
+        lineDashOffset: 0,
+        lineDash: [],
+        globalAlpha: 1,
+        globalCompositeOperation: 'source-over',
+        font: '10px sans-serif'
+    }
+    const stack = []
+    const rafIds = new Set()
+    let dirty = false
+    let flushing = false
+    let destroyed = false
+    let flushTimer = null
+
+    const flush = () => {
+        if (destroyed || !dirty || flushing) return
+        dirty = false
+        flushing = true
+        let released = false
+        const release = () => {
+            if (released) return
+            released = true
+            flushing = false
+            if (dirty) scheduleFlush()
+        }
+        try {
+            if (typeof legacy.draw === 'function') {
+                legacy.draw(false, release)
+                setTimeout(release, 80)
+            } else {
+                release()
+            }
+        } catch (error) {
+            release()
+        }
+    }
+
+    const scheduleFlush = () => {
+        if (destroyed || flushTimer !== null) return
+        const timer = setTimeout(() => {
+            rafIds.delete(timer)
+            if (flushTimer === timer) flushTimer = null
+            flush()
+        }, 0)
+        flushTimer = timer
+        rafIds.add(timer)
+    }
+
+    const markDirty = () => {
+        dirty = true
+        scheduleFlush()
+    }
+
+    const sync = () => {
+        if (typeof legacy.setFillStyle === 'function') {
+            legacy.setFillStyle(state.fillStyle)
+        }
+        if (typeof legacy.setStrokeStyle === 'function') {
+            legacy.setStrokeStyle(state.strokeStyle)
+        }
+        if (typeof legacy.setLineWidth === 'function') {
+            legacy.setLineWidth(state.lineWidth)
+        }
+        if (typeof legacy.setLineCap === 'function') {
+            legacy.setLineCap(state.lineCap)
+        }
+        if (typeof legacy.setLineJoin === 'function') {
+            legacy.setLineJoin(state.lineJoin)
+        }
+        if (typeof legacy.setMiterLimit === 'function') {
+            legacy.setMiterLimit(state.miterLimit)
+        }
+        if (typeof legacy.setGlobalAlpha === 'function') {
+            legacy.setGlobalAlpha(state.globalAlpha)
+        }
+        if (typeof legacy.setGlobalCompositeOperation === 'function') {
+            legacy.setGlobalCompositeOperation(state.globalCompositeOperation)
+        }
+        if (typeof legacy.setLineDash === 'function') {
+            legacy.setLineDash(state.lineDash, state.lineDashOffset)
+        }
+        if (typeof legacy.setFontSize === 'function') {
+            legacy.setFontSize(parseFontSize(state.font))
+        }
+    }
+
+    const canvas = {
+        width,
+        height,
+        getContext() {
+            return context
+        },
+        requestAnimationFrame(callback) {
+            const timer = setTimeout(() => {
+                rafIds.delete(timer)
+                if (destroyed) return
+                try {
+                    callback(Date.now())
+                } finally {
+                    flush()
+                }
+            }, 33)
+            rafIds.add(timer)
+            return timer
+        },
+        cancelAnimationFrame(timer) {
+            if (rafIds.has(timer)) {
+                clearTimeout(timer)
+                rafIds.delete(timer)
+            }
+        },
+        createImage() {
+            const image = {
+                width: 0,
+                height: 0,
+                _src: '',
+                _localPath: '',
+                onload: null,
+                onerror: null,
+                addEventListener(type, callback) {
+                    if (type === 'load') image.onload = callback
+                    if (type === 'error') image.onerror = callback
+                }
+            }
+            Object.defineProperty(image, 'src', {
+                get() {
+                    return image._src
+                },
+                set(value) {
+                    image._src = value
+                    uni.getImageInfo({
+                        src: value,
+                        success(result) {
+                            image.width = result.width || 0
+                            image.height = result.height || 0
+                            image._localPath = result.path || value
+                            if (typeof image.onload === 'function') image.onload()
+                        },
+                        fail() {
+                            if (typeof image.onerror === 'function') image.onerror()
+                        }
+                    })
+                }
+            })
+            return image
+        }
+    }
+
+    const context = {
+        canvas,
+        get fillStyle() {
+            return state.fillStyle
+        },
+        set fillStyle(value) {
+            state.fillStyle = value
+        },
+        get strokeStyle() {
+            return state.strokeStyle
+        },
+        set strokeStyle(value) {
+            state.strokeStyle = value
+        },
+        get lineWidth() {
+            return state.lineWidth
+        },
+        set lineWidth(value) {
+            state.lineWidth = value
+        },
+        get lineCap() {
+            return state.lineCap
+        },
+        set lineCap(value) {
+            state.lineCap = value
+        },
+        get lineJoin() {
+            return state.lineJoin
+        },
+        set lineJoin(value) {
+            state.lineJoin = value
+        },
+        get miterLimit() {
+            return state.miterLimit
+        },
+        set miterLimit(value) {
+            state.miterLimit = value
+        },
+        get lineDashOffset() {
+            return state.lineDashOffset
+        },
+        set lineDashOffset(value) {
+            state.lineDashOffset = value
+        },
+        get globalAlpha() {
+            return state.globalAlpha
+        },
+        set globalAlpha(value) {
+            state.globalAlpha = value
+        },
+        get globalCompositeOperation() {
+            return state.globalCompositeOperation
+        },
+        set globalCompositeOperation(value) {
+            state.globalCompositeOperation = value
+        },
+        get font() {
+            return state.font
+        },
+        set font(value) {
+            state.font = value
+        },
+        save() {
+            stack.push(Object.assign({}, state))
+            if (typeof legacy.save === 'function') legacy.save()
+        },
+        restore() {
+            if (stack.length) Object.assign(state, stack.pop())
+            if (typeof legacy.restore === 'function') legacy.restore()
+            sync()
+        },
+        translate(x, y) {
+            legacy.translate(x, y)
+        },
+        scale(x, y) {
+            legacy.scale(x, y)
+        },
+        rotate(angle) {
+            legacy.rotate(angle)
+        },
+        transform(a, b, c, d, e, f) {
+            if (typeof legacy.transform === 'function') {
+                legacy.transform(a, b, c, d, e, f)
+            }
+        },
+        setTransform(a, b, c, d, e, f) {
+            if (typeof legacy.setTransform === 'function') {
+                legacy.setTransform(a, b, c, d, e, f)
+            } else if (typeof legacy.transform === 'function') {
+                legacy.transform(a, b, c, d, e, f)
+            }
+        },
+        beginPath() {
+            legacy.beginPath()
+        },
+        closePath() {
+            legacy.closePath()
+        },
+        moveTo(x, y) {
+            legacy.moveTo(x, y)
+        },
+        lineTo(x, y) {
+            legacy.lineTo(x, y)
+        },
+        bezierCurveTo(a, b, c, d, e, f) {
+            legacy.bezierCurveTo(a, b, c, d, e, f)
+        },
+        quadraticCurveTo(a, b, c, d) {
+            if (typeof legacy.quadraticCurveTo === 'function') {
+                legacy.quadraticCurveTo(a, b, c, d)
+            }
+        },
+        rect(x, y, w, h) {
+            legacy.rect(x, y, w, h)
+        },
+        arc(x, y, radius, start, end, anticlockwise) {
+            if (typeof legacy.arc === 'function') {
+                legacy.arc(x, y, radius, start, end, anticlockwise)
+            }
+        },
+        fill() {
+            sync()
+            legacy.fill()
+            markDirty()
+        },
+        stroke() {
+            sync()
+            legacy.stroke()
+            markDirty()
+        },
+        clip() {
+            if (typeof legacy.clip === 'function') {
+                legacy.clip()
+            }
+        },
+        clearRect(x, y, w, h) {
+            if (typeof legacy.clearRect === 'function') {
+                legacy.clearRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        fillRect(x, y, w, h) {
+            sync()
+            if (typeof legacy.fillRect === 'function') {
+                legacy.fillRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        strokeRect(x, y, w, h) {
+            sync()
+            if (typeof legacy.strokeRect === 'function') {
+                legacy.strokeRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        drawImage() {
+            const image = arguments[0]
+            const source = image && (image._localPath || image._src || image.src)
+            if (!source) return
+            sync()
+            const args = Array.prototype.slice.call(arguments, 1)
+            try {
+                if (args.length >= 8) {
+                    legacy.drawImage(source, args[4], args[5], args[6], args[7])
+                } else if (args.length >= 4) {
+                    legacy.drawImage(source, args[0], args[1], args[2], args[3])
+                } else {
+                    legacy.drawImage(
+                        source,
+                        args[0] || 0,
+                        args[1] || 0,
+                        image.width || 0,
+                        image.height || 0
+                    )
+                }
+                markDirty()
+            } catch (error) {
+                // 单张图片绘制失败时跳过，避免中断整个动画
+            }
+        },
+        createLinearGradient(x0, y0, x1, y1) {
+            return legacy.createLinearGradient(x0, y0, x1, y1)
+        },
+        createRadialGradient(x0, y0, r0, x1, y1, r1) {
+            return legacy.createRadialGradient(x0, y0, r0, x1, y1, r1)
+        },
+        setLineDash(segments, offset) {
+            state.lineDash = Array.isArray(segments) ? segments.slice() : []
+            if (typeof offset === 'number') {
+                state.lineDashOffset = offset
+            }
+        },
+        fillText(text, x, y) {
+            sync()
+            if (typeof legacy.fillText === 'function') {
+                legacy.fillText(text, x, y)
+            }
+            markDirty()
+        },
+        strokeText(text, x, y) {
+            sync()
+            if (typeof legacy.strokeText === 'function') {
+                legacy.strokeText(text, x, y)
+            }
+            markDirty()
+        },
+        measureText(text) {
+            const fontSize = parseFontSize(state.font)
+            return { width: String(text == null ? '' : text).length * fontSize * 0.6 }
+        }
+    }
+
+    return {
+        canvas,
+        context,
+        flush,
+        destroy() {
+            destroyed = true
+            rafIds.forEach((timer) => clearTimeout(timer))
+            rafIds.clear()
+            flushTimer = null
+            dirty = false
+            stack.length = 0
+        }
+    }
+}