A Detailed explanation of the animations in the Cangjie development language of HarmonyOS Next

Good morning, everyone. Today, let's talk about animation development in the Cangjie development language.

In Cangjie, there are usually two types of animations: attribute animation and display animation. Today, we will take the loading animation as an example and implement them respectively using display animation and attribute animation to see what the differences are.

Display animation

Displaying animations is a method that You LAN Jun is more accustomed to using, and it mainly relies on the animateTo method to be implemented.

First of all, I need to add the loading image on the page now and set its Angle as a variable. There is a strange thing about the Cangjie language here. If the angle attribute is only set to "angle", it is invalid. Both "z" and "Angle" must be set simultaneously:

@State
var angle:Float32 = 0.0
Column{
    Image(@r(app.media.loading))
    .width(70)
    .height(70)
    .rotate(z:this.angle,angle:this.angle)
}
.width(120)
.height(120)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color(0, 0, 0, alpha: 0.7))
.borderRadius(10)

Then add a button and carry out animation development in the click event of the button:

Button('开始动画')
.width(100)
.onClick({evet =>
    animateTo(
            AnimateParam(
                duration: 2000,
                curve: Curve.Linear,
                delay: 0,
                iterations: -1,
                playMode: PlayMode.Normal,
                onFinish: {=>
                    angle = 0.0
                    }
                ),
                {   =>
                    angle = 360.0
                    })
    })

In the above code, "duration" represents the duration of the animation, "curve" represents the animation curve, "delay" represents the delay, "iterations" represents the number of loops, "-1" represents an infinite loop, and "playMode" represents the animation mode. These attributes are also applicable in attribute animations.

Attribute animation

The display animations of each attribute in the attribute animation are the same, but there are differences in their writing methods. Let me demonstrate to you how to write the same animation using the attribute animation:

let animate = AnimateParam(
    duration: 2000,
    curve:Curve.Linear,
    delay: 0,
    iterations: -1,
    playMode: PlayMode.Normal,
    onFinish: { => })
Column{
    Image(@r(app.media.loading))
     .animationStart(animate)
    .width(70)
    .height(70)
    .rotate(z:this.angle,angle:this.angle)
    .animationEnd()
}
.width(120)
.height(120)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color(0, 0, 0, alpha: 0.7))
.borderRadius(10)
Button('开始')
.onClick({eve =>
    this.angle = 360.0
    }) 

The above is all the relevant content about the Cangjie language attribute animation and display animation. Thank you for reading