上文 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 = 350this.ymHeight = 300})})}.width('100%').height('100%')}
}
这里 我们直接定义了 ymWidth 和 ymHeight 都是 number 数值类型
然后写了一个 button 用 ymWidth 和 ymHeight 控制它的高度和宽度
然后下面按钮点击事件 调用 animateTo
第二个参数中 将 ymWidth 和 ymHeight 都加大
然后 我们第一个参数 json中和上文说的都是一样的
duration 动画总用时 控制在 3000毫秒 就是三秒
curve 用 Linear 整个动画匀速进行
iterations 动画重复 3次
playMode 模式设置 Alternate 就是会执行完动画 再折返一次 例如 我们上文中是动画到最右侧 然后 还会从最右侧回到最左侧
这里 我们的效果就是放大之后 还会缩小回来
我们运行代码
点击执行 文案的按钮后 中心的button 就会放大 然后因为PlayMode.Alternate, 每次放到最大 还会瘦小回去 直到最后一次动画执行完 他就不会瘦小回去了
)