harmony 鸿蒙@ohos.animator (动画)

  • 2022-08-09
  • 浏览 (888)

@ohos.animator (动画)

本模块提供组件动画效果，包括定义动画、启动动画和以相反的顺序播放动画等。

说明：

本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

本模块从API version 9开始支持在ArkTS中使用。

该模块不支持在UIAbility的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的createAnimator来明确UI的执行上下文。

导入模块

import animator, { AnimatorOptions,AnimatorResult } from '@ohos.animator';

create9+

create(options: AnimatorOptions): AnimatorResult

定义Animator类。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
options AnimatorOptions 是 定义动画选项。

返回值：

类型 说明
AnimatorResult Animator结果接口。

示例：

import animator, { AnimatorOptions,AnimatorResult } from '@ohos.animator';
let options: AnimatorOptions = {
  duration: 1500,
  easing: "friction",
  delay: 0,
  fill: "forwards",
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0
};
animator.create(options);

AnimatorResult

定义Animator结果接口。

reset9+

reset(options: AnimatorOptions): void

更新当前动画器。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
options AnimatorOptions 是 定义动画选项。

错误码：

以下错误码的详细介绍请参见ohos.animator(动画)错误码。

错误码ID 错误信息
100001 if no page is found for pageId or fail to get object property list.

示例：

import animator, { AnimatorOptions,AnimatorResult } from '@ohos.animator';
import { BusinessError } from '@ohos.base';
let options: AnimatorOptions = {
  duration: 1500,
  easing: "friction",
  delay: 0,
  fill: "forwards",
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0
};
try {
  animator.reset(options);
} catch(error) {
  let message = (error as BusinessError).message
  let code = (error as BusinessError).code
  console.error(`Animator reset failed, error code: ${code}, message: ${message}.`);
}

play

play(): void

启动动画。动画会保留上一次的播放状态，比如播放状态设置reverse后，再次播放会保留reverse的播放状态。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.play();

finish

finish(): void

结束动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.finish();

pause

pause(): void

暂停动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.pause();

cancel

cancel(): void

删除动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.cancel();

reverse

reverse(): void

以相反的顺序播放动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.reverse();

onframe

onframe: (progress: number) => void

接收到帧时回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
progress number 是 动画的当前进度。

示例：

import animator, { AnimatorResult } from '@ohos.animator';
let animatorResult:AnimatorResult|undefined = animator.create(options)
animatorResult.onframe = (value)=> {
  console.info("onframe callback")
}

onfinish

onfinish: () => void

动画完成时回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

import animator, { AnimatorResult } from '@ohos.animator';
let animatorResult:AnimatorResult|undefined = animator.create(options)
animatorResult.onfinish = ()=> {
  console.info("onfinish callback")
}

oncancel

oncancel: () => void

动画被取消时回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

import animator, { AnimatorResult } from '@ohos.animator';
let animatorResult:AnimatorResult|undefined = animator.create(options)
animatorResult.oncancel = ()=> {
  console.info("oncancel callback")
}

onrepeat

onrepeat: () => void

动画重复时回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

import animator, { AnimatorResult } from '@ohos.animator';
let animatorResult:AnimatorResult|undefined = animator.create(options)
animatorResult.onrepeat = ()=> {
  console.info("onrepeat callback")
}

AnimatorOptions

定义动画选项。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
duration number 是 动画播放的时长，单位毫秒。
easing string 是 动画插值曲线，仅支持以下可选值：
“linear”：动画线性变化。
“ease”：动画开始和结束时的速度较慢，cubic-bezier(0.25、0.1、0.25、1.0)。
“ease-in”：动画播放速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
“ease-out”：动画播放速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
“ease-in-out”：动画播放速度先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
“fast-out-slow-in”：标准曲线，cubic-bezier(0.4，0.0，0.2，1.0)。
“linear-out-slow-in”：减速曲线，cubic-bezier(0.0，0.0，0.2，1.0)。
“friction”：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
“extreme-deceleration”：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
“rhythm”：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
“sharp”：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
“smooth”：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
“cubic-bezier(x1,y1,x2,y2)“：三次贝塞尔曲线，x1、x2的值必须处于0-1之间。例如”cubic-bezier(0.42,0.0,0.58,1.0)“。
“steps(number,step-position)“：阶梯曲线，number必须设置，为正整数，step-position参数可选，支持设置start或end，默认值为end。例如”steps(3,start)“。
delay number 是 动画延时播放时长，单位毫秒，设置为0时，表示不延时。
fill “none” |“forwards” |“backwards” |“both” 是 动画执行后是否恢复到初始状态，动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。
“none”：在动画执行之前和之后都不会应用任何样式到目标上。
“forwards”：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
“backwards”：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为”normal”或”alternate”时应用from关键帧中的值，当animation-direction为”reverse”或”alternate-reverse”时应用to关键帧中的值。
“both”：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
direction “normal” |“reverse” |“alternate” |“alternate-reverse” 是 动画播放模式。
“normal”： 动画正向循环播放。
“reverse”： 动画反向循环播放。
“alternate”：动画交替循环播放，奇数次正向播放，偶数次反向播放。
“alternate-reverse”：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
iterations number 是 动画播放次数。设置为0时不播放，设置为-1时无限次播放。
说明: 设置为除-1外其他负数视为无效取值，无效取值动画默认播放1次。
begin number 是 动画插值起点。
end number 是 动画插值终点。

完整示例

基于JS扩展的类Web开发范式

<!-- hml -->
<div class="container">
  <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
  </div>
</div>

