0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS应用开发TS动画插值计算体验

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-03-09 10:14 次阅读

说明:从 API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

导入模块:

import curves from ‘@ohos.curves’

curves.init

init(curve?: Curve): Object

插值曲线的初始化函数,可以根据入参创建一个插值曲线对象。

参数

HarmonyOS应用开发TS动画插值计算体验


返回值:
曲线对象Object。

curves.steps
steps(count: number, end: boolean): Object
构造阶梯曲线对象。
参数:

HarmonyOS应用开发-TS动画插值计算体验-OpenHarmony技术社区


返回值:
曲线对象Object。

curves.cubicBezier
cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
参数:

HarmonyOS应用开发TS动画插值计算体验


返回值:
曲线对象Object。

curves.spring
spring(velocity: number, mass: number, stiffness: number, damping: number): Object
构造弹簧曲线对象。
参数:

HarmonyOS应用开发TS动画插值计算体验


返回值:
曲线对象Object。

示例:

import Curves from '@ohos.curves'
@Entry
@Component
struct ImageComponent {
  @State widthSize: number = 200
  @State heightSize: number = 200
  build() {
    Column() {
      Text()
        .margin({top:100})
        .width(this.widthSize)
        .height(this.heightSize)
        .backgroundColor(Color.Red)
        .onClick(()=> {
          let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0);
          this.widthSize = curve.interpolate(0.5) * this.widthSize;
          this.heightSize = curve.interpolate(0.5) * this.heightSize;
        })
        .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)})
    }.width("100%").height("100%")
  }
}

复制

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 计算
    +关注

    关注

    2

    文章

    442

    浏览量

    38708
  • 曲线
    +关注

    关注

    1

    文章

    82

    浏览量

    20832
  • HarmonyOS
    +关注

    关注

    79

    文章

    1966

    浏览量

    29970
收藏 人收藏

    评论

    相关推荐

    TS3A226AE TIP连上左声道,慢不识别怎么解决?

    TS3A226AE这个物料TIP脚连上左声道,带耳麦的耳机插入,插入三段过几秒再插入第四段(慢速插入),耳麦功能就无效,但是断开TIP后慢也可以识别耳麦,请问这个脚可以断开么?如果不能断开有没有办法解决慢识别的问题?
    发表于 10-12 08:11

    HarmonyOS开发案例:【购物车app】

    OpenHarmony ArkUI框架提供了丰富的动画组件和接口,开发者可以根据实际场景和开发需求,选用丰富的动画组件和接口来实现不同的动画
    的头像 发表于 05-14 18:19 980次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【购物车app】

    HarmonyOS开发案例:【转场动画

    在本教程中,我们将会通过一个简单的样例,学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间转场、组件内转场以及共享元素转场。
    的头像 发表于 05-06 15:42 964次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【转场<b class='flag-5'>动画</b>】

    HarmonyOS开发案例:【动效】

    利用ArkUI组件不仅可以实现局部属性变化产生的属性动画,也可以实现父组件属性变化引起子组件产生过渡效果式的全局动画即显式动画
    的头像 发表于 04-29 22:10 2255次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【动效】

    HarmonyOS开发案例:【自定义下拉刷新动画

    主要介绍组件动画animation属性设置。当组件的某些通用属性变化时,可以通过属性动画实现渐变效果,提升用户体验。
    的头像 发表于 04-29 16:06 881次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【自定义下拉刷新<b class='flag-5'>动画</b>】

    OpenHarmony实战开发-如何实现组件动画

    ArkUI为组件提供了通用的属性动画和转场动画能力的同时,还为一些组件提供了默认的动画效果。例如,List的滑动动效,Button的点击动效,是组件自带的默认动画效果。在组件默认
    的头像 发表于 04-28 15:49 542次阅读
    OpenHarmony实战<b class='flag-5'>开发</b>-如何实现组件<b class='flag-5'>动画</b>。

    HarmonyOS开发案例:【image、image-animator组件】

    OpenHarmony提供了常用的图片、图片帧动画播放器组件,开发者可以根据实际场景和开发需求,实现不同的界面交互效果,包括:点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
    的头像 发表于 04-26 17:32 1400次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【image、image-animator组件】

    HarmonyOS开发案例:【动画

    使用动画样式,实现几种常见动画效果:平移、旋转、缩放以及透明度变化。
    的头像 发表于 04-25 15:13 438次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【<b class='flag-5'>动画</b>】

    鸿蒙OS开发实例:【页面传跳转】

    本篇主要介绍如何在HarmonyOS中,在页面跳转之间如何传 HarmonyOS 的页面指的是带有@Entry装饰器的文件,其不能独自存在,必须依赖UIAbility这样的组件容器 如下是官方关于State模型
    的头像 发表于 03-29 20:16 2132次阅读
    鸿蒙OS<b class='flag-5'>开发</b>实例:【页面传<b class='flag-5'>值</b>跳转】

    鸿蒙开发之发动画

    FPS(Frame Per Second),即每秒的动画帧数,帧率越高则动画就会越流畅。 ArkUI中,产生动画的方式是改变属性且指定动画
    的头像 发表于 02-01 15:25 598次阅读
    鸿蒙<b class='flag-5'>开发</b>之发<b class='flag-5'>动画</b>篇

    什么是线性插值?一维线性插值和双线性插值在BMS开发中的应用

    线性插值法(linear interpolation),是指使用连接两个已知量的直线来确定在这两个已知量之间的一个未知量的的方法。
    的头像 发表于 12-24 10:44 8879次阅读
    什么是线性<b class='flag-5'>插值</b>?一维线性<b class='flag-5'>插值</b>和双线性<b class='flag-5'>插值</b>在BMS<b class='flag-5'>开发</b>中的应用

    图像理论研究之双三次插值

    双三次插值又叫双立方,用于在图像中“”(Interpolating)或增加“像素”(Pixel)数量/密度的一种方法。通常利用
    的头像 发表于 12-14 14:35 1018次阅读
    图像<b class='flag-5'>插</b><b class='flag-5'>值</b>理论研究之双三次<b class='flag-5'>插值</b>

    基于FPGA的线性插值-中

    上次分享了基于FPGA的线性插值的背景和方法原理,今天分享 方法原理的验证。 通常FPGA的开发分为电路功能设计、设计输入、功能仿真、综合优化、综合后仿真、实现、布线后仿真、板级仿真以及芯片编程
    发表于 11-23 23:09

    HarmonyOS属性动画开发示例(ArkTS)

    源码下载 动效示例(ArkTS).zip 环境搭建 我们首先需要完成 HarmonyOS 开发环境搭建,可参照如图步骤进行。 软件要求 DevEco Studio版本:DevEco Studio
    发表于 11-23 15:31

    基于FPGA的线性插值-上

    1,背景 利用FPGA做数据处理、系统控制时,经常需要做线性插值。如图(1)所示,给点A和B的x,y坐标,需要求A,B中间某一点C的坐标。限定x取整数。 图(1) 示意图 根据A,B两点即可
    发表于 11-20 23:10