@quicktvui/web-renderer 1.0.0

package/src/components/QtTransitionImage.js

@@ -0,0 +1,170 @@
+// QtTransitionImage - 支持过渡效果的图片组件
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtTransitionImage extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'TransitionImageComponent'
+    this.dom = document.createElement('div')
+
+    // 容器样式
+    this.dom.style.cssText = `
+      display: block;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+    `
+
+    // 默认过渡时间 (ms)
+    this._transitionDuration = 300
+    this._currentSrc = ''
+
+    // 注册组件
+    registerComponent(id, this)
+  }
+
+  // 处理属性更新
+  updateProperty(key, value) {
+    switch (key) {
+      case 'src':
+      case 'source':
+        this._setSrc(value)
+        break
+      case 'transitionDuration':
+      case 'transition-duration':
+        this._transitionDuration = typeof value === 'number' ? value : parseInt(value) || 300
+        break
+      case 'resizeMode':
+        this._setResizeMode(value)
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // 设置图片源（带过渡效果）
+  _setSrc(value) {
+    if (!value) {
+      this.dom.style.backgroundImage = ''
+      this._currentSrc = ''
+      return
+    }
+
+    let srcValue = ''
+    if (typeof value === 'string') {
+      srcValue = value
+    } else if (typeof value === 'object' && value.uri) {
+      srcValue = value.uri
+    }
+
+    // 如果是同一张图片，不做处理
+    if (srcValue === this._currentSrc) return
+
+    // 如果当前没有图片，直接显示
+    if (!this._currentSrc) {
+      this.dom.style.backgroundImage = `url(${srcValue})`
+      this._currentSrc = srcValue
+      return
+    }
+
+    // 有当前图片，执行渐变过渡
+    this._transitionToImage(srcValue)
+  }
+
+  // 渐变过渡到新图片
+  _transitionToImage(newSrc) {
+    // 先加载新图片
+    const img = new Image()
+    img.onload = () => {
+      // 淡出当前图片
+      this.dom.style.transition = `opacity ${this._transitionDuration / 2}ms ease-out`
+      this.dom.style.opacity = '0'
+
+      // 淡出完成后，切换图片并淡入
+      setTimeout(() => {
+        this.dom.style.backgroundImage = `url(${newSrc})`
+        this._currentSrc = newSrc
+
+        // 淡入新图片
+        this.dom.style.transition = `opacity ${this._transitionDuration / 2}ms ease-in`
+        this.dom.style.opacity = '1'
+
+        // 过渡完成后清除 transition
+        setTimeout(() => {
+          this.dom.style.transition = ''
+        }, this._transitionDuration / 2)
+      }, this._transitionDuration / 2)
+    }
+    img.onerror = () => {
+      console.warn('[QtTransitionImage] Image load failed:', newSrc)
+    }
+    img.src = newSrc
+  }
+
+  // 设置缩放模式
+  _setResizeMode(value) {
+    const backgroundSize =
+      {
+        contain: 'contain',
+        cover: 'cover',
+        fill: '100% 100%',
+        center: 'auto',
+        origin: 'auto',
+      }[value] || 'cover'
+
+    this.dom.style.backgroundSize = backgroundSize
+  }
+
+  // 设置下一张图片（带过渡效果）
+  // params 是数组形式，由 patches.js 的 callUIFunction 调用
+  setNextImage(params) {
+    const url = Array.isArray(params) ? params[0] : params
+    if (url && url !== this._currentSrc) {
+      this._transitionToImage(url)
+    }
+  }
+
+  // 设置下一个颜色（带过渡效果）
+  setNextColor(params) {
+    const color = Array.isArray(params) ? params[0] : params
+    const formattedColor = this._formatColor(color)
+
+    // 淡出
+    this.dom.style.transition = `opacity ${this._transitionDuration / 2}ms ease-out`
+    this.dom.style.opacity = '0'
+
+    setTimeout(() => {
+      this.dom.style.backgroundImage = ''
+      this.dom.style.backgroundColor = formattedColor
+      this._currentSrc = ''
+
+      // 淡入
+      this.dom.style.transition = `opacity ${this._transitionDuration / 2}ms ease-in`
+      this.dom.style.opacity = '1'
+
+      setTimeout(() => {
+        this.dom.style.transition = ''
+      }, this._transitionDuration / 2)
+    }, this._transitionDuration / 2)
+  }
+
+  // 设置过渡时间
+  setTransitionTime(params) {
+    const duration = Array.isArray(params) ? params[0] : params
+    this._transitionDuration = typeof duration === 'number' ? duration : parseInt(duration) || 300
+  }
+
+  // 格式化颜色值
+  _formatColor(color) {
+    if (typeof color === 'number') {
+      // ARGB 格式
+      const a = ((color >> 24) & 0xff) / 255
+      const r = (color >> 16) & 0xff
+      const g = (color >> 8) & 0xff
+      const b = color & 0xff
+      return `rgba(${r}, ${g}, ${b}, ${a})`
+    }
+    return color
+  }
+}