鸿蒙开发-动画

275 阅读1分钟

1. 属性过渡动画 .animation( options )

通过设置组件的animation属性给组件添加动画过渡, 当组件的:width/height/opacity/backgroundColor/scale/ratate/translate等属性值被修改时,可以实现过渡动画效果, opations如下: image.png

使用实例:控制器控制变量fishXfishY的数值增加减小 image.png 不知道为什么必须设置图片的width 和 height属性才生效, 之前只设置了width 没有指定height, 动画怎么都不生效

2. 显式动画 animateTo()

通过全局函数: animateTo(options, fn) 来修改组件属性绑定的变量, 实现属性变化时的过渡效果

image.png

animateTo()函数接收两个参数, 参数1为动画参数options(与属性动画一致), 参数2为一个函数, 在函数内部去修改要做动画的组件属性关联的状态变量

image.png

3. 组件转场动画 (组件创建销毁动画)

转场动画是在组件插入和移除时的过渡动画, 通过组件的transition属性来配置 image.png 简单来说options每一项指定的都是组件 进入时起点离开时终点 的状态

image.png

但是点击开始后, 元素并没有添加上转场动画 而是直接显示出来了!!

原来必须要配合第二步的显式动画 animateTo 函数使用才生效

image.png