Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,483
- Баллы
- 155
Foreword
this article is based on Api12
the so-called frame animation is similar to playing movies, playing frame by frame. Compared with attribute animation, we can set relevant attribute values for each frame, and has the advantages of pausing and continuing playback, and also has real-time response to events. It should be noted that the performance is far inferior to attribute animation, so if the scene can be realized by attribute animation, or the main push property animation.
Implement frame animation
A component moves frame by frame and can be paused.
First of all, frame animation is to create a frame animation through gettext ().createAnimator, and through the onFrame method to receive the frame callback, and in this method to perform related animation operations.
Simple example
@Entry
@Component
struct Index {
@State animatorOptions: AnimatorResult | undefined = undefined
animatorOption: AnimatorOptions = {
duration: 3000, //The duration of animation playback
delay: 0, //Animation delay playback duration
easing: 'linear', //Animation interpolation curve
iterations: 1, //Number of animation plays
fill: "forwards", //Is the animation restored to its initial state after execution
direction: 'normal', //Animation playback mode
begin: 0, //Animation interpolation starting point
End: 100//Animation interpolation endpoint
}
@State translateX: number = 0
@State translateY: number = 0
onPageShow(): void {
this.animatorOptions = this.getUIContext().createAnimator(this.animatorOption)
this.animatorOptions.onFrame = (progress: number) => {
//Callback upon receiving a frame
this.translateX = progress
}
}
onPageHide(): void {
this.animatorOptions = undefined
}
build() {
RelativeContainer() {
Text("1")
.width(30)
.height(30)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Red)
.margin({ top: 100 })
.id("view1")
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.translate({ x: this.translateX, y: this.translateY })
Row() {
Button (Play)
.onClick(() => {
this.animatorOptions? .play()
})
Button (pause)
.margin({ left: 10 })
.onClick(() => {
this.animatorOptions? .pause()
})
Button (Reset)
.margin({ left: 10 })
.onClick(() => {
this.translateX = 0
this.translateY = 0
})
}
.margin({ top: 10 })
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
the createAnimator method creates a frame animation and returns an AnimatorResult object. Through AnimatorResult, we can implement many functions, such as play, pause, cancel, monitor status, etc.
Play
this.animatorOptions?.play()
pause
this.animatorOptions?.pause()
cancel
this.animatorOptions?.cancel()
reverse
this.animatorOptions?.reverse()
complete
this.animatorOptions?.finish()
animation Complete Callback
this.animatorOptions!.onFinish = () => {
}
animation Cancel Callback
this.animatorOptions!.onCancel = () => {
}
animation Repeat Callback
this.animatorOptions!.onRepeat = () => {
}
set the desired frame rate range
byThe setExpectedFrameRateRange method is used to set the Api, which must be 12 or more.
let expectedFrameRate: ExpectedFrameRateRange = {
min: 0,
max: 60,
expected: 30
}
animatorResult.setExpectedFrameRateRange(expectedFrameRate)
Picture Frame Animation
frame animation, the most used place is the picture, such as loading prompt, a simple small animation, etc., the use frequency is quite high, the system provides the ImageAnimator component is convenient for us to implement.
Simple example
@Entry
@Component
struct Index {
@State state: AnimationStatus = AnimationStatus.Running
private images: Array<ImageFrameInfo> = [
{ src: $r("app.media.loading001") },
{ src: $r("app.media.loading002") },
{ src: $r("app.media.loading003") },
{ src: $r("app.media.loading004") },
{ src: $r("app.media.loading005") },
{ src: $r("app.media.loading006") },
{ src: $r("app.media.loading007") },
{ src: $r("app.media.loading008") },
{ src: $r("app.media.loading009") },
{ src: $r("app.media.loading010") },
{ src: $r("app.media.loading011") },
{ src: $r("app.media.loading012") }
]
build() {
RelativeContainer() {
Column() {
ImageAnimator()
.images(this.images)
.fixedSize(true)
.fillMode(FillMode.None)
.iterations(-1)
.state(this.state)
.width(40)
.height(40)
}
.id("view1")
.width(120)
.height(120)
.borderRadius(10)
.backgroundColor("#80000000")
.justifyContent(FlexAlign.Center)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.margin({ top: 50 })
Row() {
Button("start")
.onClick(() => {
this.state = AnimationStatus.Running
})
Button("pouse")
.margin({ left: 10 })
.onClick(() => {
this.state = AnimationStatus.Paused
})
Button("stop")
.margin({ left: 10 })
.onClick(() => {
this.state = AnimationStatus.Stopped
})
}
.margin({ top: 10 })
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
view the effect:
except normal. Resource Resource play, also supported play PixelMap animation, the only difference is when setting the data.
imagePixelMap: Array<PixelMap> = []
@State images:Array<ImageFrameInfo> = []
async aboutToAppear() {
this.imagePixelMap.push(await this.getPixmapFromMedia($r('app.media.icon')))
this.images.push({src:this.imagePixelMap[0]})
}
private async getPixmapFromMedia(resource: Resource) {
let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
bundleName: resource.bundleName,
moduleName: resource.moduleName,
id: resource.id
})
let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
desiredPixelFormat: image.PixelMapFormat.RGBA_8888
})
await imageSource.release()
return createPixelMap
}
ImageAnimator common properties
| property | type | overview |
|---|---|---|
| images | Array | set picture frame information set. Dynamic updates are not supported. |
| state | AnimationStatus | control playback state |
| duration | number | set playback duration |
| reverse | boolean | Set playback direction |
| fixedSize | boolean | sets whether the image size is fixed to the component size |
| fillMode | FillMode | sets the state before and after the animation starts under the current playback direction |
| iterations | number | set the number of plays |
when setting the picture frame information set, dynamic update is not supported, which we need to know, and the most important point is that the performance is not as good as attribute animation, that is to say, it can be implemented with attribute animation, and try to use attribute animation.