上文 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 = 350
this.ymHeight = 300
})
})
}
.width('100%')
.height('100%')
}
}
这里 我们直接定义了 ymWidth 和 ymHeight 都是 number 数值类型
然后写了一个 button 用 ymWidth 和 ymHeight 控制它的高度和宽度
然后下面按钮点击事件 调用 animateTo
第二个参数中 将 ymWidth 和 ymHeight 都加大
然后 我们第一个参数 json中和上文说的都是一样的
duration 动画总用时 控制在 3000毫秒 就是三秒
curve 用 Linear 整个动画匀速进行
iterations 动画重复 3次
playMode 模式设置 Alternate 就是会执行完动画 再折返一次 例如 我们上文中是动画到最右侧 然后 还会从最右侧回到最左侧
这里 我们的效果就是放大之后 还会缩小回来文章来源:https://www.toymoban.com/news/detail-789367.html
我们运行代码
点击执行 文案的按钮后 中心的button 就会放大 然后因为PlayMode.Alternate, 每次放到最大 还会瘦小回去 直到最后一次动画执行完 他就不会瘦小回去了
文章来源地址https://www.toymoban.com/news/detail-789367.html
到了这里,关于HarmonyOS 通过 animateTo讲解尺寸动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!