import animator, { AnimatorOptions,AnimatorResult } from '@ohos.animator';
import { BusinessError } from '@ohos.base';
let DataTmp:Record<string,animator> = {
  'divWidth': 200,
  'divHeight': 200,
  'animator': animator
}
class Tmp{
  data:animator = DataTmp
  onInit:Function = ()=>{}
  Show:Function = ()=>{}
}
class DateT{
  divWidth:number = 0
  divHeight:number = 0
  animator:AnimatorResult|null = null
}
(Fn:(v:Tmp) => void) => {Fn({
  data: DataTmp,
  onInit() {
    let options:AnimatorOptions = {
      duration: 1500,
      easing: "friction",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    let DataTmp:DateT = {
      divWidth: 200,
      divHeight: 200,
      animator: null
    }
    DataTmp.animator = animator.create(options);
  },
  Show() {
    let options1:AnimatorOptions = {
      duration: 1500,
      easing: "friction",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 2,
      begin: 0,
      end: 400.0,
    };
    let DataTmp:DateT = {
      divWidth: 200,
      divHeight: 200,
      animator: null
    }
    try {
      DataTmp.animator = animator.create(options1);
      DataTmp.animator.reset(options1);
    } catch(error) {
      let message = (error as BusinessError).message
      let code = (error as BusinessError).code
      console.error(`Animator reset failed, error code: ${code}, message: ${message}.`);
    }
    let _this = DataTmp;
    if(DataTmp.animator){
      DataTmp.animator.onframe = (value:number)=> {
        _this.divWidth = value;
        _this.divHeight = value;
      };
      DataTmp.animator.play();
    }
  }
})}

zh-cn_image_00007

基于TS扩展的声明式开发范式

import animator, { AnimatorResult } from '@ohos.animator';

@Entry
@Component
struct AnimatorTest {
  private TAG: string = '[AnimatorTest]'
  private backAnimator: AnimatorResult|undefined = undefined
  private flag: boolean = false
  @State wid: number = 100
  @State hei: number = 100

  create() {
    let _this = this
    this.backAnimator = animator.create({
      duration: 2000,
      easing: "ease",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 1,
      begin: 100,
      end: 200
    })
    this.backAnimator.onfinish = ()=> {
      _this.flag = true
      console.info(_this.TAG, 'backAnimator onfinish')
    }
    this.backAnimator.onrepeat = ()=> {
      console.info(_this.TAG, 'backAnimator repeat')
    }
    this.backAnimator.oncancel = ()=> {
      console.info(_this.TAG, 'backAnimator cancel')
    }
    this.backAnimator.onframe = (value:number)=> {
      _this.wid = value
      _this.hei = value
    }
  }

  aboutToDisappear() {
    // 由于backAnimator在onframe中引用了this, this中保存了backAnimator，
    // 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏
    this.backAnimator = undefined;
  }

  build() {
    Column() {
      Column() {
        Column()
          .width(this.wid)
          .height(this.hei)
          .backgroundColor(Color.Red)
      }
      .width('100%')
      .height(300)

      Column() {
        Row() {
          Button('create')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.create()
            })
        }
        .padding(10)

        Row() {
          Button('play')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              if(this.backAnimator){
                this.backAnimator.play()
              }
            })
        }
        .padding(10)

        Row() {
          Button('pause')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              if(this.backAnimator){
                this.backAnimator.pause()
              }
            })
        }
        .padding(10)

        Row() {
          Button('finish')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = true
              if(this.backAnimator){
                this.backAnimator.finish()
              }
            })
        }
        .padding(10)

        Row() {
          Button('reverse')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              if(this.backAnimator){
                this.backAnimator.reverse()
              }
            })
        }
        .padding(10)

        Row() {
          Button('cancel')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              if(this.backAnimator){
                this.backAnimator.cancel()
              }
            })
        }
        .padding(10)

        Row() {
          Button('reset')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              if (this.flag) {
                this.flag = false
                if(this.backAnimator){
                  this.backAnimator.reset({
                    duration: 3000,
                    easing: "ease-in",
                    delay: 0,
                    fill: "forwards",
                    direction: "alternate",
                    iterations: 3,
                    begin: 100,
                    end: 300
                  })
                }
              } else {
                console.info(this.TAG, 'Animation not ended')
              }
            })
        }
        .padding(10)
      }
    }
  }
}

update(deprecated)

update(options: AnimatorOptions): void

更新当前动画器。

从API version9开始不再维护，建议使用reset9+

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
options AnimatorOptions 是 定义动画选项。

示例：

animator.update(options);

createAnimator(deprecated)

createAnimator(options: AnimatorOptions): AnimatorResult

定义Animator类。

从API version9开始不再维护，建议使用create9+

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
options AnimatorOptions 是 定义动画选项。

返回值：

类型 说明
AnimatorResult Animator结果接口。

示例：

import animator, { AnimatorOptions,AnimatorResult } from '@ohos.animator';
let options: AnimatorOptions = { // xxx.js文件中不需要强调显式类型AnimatorOptions
  duration: 1500,
  easing: "friction",
  delay: 0,
  fill: "forwards",
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0,
};
this.animator = animator.createAnimator(options);

你可能感兴趣的鸿蒙文章

harmony 鸿蒙接口

harmony 鸿蒙系统公共事件定义(待停用)

harmony 鸿蒙系统公共事件定义

harmony 鸿蒙开发说明

harmony 鸿蒙企业设备管理概述（仅对系统应用开放）

harmony 鸿蒙BundleStatusCallback

harmony 鸿蒙@ohos.bundle.innerBundleManager (innerBundleManager模块)

harmony 鸿蒙@ohos.distributedBundle (分布式包管理)

harmony 鸿蒙@ohos.bundle (Bundle模块)

harmony 鸿蒙@ohos.enterprise.EnterpriseAdminExtensionAbility (企业设备管理扩展能力)

0  赞
  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/e591de05bbf549a7ae37dd78fc8622dc
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录