HarmonyOS 鸿蒙Next 我在鸿蒙做动画——3、实现律动轨迹中的点击样式
HarmonyOS 鸿蒙Next 我在鸿蒙做动画——3、实现律动轨迹中的点击样式
前言：《律动轨迹》是最近新出的一款音游，想实现的是其中的点击效果。废话不多说，直接上代码：
hljs // @Entry @Component struct TouchEventPage3 { @State aX: number = 0 //让手指点到的地方和小圆球的坐标绑定，这里是横轴X轴，下面是纵轴Y轴 @State aY: number = 0 @State aSize: number = 100 //这是用来绑定大小的， @State aScale: number = 0 //用于控制第二个球的缩放程度（只有Scale参数才能从中间缩放！用width和height缩放只会害了你！） @State bScale:number=0 @State aOpacity: number = 1 //用来调节蓝球的透明度的，但好像还没启用？ @State aBGcolor: string = ‘white’ //让第二个小球和背景色同步
build() { Stack() { Button() .width(this.aSize) .scale({ x: this.bScale, y: this.bScale }) .height(this.aSize) .type(ButtonType.Circle) .opacity(this.aOpacity) .stateEffect(false) .position({ x: this.aX, y: this.aY })
Button()
.scale({ x: this.aScale, y: this.aScale })
.width(this.aSize)
.height(this.aSize)
.type(ButtonType.Circle)
.stateEffect(false)
.backgroundColor(this.aBGcolor)
.position({ x: this.aX, y: this.aY })
}
.width('100%')
.height('100%')
.backgroundColor(this.aBGcolor)
.onTouch((event: TouchEvent) => {
console.log(JSON.stringify(event.touches[0].y - this.aSize * 0.5))
if (event.type === TouchType.Move) {
this.aX = event.touches[0].x - this.aSize * 0.5
this.aY = event.touches[0].y - this.aSize * 0.5
}
if (event.type === TouchType.Down) {
this.aX = event.touches[0].x - this.aSize * 0.5
this.aY = event.touches[0].y - this.aSize * 0.5
this.bScale=0.01
this.aScale=0.01
}
if (event.type === TouchType.Up) {
animateTo({curve:Curve.ExtremeDeceleration},() => {
this.bScale=1
})
animateTo({curve:Curve.FastOutSlowIn},() => {
this.aScale = 1
})
}
})
.height('100%')} }
做的过程中遇到最大的坑，就是.width和.height放大缩小时产生的问题。
如果使用.width和.height缩放的话，是从左上角进行缩放的。
但如果用.scale缩放的话，就是从中心缩放。
其中，还有周边发散的小球，还没有写好，暂时先上传主体吧。更多关于HarmonyOS 鸿蒙Next 我在鸿蒙做动画——3、实现律动轨迹中的点击样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现律动轨迹中的点击样式，可以通过使用Animator和AnimatorValue来实现。首先，创建一个Animator对象，设置动画的持续时间和插值器。然后，通过AnimatorValue来监听动画的进度，并在onUpdate回调中更新UI元素的属性，如位置、大小或透明度，以实现点击时的动态效果。
例如，可以使用AnimatorValue来改变一个按钮的位置，使其在点击时产生一个弹跳效果。具体实现如下：
import animator from '@ohos.animator';
// 创建Animator对象
let animator = new animator.Animator();
animator.duration = 300; // 设置动画持续时间
animator.interpolator = animator.Interpolator.BOUNCE; // 设置插值器
// 创建AnimatorValue对象
let animatorValue = new animator.AnimatorValue();
animatorValue.addUpdateListener((value) => {
// 根据动画进度更新UI元素的位置
button.translateX = value * 100; // 假设按钮在X轴上移动100px
});
// 启动动画
animator.start();通过这种方式，可以在鸿蒙Next中实现点击时的律动轨迹效果。
更多关于HarmonyOS 鸿蒙Next 我在鸿蒙做动画——3、实现律动轨迹中的点击样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
