This article demonstrates how to use ArkUI of HarmonyOS to realize a like animation effect. Experience the latest API 9 of HarmonyOS 3, and welcome everyone to participate in building this era of Internet of Everything!
event homepage
The HarmonyOS Online Codelabs Challenge has started. This series of challenges will focus on the technical features of HarmonyOS' basic components and container components, third-party libraries, and databases. Developers can quickly build interesting applications by experiencing HarmonyOS features and capabilities. , Useful Apps.
Interested friends to participate together.
Event home page:
Get HarmonyOS application source code
The ArkUI of HarmonyOS implements the program "GiveThumbsUp" for the animation effect of thumbs-up. All the codes can be found in the "HarmonyOS Development with Laowei" project (see "References" at the end of the article for the link). Interested netizens can clone the code to run, test and modify it locally.
Next, we will describe how the application "GiveThumbsUp" is implemented.
Create applications with DevEco Studio 3
For the installation and configuration of DevEco Studio 3, you can refer to the previous article "DevEco Studio 3 must be installed to play HarmonyOS 3, pay attention to avoiding bullets" and will not be repeated here.
The first choice is to open DevEco Studio 3, and you can see the following interface.
Click "Create Project" to create the ArkUI program "GiveThumbsUp".
select template
Select the empty template Empty Ability, and click "Next" to execute the next step.
configuration items
Configure project information, mainly the part circled below. Other configurations can follow the default configuration. Click "Finish" to proceed to the next step.
After the program initialization is completed, the code can be developed and run on the basis of the program.
Run the HarmonyOS application
Open Device Manager
Log in with your Huawei account
Click "Sign In" to log in to your personally registered Huawei account. If not, please refer to the link at the end of this article to register.
Start the remote emulator
run the application
Click the down triangle button to launch the application
The application running effect diagram is as follows.
perfect code
On the basis of the empty template, we initially add business code to finally realize the program.
Add image model
In the ets directory, create a "model" directory to store the data model.
Create ImageData.ets to represent the image data model, which has three main attributes.
export class ImageData {
id: string
img: Resource
name: string
constructor(id: string, img: Resource, name: string) {
this.id = id // 图片唯一表示
this.img = img // 图片资源
this.name = name // 图片名称
}
}
copyAdd image data source
Add the initializeImageData method in the Index.ets file to initialize the image data source code as follows:
export function initializeImageData(): Array<ImageData> {
let imageDataArray: Array<ImageData> = [
{ "id": "0", "img": $r('app.media.pic01'), "name": '女1' },
{ "id": "1", "img": $r('app.media.pic02'), "name": '女2' },
{ "id": "2", "img": $r('app.media.pic03'), "name": '女3' },
]
return imageDataArray
}
copyYou can see that an array is defined above, which contains the information of three pictures. The "$rd" symbol is used for image resources under the media directory of the application.
Add picture component
Modify the Index.ets code as follows:
import { ImageData } from '../model/ImageData';
@Entry
@Component
struct Index {
private imageSrc: ImageData[] = initializeImageData()
@State imageIndex:number = 0;
@State itemClicked: boolean = false;
build() {
Column() {
Row() {
Image(this.imageSrc[this.imageIndex].img)
.rotate({
x: 0,
y: 1,
z: 0,
angle: this.itemClicked ? 360 : 0
})
.scale(
this.itemClicked
? { x: 1.4, y: 1.4 }
: { x: 1, y: 1 }
)
.opacity(this.itemClicked ? 0.6 : 1)
.animation(
{
delay: 10,
duration: 1000,
iterations: 1,
curve: Curve.Smooth,
playMode: PlayMode.Normal
}
);
}.height('93%').border({ width: 1 })
copyThe above code is used to display the animation parameters of the picture and the picture.
Add button trigger animation
Modify the Index.ets code as follows:
Row() {
Row(){
Button('点赞', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
}.width('30%').height(50).onClick(()=>{
this.itemClicked = !this.itemClicked;
})
Row(){
Button('更换', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
}.width('30%').height(50).onClick(()=>{
this.imageIndex ++;
if (this.imageIndex>=this.imageSrc.length) {
this.imageIndex = 0;
}
this.itemClicked = false;
})
}.height('7%').border({ width: 1 })
}
}
}
copyIn the above code, the "Like" button will trigger the animation, and the "Replace" button will modify the source of the image.
Program running effect
For the complete demonstration video, see Station B: [Laowei Moves Bricks] Issue 029: Use HarmonyOS ArkUI to realize the animation effect of praising female flops_哔哩哔哩_bilibili
source code
See "GiveThumbsUp" in https://github.com/waylau/harmonyos-tutorial
References
- "Learn HarmonyOS Development from Laowei" open source free tutorial, https://github.com/waylau/harmonyos-tutorial
- "Hongmeng HarmonyOS application development from entry to proficiency" (Liu Weiwei, Peking University Press) "Hongmeng HarmonyOS application development from entry to proficiency" (Liu Weiwei) [Abstract book review trial reading] - Jingdong Books, "Hongmeng HarmonyOS application development from entry To Master the Works of Liu Weiwei (Liu Weiwei) [Introduction_Book Review_Online Reading] - Dangdang Books
- To play HarmonyOS 3, you must install DevEco Studio 3, pay attention to avoid bullets Huawei Developer Forum