HarmonyOS鸿蒙Next中发现SVG图片资源在做动画时存在bug

HarmonyOS鸿蒙Next中发现SVG图片资源在做动画时存在bug 我刚才在对一个Image组件做动画放大和缩小的效果时,发现如果Image显示的是svg图片。那么动画就有问题。如果是png的话就没问题。我不知道这是不是bug。

附上我的示例代码:

@Entry
@Component
struct Index {
  @State message: string = '动画示例'
  @State iconSize: number = 30

  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(20)

      Button('开始动画')
        .onClick((event: ClickEvent) => {
          this.iconSize = 20
        })

      Column(){
        // Image($r('app.media.foreground')) //png
        Image($r('app.media.ic_voice'))  //svg
          .width(this.iconSize)
          .height(this.iconSize)
          .backgroundColor(Color.Pink)
          .animation({
            duration: 1200,
            curve: Curve.Friction,
            delay: 500,
            iterations: -1, // -1 for unlimited playback
            playMode: PlayMode.Alternate,
            tempo: 10,
            onFinish: () => {
              console.log('播放完成了')
              this.iconSize = 30
            }
          })
      }.width('100%')
      .height(50)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      .backgroundColor(Color.Orange)

    }
    .height('100%')
    .width('100%')
  }
}
4 回复
您好!

后端反馈:
svg都是自绘制的,不支持隐式动画
svg的动画是通过标签来支持的

[https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-svg.md](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-svg.md)

更多关于HarmonyOS鸿蒙Next中发现SVG图片资源在做动画时存在bug的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好!感谢您的反馈,对于SVG图片在进行动画渲染时出现的放大缩小问题,可能与SVG图片的缩放特性有关。SVG图片支持矢量图形,这意味着它们可以在不损失质量的情况下被放大或缩小。然而,如果您在动画过程中遇到问题,如渲染不正确或动画效果不符合预期,可能需要检查以下几点:

  1. SVG文件本身 :检查SVG文件是否正确配置了 viewBox 或 preserveAspectRatio 属性,这些属性可以影响SVG图形的缩放行为。
  2. 渲染环境 :检查是否有其他的CSS或样式设置影响了SVG的渲染,例如外层容器的尺寸或填充设置。

我们提个问题跟踪下;

在HarmonyOS鸿蒙Next中,SVG图片资源在进行动画处理时可能会出现渲染异常或动画效果不连贯的问题。具体表现为SVG图像在动画过程中出现失真、闪烁或部分元素丢失的情况。这可能是由于鸿蒙Next的图形渲染引擎在处理SVG动画时的优化不足或兼容性问题导致的。开发者在调试时可以通过检查SVG文件的兼容性、简化复杂路径或使用替代方案来规避该问题。

在HarmonyOS鸿蒙Next中,SVG图片资源在动画过程中可能遇到渲染问题或性能瓶颈。建议检查SVG文件复杂度,优化路径和节点数量,确保使用最新开发工具和SDK版本。如问题持续,可尝试将SVG转换为其他格式或使用替代动画方案,并提交详细日志和复现步骤至官方支持团队以获取进一步帮助。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!