【HarmonyOS】ArkTS 组件内转场动画,动画播放时颜色异常问题

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】ArkTS 组件内转场动画,动画播放时颜色异常问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【关键字】

HarmonyOS、ArkTS、组件内转场动画、颜色异常

【问题描述】

根据组件内转场动画文档中示例编写代码,使用动画转场组件button,并给button设置背景色让button透明度为0,实现动画转场时,会先出现默认蓝色button,然后动画再消失,问题代码如下所示:

@State flag: boolean = true;
@State show: string = 'show';

build() {
  Column() {
    Button(this.show).width(80).height(30).margin(30)
      .onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }

        animateTo({ duration: 1000 }, () => {
          this.flag = !this.flag;
        })
      })
    if (this.flag) {
      Button('按钮')
        .transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } })
        .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
        .backgroundColor('rgba(255,255,255,0)')
        .width(100)
        .height(30)
        .margin(5)
    }
  }
}

问题现象请见下图,中间button按钮动画显示的时候,应该透明的,但是出现了蓝色按钮再消失现象

【问题分析与解决】

设置组件转场动画时,若组件存在默认背景色或者其他默认属性颜色,使用上述方式设置转场动画时,会闪现默认属性颜色;目前可通过如下方式解决,如组件本身就不可见,可不通过if判断this.flag变量来控制,而是通过组件的visibility属性判断是否显示,代码如下所示,这样就可以解决button播放动画时默认颜色显示问题了。

build() {
  Column() {
    Button(this.show).width(80).height(30).margin(30)
      .onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }

        animateTo({ duration: 1000 }, () => {
          this.flag = !this.flag;
        })
      })

    Button('按钮')
      .transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } })
      .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      .visibility(this.flag ? Visibility.Visible : Visibility.None)
      .backgroundColor('rgba(255,255,255,0)')
      .width(100)
      .height(30)
      .margin(5)
  }
}

【参考文档】

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-transition-animation-within-component-0000001500755277-V3文章来源地址https://www.toymoban.com/news/detail-615168.html

到了这里,关于【HarmonyOS】ArkTS 组件内转场动画,动画播放时颜色异常问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • harmonyOS基础(三)- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)

    大家好!我是黑臂麒麟,一位6年的前端; 随着 鸿蒙4.0 的发布。鸿蒙社区不断壮大,且市场对 harmonyOS 应用认可度越来越高。很多公司开始对 鸿蒙应用开发 越来越重视。 之前想入坑鸿蒙,一直犹豫未下定决心学习。这次不再等待,开始系统学习起来。 此系列文章只做 harm

    2024年02月20日
    浏览(46)
  • HarmonyOS鸿蒙开发指南:基于ArkTS的声明式开发范式 声明式UI开发实例 绘图与动画

    目录 绘制图形 绘制基本几何图形 绘制自定义几何图形 animateTo实现闪屏动画 页面转场动画 绘制能力主要是通过框架提供的绘制组件来支撑,支持svg标准绘制命令。 本节主要学习如何使用绘制组件,绘制详情页食物成分标签(基本几何图形)和应用Logo(自定义图形)。

    2024年01月17日
    浏览(60)
  • HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

    通过前面ArkTS开发语言(上)之TypeScript入门以及ArkTS开发语言(中)之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进,知道了ArkTS具备了声明式语法和组件化特性,今天,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使

    2024年02月04日
    浏览(52)
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。 一、接口 Stack(value?: { alignContent?: Alignment }) 从API version 9开始,该接口支持在ArkTS卡片中使用。 二、属性 除支持通用属性外,还支持以下属性: 三、示例

    2024年02月07日
    浏览(35)
  • HarmonyOS ArkTS TabContent组件实现类微信(可滑动的)tabBar页签切换页面功能

    :harmonyOS   鸿蒙开发  ArkTS  TabContent 使用场景:类微信底部导航栏,点击/左右滑动切换页面并加载数据 开发环境:ArkTS3.1  API9  Phone设备 HMOS Dev官方文档:文档中心 演示效果: 目录 完整Demo已提交至Gitee 搭建页面 自定义TabContent(往后翻有完整代码) 思路 开始 完

    2024年02月05日
    浏览(50)
  • 开发指导—利用组件&插值器动画实现 HarmonyOS 动效

    在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。 通过调用 animate 方法获得 animation 对象,animation 对象支持动画属性、动画方法和动画事件。 说明 ● 使用 animate 方法时必须传入 Keyframes 和 Options 参数。 ● 多次调用 animate 方法时,采用 replace 策略,即最后一

    2024年02月09日
    浏览(35)
  • 安卓——转场动画

    往里面写入两个xml页 为淡入淡出的效果 淡入效果

    2024年02月15日
    浏览(29)
  • Flutter 动画(显式动画、隐式动画、Hero动画、页面转场动画、交错动画)

    当前案例 Flutter SDK版本: 3.13.2 Tween({this.begin,this.end})  两个构造参数,分别是  开始值 和 结束值 ,根据这两个值,提供了控制动画的方法,以下是常用的; controller.forward()   :   向前,执行 begin 到 end 的动画,执行结束后,处于end状态; controller.reverse()   :   反向,当动画

    2024年02月20日
    浏览(48)
  • 鸿蒙ArkTS Web组件加载空白的问题原因及解决方案

    初学鸿蒙开发,按照官方文档Web组件文档《使用Web组件加载页面》示例中的代码照抄运行后显示空白,纠结之余多方搜索后扔无解决方法。 无意间gitee搜索鸿蒙web组件项目代码时看到 Web组件抽奖案例(ArkTS) Readme文档中有一句话,如下: 本篇Codelab使用了在线网页,需要在配

    2024年02月04日
    浏览(65)
  • UE4 顶点网格动画播放后渲染模糊问题

    问题描述:ABC格式的顶点网格动画播放结束后,改模型看起来显得很模糊有抖动的样子 解决办法:关闭逐骨骼动态模糊

    2024年02月07日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包