HarmonyOS讲解并演示 animateTo 动画效果

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

本文 我们一起看一看动画

首先 harmonyos中的东西 其实就是通过改变 响应式数据的值 以及配合动画参数 即可完成

我们先来看 布局更新动画 中的 显示动画
简单说 触发事件 改变组件的位置信息

我们先编写代码如下

@Entry
@Component
struct Index {

  @State itemAlign: HorizontalAlign = HorizontalAlign.Start

  build() {
    Column({space: 30}) {
      Text("点击修改布局位置")
        .fontSize(38)
        .margin({top:188})
      Column({space: 18 }) {
        Button("按钮1")
          .width(100)
          .height(58)
         Button("按钮2")
           .width(100)
           .height(58)
      }
      .margin(20)
      .borderWidth(2)
      .width("90%")
      .height(400)
      .justifyContent(FlexAlign.Center)
      .alignItems(this.itemAlign)

      Button("执行").onClick((event: ClickEvent) => {
        
      })
  }
    .width('100%')
    .height('100%')
  }
}

HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
主容器下 Text 文本展示内容
Column 组件下 两个 button组件
justifyContent 因为是 Column 组件 主轴是 垂直方向 FlexAlign.Center 居中对齐 简单说 垂直方向居中对齐
alignItems 设置侧轴 就是 我们的水平方向 用了 组件中的 itemAlign属性 值是 HorizontalAlign.Start 由左至右

那么 这就很简单了 想改变它的位置 改 itemAlign 显然就可以了
我们在下面按钮上 设置的点击事件中加入代码

this.itemAlign = HorizontalAlign.End;

将它设置末尾对齐
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
我们点击后 它会立刻跑到末尾的位置 但可能会显得太快了 一下就跳过去了
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
我们将点击事件的代码改成这样

animateTo({
  duration: 3000,
},() => {
  this.itemAlign = HorizontalAlign.End;
})

HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
这里 我们调用 animateTo 动画效果 然后 第一个参数 是一个json 里面放动画参数 我们这里的参数是 duration 动画时长 毫秒单位 三千毫秒 等于 三秒
然后 第二个参数是一个箭头函数 里面写动画要做的事 我们将改变对齐方式的代码放进来

此时 我们再次点击 它就有一个慢慢移动过去的效果了
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
它默认的这种速率 大家会感受到 刚开始 快 然后慢了 最后又开始快了

我们在 animateTo 第一个参数JSON中写

curve: Curve.

它就会弹出很多提示
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
Linear 表示匀速
Ease 慢
EaseIn 慢慢的进入动画 后面加快
EaseIn0ut 开头结尾相对慢一些 中间比较快
这个 大家可以自己查官方文档 Curve中 的内容
这里 我们先用 Linear 均匀的速度 走完整个动画
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
我们点击后 就会均匀的按duration时间慢慢位移过去
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
然后还有 delay 延迟属性
如下图 箭头指向位置 我们让他延迟两秒 就是 它触发动画会先停两秒 然后才执行
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
还有很多属性 大家可以自己去找 animateTo

onFinish 动画结束之后 执行的函数

animateTo({
	duration: 3000,
	curve: Curve.Linear,
	delay: 2000,
	onFinish: (()=>{
	    console.log("动画结束");
	})
},() => {
   this.itemAlign = HorizontalAlign.End;
})

此时 我们点击动画结束后 控制台就会执行 onFinish输出
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
iterations 可以控制动画播放的次数
这里 我们 将 delay 延迟去掉 不然太浪费时间了
下面 iterations 3 让它执行三次
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
点击后 他就会执行三次才结束
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
iterations 给个 -1 即是一直重复
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
playMode 设置播放的模式
我们输入

playMode: PlayMode.

下面就会带出很多提示
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
这里 我们 来个 Reverse
这样 我们整个动画就会放过来 之前是从左到右
现在就成了从右到左
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙
Alternate 我们可能会比较常用
之前 我们是 到最右侧 然后马上回到左侧 而加上 Alternate 它会有一个原路返回的过程 看着更流程了
HarmonyOS讲解并演示 animateTo 动画效果,harmonyos,华为,鸿蒙文章来源地址https://www.toymoban.com/news/detail-794327.html

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

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

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

相关文章

  • 开发指导—利用组件&插值器动画实现 HarmonyOS 动效

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

    2024年02月09日
    浏览(36)
  • 开发指导—利用CSS动画实现HarmonyOS动效(一)

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月21日
    浏览(39)
  • 华为 HarmonyOS 页面跳转

    我们新建2个页面(page),一个Hello World页面,一个Hello HarmonyOS页面,注意修改红色框内容,保持一致 导入导入router模块,页面跳转接口,添加按钮点击事件

    2024年01月24日
    浏览(46)
  • 【华为鸿蒙】HarmonyOS概述:技术特性

    来源:HarmnyOS 官网 https://developer.harmonyos.com/cn/docs/documentation/doc-guides/harmonyos-features-0000000000011907 多种设备之间能够实现硬件互助、资源共享,依赖的关键技术包括分布式软总线、分布式设备虚拟化、分布式数据管理、分布式任务调度等。 分布式软总线是手机、平板、智能穿戴

    2024年01月21日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包