HarmonyOS 通过 animateTo讲解尺寸动画效果

这篇具有很好参考价值的文章主要介绍了HarmonyOS 通过 animateTo讲解尺寸动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上文 HarmonyOS讲解并演示 animateTo 动画效果 我们已经做出了基本的动画效果
也对 animateTo 的使用比较熟悉了
第一个参数是 配置动画参数的json 第二个参数 则是改变我们元素属性值的事件
但属性值 远远不止位置属性

本文 我们来说 通过尺寸变化 完成动画效果

如果你有看过我的上文
其实我说的这个你应该会觉得非常简单的
只需要在第二个参数中的箭头函数中 去改变元素宽高属性就OK了

我们 可以直接将代码写成这样

@Entry
@Component
struct Index {

  @State ymWidth: number = 100;
  @State ymHeight: number = 50;

  build() {
    Column({space: 30}) {
      Text("修改元素尺寸")
        .fontSize(38)
        .margin({top:188})
      Button()
        .width(this.ymWidth)
        .height(this.ymHeight)

      Button("执行").onClick((event: ClickEvent) => {
        animateTo({
          duration: 3000,
          curve: Curve.Linear,
          //delay: 2000,
          iterations: 3,
          playMode: PlayMode.Alternate,
          onFinish: (()=>{
            console.log("动画结束");
          })
        },() => {
          this.ymWidth = 350
          this.ymHeight = 300
        })
      })
  }
    .width('100%')
    .height('100%')
  }
}

这里 我们直接定义了 ymWidth 和 ymHeight 都是 number 数值类型
然后写了一个 button 用 ymWidth 和 ymHeight 控制它的高度和宽度
然后下面按钮点击事件 调用 animateTo
第二个参数中 将 ymWidth 和 ymHeight 都加大
然后 我们第一个参数 json中和上文说的都是一样的

duration 动画总用时 控制在 3000毫秒 就是三秒
curve 用 Linear 整个动画匀速进行
iterations 动画重复 3次
playMode 模式设置 Alternate 就是会执行完动画 再折返一次 例如 我们上文中是动画到最右侧 然后 还会从最右侧回到最左侧
这里 我们的效果就是放大之后 还会缩小回来

我们运行代码
HarmonyOS 通过 animateTo讲解尺寸动画效果,harmonyos,华为,鸿蒙
点击执行 文案的按钮后 中心的button 就会放大 然后因为PlayMode.Alternate, 每次放到最大 还会瘦小回去 直到最后一次动画执行完 他就不会瘦小回去了
HarmonyOS 通过 animateTo讲解尺寸动画效果,harmonyos,华为,鸿蒙文章来源地址https://www.toymoban.com/news/detail-789367.html

到了这里,关于HarmonyOS 通过 animateTo讲解尺寸动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 开发指导—利用CSS动画实现HarmonyOS动效(一)

    注:本文内容分享转载自 HarmonyOS Developer 官网文档 CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式,也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的组件样式。 ● 逻辑像素 px(文档中以le

    2024年02月10日
    浏览(33)
  • HarmonyOS 页面跳转控制整个界面的转场动画

    好 本文 我们来说 页面间的转场动画 就是 第一个界面到另一个界面 第一个界面的退场和第二个界面的进场效果 首先 我这里 创建了两个页面文件 Index.ets和AppView.ets index组件 编写代码如下 然后 AppView 组件 编写代码如下 这里 我们在index 组件中 编写了 一个点击事件 onClick 点击

    2024年01月20日
    浏览(35)
  • 【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验

            从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是什么?鸿蒙仅仅是一个手机操作系统吗?

    2024年02月03日
    浏览(45)
  • HarmonyOS鸿蒙基于Java开发: Java UI 动画开发指导

    目录 帧动画 数值动画 属性动画 动画集合 多个动画同时开始 多个动画按顺序逐个执行 多个动画顺序执行和同时执行并存 动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。

    2024年02月21日
    浏览(51)
  • HarmonyOS实现几种常见图片点击效果

    HarmonyOS提供了常用的图片、图片帧动画播放器组件,开发者可以根据实际场景和开发需求,实现不同的界面交互效果,包括:点击阴影效果、点击切换状态、点击动画效果、点击切换动效。 image组件 :图片组件,用于图片资源的展示。 image-animator组件 :帧动画播放器,用以

    2024年02月09日
    浏览(40)
  • HarmonyOS学习路之开发篇—Java UI框架(动画开发)

    动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画,并提供了将多个动画同时操作的动画集合。 帧动画是利用视觉暂留现象,将一系列静止的图片按序播放,给用户产生动

    2024年02月09日
    浏览(51)
  • HarmonyOS Stage模型基本概念讲解

    本文 我们来说harmonyos中的一种应用模型 Stage模型 官方提供了两种模型 一种是早期的 FA模型 另一种就是就是 harmonyos 3.1才开始的新增的一种模型 Stage模型 目前来讲 Stage 会成为现在乃至将来 长期推进的一种模型 也就是 无论是 现在的harmonyos 4.0 乃至 之后要发布的 harmonyos next

    2024年02月21日
    浏览(40)
  • HarmonyOS 通过Web组件嵌套网络应用

    我们今天来说说 在程序中嵌套一个网址地址 HarmonyOS中是通过一个简单的WEB组件来实现 网络应用就是相当于网址地址 通过链接将应用嵌入到手机当中 WEB组件需要两个参数 一个是 src 地址 要嵌套的网址 另一个是 控制器 我们可以先编写代码如下 这里 我们导入了 webview 然后通

    2024年01月23日
    浏览(41)
  • HarmonyOS实战开发-通过screenshot模块实现屏幕截图 。

    本示例展示全屏截图和屏幕局部截图。 本示例通过screenshot模块实现屏幕截图 ,通过window模块实现隐私窗口切换,通过display模块查询当前隐私窗口。 使用说明: 点击右上角图标打开弹窗,选择截屏,展示全屏截图;选择局部截屏,选择截屏区域,点击右下角完成,展示局部

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

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

    2024年01月17日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包