第2篇：【HarmonyOS 5.0.0 或以上】构建分布式进度条联动：手机控制滑块，TV 实时更新环形进度动画

🎯 目标

实现一个跨设备进度条联动示例：

• 手机端通过滑块控制进度（0%~100%）

• 实时通过分布式数据同步到 TV

• TV 端展示一个动态环形进度动画，平滑更新

• 展现“控制端-展示端”协同动画机制

---

📦 涉及能力

能力模块	用法
分布式 KVStore	实时同步滑块数值
Canvas 绘制	TV 端绘制环形进度
动画系统	环形动画平滑过渡

---

📱 手机端实现：滑块控制进度并同步

PhoneSliderSender.ets

import distributedData from '@ohos.data.distributedData'

@Component
export struct PhoneSliderSender {
  @State progress: number = 30

  build() {
    Column({ space: 20 }).padding(20) {
      Text(`当前进度：${this.progress}%`)
        .fontSize(18).fontColor('#333')

      Slider({
        value: this.progress,
        min: 0,
        max: 100,
        step: 1
      }).onChange(val => {
        this.progress = val
        this.syncProgressToTV(val)
      })
    }
  }

  private syncProgressToTV(val: number) {
    distributedData.getKVManager({
      bundleName: 'com.example.progress',
    }).then(manager => manager.getKVStore('progressStore', { createIfMissing: true }))
      .then(store => store.put('currentProgress', val.toString()))
  }
}

---

📺 TV 端实现：环形进度动画展示

TVProgressReceiver.ets

import distributedData from '@ohos.data.distributedData'

@Component
export struct TVProgressReceiver {
  @State progress: number = 0

  build() {
    let size = 200
    let center = size / 2
    let radius = center - 8

    Stack()
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#000000') {

      Canvas(size, size)
        .onDraw(ctx => {
          ctx.strokeArc({
            center: { x: center, y: center },
            radius,
            startAngle: 0,
            sweepAngle: 360,
            style: {
              color: '#444',
              width: 12,
              cap: StrokeCap.Round
            }
          })

          ctx.strokeArc({
            center: { x: center, y: center },
            radius,
            startAngle: -90,
            sweepAngle: (this.progress / 100) * 360,
            style: {
              color: '#4D96FF',
              width: 12,
              cap: StrokeCap.Round
            }
          })
        })

      Text(`${this.progress}%`)
        .fontSize(24)
        .fontColor('#ffffff')
        .position({ x: center, y: center })
        .align(Alignment.Center)
    }
  }

  aboutToAppear() {
    distributedData.getKVManager({
      bundleName: 'com.example.progress',
    }).then(manager => manager.getKVStore('progressStore', { createIfMissing: true }))
      .then(store => {
        store.on('dataChange', ({ value }) => {
          let p = parseInt(value)
          if (!isNaN(p)) {
            this.progress = Math.max(0, Math.min(100, p))
          }
        })
      })
  }
}

---

✅ 效果演示

• 手机端滑动进度条，实时更新数值

• TV 端同步绘制蓝色环形进度圈，带平滑过渡效果

• 实现多端分离控制 + 联动视觉

---

✨ 可扩展建议

功能	说明
环形渐变填充	使用 sweepGradient 绘制渐变色进度圈
多设备同步进度	一个主控端控制多个显示端（如 TV + 平板）
进度控制反馈	TV 端完成后回传状态，手机端显示“已同步”
中心图标联动	进度百分比中心可加入图标、动画、数字滚动等

---

📘 下一篇预告

第3篇：【HarmonyOS 5.0.0 或以上】实现跨端拖拽投送动画：手机拖动文件，平板端接收并播放接收动画