Подробное введение в анимацию атрибутов HarmonyOS ArkUI
Предисловие
ОС Hongmeng в последнее время стала очень популярной, поэтому, пожалуйста, разверните ее как можно скорее. В процессе обучения я обнаружил, что многие люди жаловались на то, что официальная глава анимации атрибутов была довольно поверхностной. Я не мог понять ее даже после первого прочтения, поэтому я придумал эту статью, чтобы дополнить свое собственное понимание, основываясь на официальное введение.
Что такое анимация свойств?
Давайте использовать официальные слова,
Атрибутная анимация — это самая простая анимация, обладающая мощными функциями, множеством сценариев использования и широким спектром приложений. Обычно используется в следующих сценариях:
1. Изменится макет страницы. Например, добавить или удалить какие-то элементы-компоненты.
2. Изменяется видимость и положение элементов страницы. Например, показать или скрыть некоторые элементы или переместить некоторые элементы с одного конца на другой.
3. Заставьте перемещаться графические и графические элементы на странице. Например, сделайте анимацией статические картинки на странице.
Проще говоря, анимация свойств — это эффект градиента свойств, который возникает при изменении общих свойств компонента. Как показано на рисунке ниже, принцип заключается в том, что при изменении общих свойств компонента в процессе постепенного изменения состояния компонента от начального состояния к конечному состоянию будет создаваться несколько непрерывных промежуточных состояний. , будут сформированы свойства Эффект градиента, приводящий к анимации.
Использование анимации атрибутов также очень просто: вам нужно только добавить атрибуты анимации к компонентам (включая базовые компоненты и компоненты-контейнеры) и установить параметры, как показано в следующем коде:
Image($r('app.media.image1'))
.animation({
duration: 1000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: 1
})
Не волнуйтесь, когда вы вставите приведенный выше код, вы обнаружите, что приведенный выше пример кода не имеет анимации.Это потому, что
1. Область действия атрибутов анимации. Анимация сама по себе также является свойством компонента, и ее область действия находится до анимации. То есть атрибуты, генерирующие анимацию атрибутов, должны быть объявлены до анимации, а атрибуты, объявленные позднее, не будут создавать анимацию атрибутов. Если взять в качестве примера пять анимаций значков в примере, атрибут, который мы ожидаем сгенерировать анимацию, — это атрибут ширины компонента Image, поэтому атрибут ширины необходимо объявить перед атрибутом анимации. Если атрибут ширины объявлен после анимации, никакого эффекта анимации не будет.
2. Обновление статуса пользовательского интерфейса должно запускаться при изменении атрибутов анимации атрибутов. В приведенном выше примере анимация отсутствует, поскольку нет свойства для анимации.
3. Сами атрибуты, генерирующие анимацию атрибутов, должны отвечать определенным требованиям. Не все атрибуты могут создавать анимацию атрибутов. В настоящее время поддерживаются такие атрибуты, как ширина, высота, положение, непрозрачность, фоновый цвет, масштаб, поворот, перевод и т. д.
Давайте кратко подведем итог сами
Анимация свойства = свойство + анимация (область свойства) Анимация свойства = свойство + анимация (область свойства)Анимация свойств"="Атрибуты+анимация ( область свойства ) _
В настоящее время для этого атрибута поддерживаются ширина, высота, положение, непрозрачность, фоновый цвет, масштаб, поворот, перевод и т. д.
Объяснение параметра
| Имя свойства | Тип недвижимости | По умолчанию | описывать |
|---|---|---|---|
| продолжительность | число | 1000 | Длительность анимации в миллисекундах. Длительность по умолчанию — 1000 миллисекунд. |
| темп | число | 1.0 | Скорость воспроизведения анимации. Чем больше значение, тем быстрее будет воспроизводиться анимация. Чем меньше значение, тем медленнее будет воспроизводиться анимация. Если оно равно 0, анимационный эффект не будет. |
| изгиб | Изгиб | Кривая.Линейная | Кривая изменения анимации, кривая по умолчанию линейная. |
| задерживать | число | 0 | Время задержки воспроизведения, единица измерения — миллисекунды, по умолчанию задержка воспроизведения отсутствует. |
| итерации | число | 1 | Количество воспроизведений, по умолчанию — один раз, если установлено значение -1, это означает неограниченное воспроизведение. |
| игровой режим | Игровой режим | PlayMode.Normal | Установите режим воспроизведения анимации. По умолчанию она будет перезапущена после завершения воспроизведения. |
| onFinish | функция | - | Эта функция вызывается обратно, когда анимация заканчивается. |
Значение перечисления кривой кривой изменения:
| имя | описывать |
|---|---|
| Линейный | Указывает, что скорость анимации одинакова от начала до конца. |
| Простота | Указывает, что анимация начинается с низкой скоростью, затем ускоряется и замедляется перед завершением, CubicBezier(0,25, 0,1, 0,25, 1,0). |
| Легкость входа | Указывает, что анимация начинается на низкой скорости, CubicBezier(0.42, 0.0, 1.0, 1.0). |
| EaseOut | Указывает, что анимация заканчивается на низкой скорости, CubicBezier(0.0, 0.0, 0.58, 1.0). |
| EaseInOut | Указывает, что анимация начинается и заканчивается на низкой скорости, CubicBezier(0,42, 0,0, 0,58, 1,0). |
| FastOutSlowIn | Стандартная кривая, кубическая кривая Безье (0,4, 0,0, 0,2, 1,0). |
| ЛинейныйВыходМедленныйВход | Кривая замедления, кубическая Безье(0,0, 0,0, 0,2, 1,0). |
| ФастАутЛинеарВход | Кривая ускорения, кубическая Безье (0,4, 0,0, 1,0, 1,0). |
| Экстремальное замедление | Медленная кривая, кубическая Безье (0,0, 0,0, 0,0, 1,0). |
| Острый | Резкая кривая, кубическая Безье (0,33, 0,0, 0,67, 1,0). |
| Ритм | Кривая ритма, кубическая-безье(0,7, 0,0, 0,2, 1,0). |
| Гладкий | Плавная кривая, кубическая Безье(0,4, 0,0, 0,4, 1,0). |
| Трение | Кривая демпфирования, CubicBezier(0,2, 0,0, 0,2, 1,0). |
Человеческое объяснение: то же время, тот же результат, другой процесс
Значение перечисления playMode для режима воспроизведения:
| имя | описывать |
|---|---|
| Нормальный | Анимация воспроизводится как обычно. |
| Обеспечить регресс | Анимация воспроизводится наоборот. |
| Альтернативный | Анимация воспроизводится вперед с нечетными числами (1, 3, 5...) и назад с четными числами (2, 4, 6...). |
| АльтернативныйРеверс | Анимация воспроизводится в обратном направлении в нечетные моменты времени (1, 3, 5...) и в прямом направлении в четные моменты времени (2, 4, 6...). |
Обратите внимание, что функция обратного вызова onFinish связана с итерациями параметров. Когда воспроизведение итераций параметров закончится, будет вызвана функция onFinish для последующей бизнес-обработки. Если для итераций установлено значение -1, что означает неограниченное воспроизведение, функция обратного вызова onFinish не будет вызываться.
например
Анимация вращения
@State rotateAngle : number = 0
...
Text("旋转动画")
Row(){
Button("旋转动画开始",{
type: ButtonType.Capsule,stateEffect:true})
.onClick(()=>{
this.rotateAngle =360
})
Image($r('app.media.loading'))
.width(100)
.height(100)
.rotate({
x: 0, y: 0, z: 1, angle: this.rotateAngle })
.animation({
duration: 2000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1
})
}
.height("30%")
.width("100%")
.backgroundColor(Color.Green)
Как видно из приведенного выше примера, добавляются область вращения вращения и область анимации, а начало анимации контролируется путем изменения состояния RotateAngle. Эффект следующий.
Анимация смещения
@State xState : number = 0
@State yState : number = 0
...
Text("位移动画")
Row(){
Text('HarmonyOS')
.width(200)
.height(100)
.fontColor(Color.Blue)
.fontSize(30)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
.margin(100)
.position({
x: this.xState,y:this.yState})
.animation({
duration: 1000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: 1,
onFinish:()=>{
if ( this.xState == 0) {
this.xState =100
this.yState =100
}else {
this.xState =0
this.yState =0
}
}
})
}
.height("30%")
.width("100%")
.backgroundColor(Color.Yellow)
В приведенном выше примере мы видим, что анимация смещения реализуется путем установки положения и анимации, а xState и yState сбрасываются в обратном вызове onFinish, когда он достигает указанного пути, для достижения альтернативного постоянного эффекта анимации. Эффект от операции следующий.
Комбинированная анимация
Дело не в том, что вы можете добавлять только один атрибут за раз, вы также можете добавить несколько атрибутов одновременно.
@State watermelonRotateAngle : number = 0
@State width : number = 50
@State height : number = 50
...
Text("组合动画")
Row(){
Button("组合动画开始",{
type: ButtonType.Capsule,stateEffect:true})
.onClick(()=>{
this.watermelonRotateAngle =360
this.width = 100
this.height = 100
})
Image($r('app.media.watermelon'))
.width(this.width)
.height(this.height)
.rotate({
x: 0, y: 0, z: 1, angle: this.watermelonRotateAngle })
.animation({
duration: 2000,
tempo: 1.0,
delay: 0,
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1
})
}
.height("40%")
.width("100%")
.backgroundColor(Color.Orange)
Выше у нас есть три анимации атрибутов, а именно ширина, высота и поворот. Эффект следующий.
Подведем итог
Ссылка: HarmonyOS Урок 1.
Учебное пособие стало намного богаче и систематичнее, чем раньше. Таким образом, блоггеры будут публиковать только одну статью в месте, которое является более общим, чем официальное текущее руководство, или которое, по их мнению, более непонятно. Они не будут изучать и обновлять ее, как Compose. Если вас интересует Compose, вы можете ознакомиться с моим подробным введением в Jetpack Compose (обновляется в режиме реального времени).
Давайте пожалуемся: официальный документ по анимации атрибутов документа действительно поверхностный, создавая у людей ощущение, что я вам все рассказал, но вы не понимаете и это ваше дело (конечно, может быть я плохой человек)