Loading...

Ваша корзина пуста.

 
 
 
×

Registration

Profile Informations

Login Datas

or login

First name is required!
Last name is required!
First name is not valid!
Last name is not valid!
This is not an email address!
Email address is required!
This email is already registered!
Password is required!
Enter a valid password!
Please enter 6 or more characters!
Please enter 16 or less characters!
Passwords are not same!
Terms and Conditions are required!
Email or Password is wrong!
Captcha is required!
Captcha is wrong!

Продвинутое приложение Nextion 1: использование таймера, переменных и оператора для GIF анимации

Теперь мы научимся делать GIF анимацию с использованием нескольких элементов одновременно. Конечно же, мы будем использовать таймер, переменные и, дополнительно, нам понадобится конструкция.

Цель – сделать 2 мультяшные фигурки с зацикленной анимацией и регулировать их скорость при помощи ползунков. Ещё понадобятся две кнопки для включения и выключения.


Давайте начинать.

Шаг 1. Создайте.HMI файл

Создайте .HMI файл, укажите разрешение 320*240 и альбомное расположение экрана.
Импортируйте 17 изображений в библиотеку изображений: 3 для первой фигуры (бегущей) и 10 для второй (играющей в футбол), 1 – фон слайдера и 1 – ползунок слайдера.
Сгенерируйте подходящий шрифт и добавьте в шрифты проекта.
 

Шаг 2. Добавьте элементы Picture

Добавьте 2 элемента Picture в окно дисплея. Выберите 2 изображение в качестве их фонов.
Параметры такие:

Шаг 3. Добавьте кнопки

Добавьте две кнопки и расположите их под фигурками. Назовите одну из них кнопкой START, а другую STOP. Скриншоты настроек:

Чтобы кнопки действительно запускали и останавливали анимацию, добавьте пользовательский код. Для кнопки b0 он будет:


tm0.en=1
tm1.en=1

А для кнопки b1:


tm0.en=0
tm1.en=0

Шаг 4. Добавьте ползунки

Добавьте два ползунка по сторонам от картинок. Укажите для них изображения фона и курсора. Укажите начальное положение а также минимальное и максимальное значение как показано ниже.

Шаг 5. Добавьте текстовые поля

Теперь нам надо добавить 4 текстовых поля чтобы обозначить куда перемещать ползунки для ускорения и замедления анимации. Добавьте 4 поля: по одному около конца каждого ползунка. Пусть там будут надписи ACCEL и DECEL. Их настройки:

Укажем коды для ползунков: для h0:

tm0.tim=h0.val

И для h1:

tm1.tim=h1.val

Шаг 6. Добавьте таймер и переменные

Наконец-то мы дошли до двух самых интересных и важных элементов: таймеры и переменные.
Добавим два таймера и две переменные, которые отобразятся не как обычно в окне дисплея, а под ним. Настройки:

Чтобы получить эффект движения, надо написать код, который будет менять картинки по кругу. Для tm0 этот код будет таким:


p0.pic=va0.val
va0.val=va0.val+1
if(va0.val>2) //Pay attention to the format, there must be brace before and behind it, and  the brace must take up ONE line
{
va0.val=0
}

А для tm1:


p1.pic=va2.val
va2.val=va2.val+1
if(va2.val>15)//Pay attention to the format, there must be brace before and  behind it, and the brace must take up ONE line
{
va2.val=3
}

Это всё что нужно было сделать для GIF анимации. Настало время посмотреть что получилось. Нажмите Compile и Debug. Появится окошко. Вы можете нажимать кнопки START и STOP для запуска и остановки анимации. А при помощи ползунков можно регулировать её скорость. HMI файл проекта можно скачать​ здесь.


Работа программы показана на видео.