HarmonyOS 鸿蒙Next 有什么方式可以实现直播点赞的效果？
HarmonyOS 鸿蒙Next 有什么方式可以实现直播点赞的效果？ https://www.w3cschool.cn/article/21386005.html 实现类似这种效果
2 回复
可参考如下Demo实现直播点赞的效果
直播点赞效果实现
示例代码
/**
* 点赞动画效果组件
*/
const NUMBER_OF_ITEMS = 20;
/**
* 动画相关参数
*/
const MIN_ANM_DURATION = 120;
const MAX_ANM_DURATION = 180;
/**
* 表情图片左右偏移距离
*/
const MIN_OFFSET_X = -1;
const MAX_OFFSET_X = 5;
@Component
struct Index{
@State num: number = 0
build() {
Column() {
Image($r('app.media.icon'))
.width(36)
.height(36)
.onClick(() => {
this.num++
})
FloatLikeView({ clickSum: this.num })
} .margin({
top: 500,
left: 200,
bottom: 0,
right: 0
})
}
}
@Component
export struct FloatLikeView {
uiContext: UIContext | undefined = undefined;
/**
* 动态图片资源
*/
private images: Array<Resource> = [$r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon'),
$r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon'),
$r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon'),
$r('app.media.icon'), $r('app.media.icon'), $r('app.media.icon')];
@State scaleArray: Array<number> = [];
@State offXArray: Array<number> = [];
@State offYArray: Array<number> = [];
@State opacityArray: Array<number> = [];
@State imageViews: Array<number> = [];
@State flag: Array<boolean> = [];
@Prop @Watch('startAnimation') clickSum: number = 0;
aboutToAppear(): void {
this.uiContext = this.getUIContext?.();
for (let i = 0; i < NUMBER_OF_ITEMS; i++) {
this.imageViews.push(i);
this.opacityArray.push(0)
this.offXArray.push(0)
this.offYArray.push(0)
this.scaleArray.push(0)
this.flag.push(false)
}
}
build() {
Stack() {
ForEach(this.imageViews, (image: number, index: number) => {
Image(this.images[image % this.images.length])
.objectFit(ImageFit.Cover)
.width(36)
.height(36)
.opacity(this.opacityArray[index])
.scale({ x: this.scaleArray[index], y: this.scaleArray[index] })
.offset({
x: this.offXArray[index],
y: this.offYArray[index]
})
}, (image: Resource) => `${image.id}`)
}
}
startAnimation() {
this.clickAnimation()
}
/**
* 点赞动画
* 0, 1.18, 0.86, 1
*/
clickAnimation() {
if (!this.uiContext) {
return;
}
let index = getRandomInt(0, NUMBER_OF_ITEMS);
index = index >= NUMBER_OF_ITEMS ? 0 : index;
while (this.flag[index] === true) {
index = getRandomInt(0, NUMBER_OF_ITEMS);
index = index >= NUMBER_OF_ITEMS ? 0 : index;
}
this.flag[index] = true;
this.uiContext.keyframeAnimateTo({
iterations: 1, onFinish: () => {
this.flag[index] = false;
}
}, [
{
duration: 1,
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 0;
this.opacityArray[index] = 0;
this.offYArray[index] = 0;
this.offXArray[index] = 0;
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 0.3;
this.opacityArray[index] = 0.5;
this.offYArray[index] = -15;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 0.5;
this.opacityArray[index] = 0.8;
this.offYArray[index] = -30;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 0.6;
this.opacityArray[index] = 0.9;
this.offYArray[index] = -45;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 0.86;
this.opacityArray[index] = 1.0;
this.offYArray[index] = -60;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1.0;
this.opacityArray[index] = 0.9;
this.offYArray[index] = -75;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1.0;
this.opacityArray[index] = 0.8;
this.offYArray[index] = -90;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1.0;
this.opacityArray[index] = 0.75;
this.offYArray[index] = -105;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1.0;
this.opacityArray[index] = 0.7;
this.offYArray[index] = -120;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0.6;
this.offYArray[index] = -135;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0.5;
this.offYArray[index] = -150;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0.3;
this.offYArray[index] = -165;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0.2;
this.offYArray[index] = -180;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0.1;
this.offYArray[index] = -195;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
{
duration: getRandomInt(MIN_ANM_DURATION, MAX_ANM_DURATION),
curve:Curve.Smooth,
event: () => {
this.scaleArray[index] = 1;
this.opacityArray[index] = 0;
this.offYArray[index] = -210;
this.offXArray[index] = getRandomInt(MIN_OFFSET_X, MAX_OFFSET_X);
}
},
])
}
}
function getRandomInt(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
更多关于HarmonyOS 鸿蒙Next 有什么方式可以实现直播点赞的效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next系统中实现直播点赞的效果，可以通过以下方式实现：
首先，需要确定直播应用的界面布局，其中包括视频显示区域和点赞按钮或交互区域。这通常涉及使用鸿蒙系统的UI框架（如ArkUI）来设计用户界面。
其次，实现点赞功能的核心逻辑。当用户点击点赞按钮或进行其他点赞操作时，应用需要捕获这个事件，并触发相应的业务逻辑。这可能包括增加点赞计数、更新UI显示（如显示点赞动画或更新点赞数量），以及可能需要与服务器通信来记录这个点赞行为。
为了实现与服务器的通信，鸿蒙系统提供了网络请求的相关API，可以用来发送HTTP请求或WebSocket连接等，以将用户的点赞行为同步到服务器。
此外，为了提高用户体验，可以考虑添加一些交互效果，如点赞动画或音效，以及处理网络延迟或错误的情况。
在实现过程中，应确保遵循鸿蒙系统的开发规范和最佳实践，以确保应用的稳定性和性能。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，
