Горшочек — вари. Gift анимация в Telegram.

С появлением NFT-подарков (gift) в Telegram у пользователей и разработчиков возникло множество вопросов, связанных с их интеграцией и отображением. Поскольку нововведение базируется на TON, многие аспекты требуют технического понимания и навыков работы с экосистемой мессенджера. В этой статье расскажу, как отображать анимацию NFT-подарков в ваших приложениях, а также поделюсь своим опытом работы с TON Blockchain Explorer, интегрированным в Telegram.

Как отображать анимацию NFT-подарков?

Для начала рассмотрим контракт, который содержит данные о NFT-подарке:

0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da

0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da

Из этого контракта можно получить всю необходимую информацию: атрибуты, описание и т.д. Эти данные можно запросить через API или вручную, нажав кнопку More в интерфейсе:

hexpot-10348.json

Там мы видим ссылочку с поясняющим ключом и именем:

			{
  "name": "Hex Pot #10348",
  "description": "An exclusive Hex Pot with the appearance Violet Veil on a English Violet background with Baphomet icons.",
  "image": "https://nft.fragment.com/gift/hexpot-10348.webp",
  "attributes": [
    {
      "trait_type": "Model",
      "value": "Violet Veil"
    },
    {
      "trait_type": "Backdrop",
      "value": "English Violet"
    },
    {
      "trait_type": "Symbol",
      "value": "Baphomet"
    }
  ],
  "lottie": "https://nft.fragment.com/gift/hexpot-10348.lottie.json"
}
		

Что именно мы из этого узнаём? Что анимация хранится в виде lottie. Эта информация очень полезна, так как с помощью нее мы сможем отображать и свою анимацию. Но как это сделать?

Как отобразить анимацию в вашем приложении?

Lottie — библиотека, разработанная компанией Airbnb. Позволяет отображать анимации в формате JSON, созданные с помощью AdobeAfter Effects. Благодаря Lottie разработчикам можно легко интегрировать высококачественные анимации в мобильные и веб-приложения, обеспечивая плавность и масштабируемость без значительного увеличения размера.

Применим на практике. Отобразить анимацию в вашем web. или TMA приложении проще простого, через библиотеку lottie-web.

В этом случае код будет выглядеть так:

			const animation = lottie.loadAnimation({
    container: document.getElementById('animation-container'),
    path: 'https://nft.fragment.com/gift/hexpot-10348.lottie.json' // URL JSON-файла
});
		

Под разные языки есть также библиотеки для работы с форматом. Однако, в некоторых случаях, людям приходят странные идеи конвертировать анимацию:

• через ffmpg в mp4 (больший размер);
• покадрово в gif (потеря качества и размера);
• через webview.

Моя задача состоит же в отправке анимации пользователю непосредственно в Telegram. Логично, что формат хранения в Lottie выбран не просто так. Довольно много NFT хранятся в mp4, gif, webm.

Разгадка кроется не только в компактном размере данного формата, но и в устройстве Telegram стикеров.

Для решения задачи используем следующую схему:

1. загружаем https://nft.fragment.com/gift/hexpot-10348.lottie.json;
2. сжимаем в gzip;
3. отправляем в Telegram, например, в виде документа.

На golang это может выглядеть так:

			package main

import (
    "bytes"
    "compress/gzip"
    "github.com/aaapi-net/hog"
    tele "gopkg.in/telebot.v3"
)

func getTgsAnimation(lottieUrl string) ([]byte, error) {
    data, err := hog.Get(lottieUrl).AsBytes()
    if err != nil {
        return nil, err
    }

    gz, err := compress(data)
    if err != nil {
        return nil, err
    }

    return gz, nil
}

func compress(data []byte) ([]byte, error) {
    var buf bytes.Buffer

    writer := gzip.NewWriter(&buf)
    _, err := writer.Write(data)
    if err != nil {
        return nil, err
    }

    if err := writer.Close(); err != nil {
        return nil, err
    }

    return buf.Bytes(), nil
}

func sendLottieAnimation(c tele.Context, lottieUrl string) error {
    tgsAnimation, err := getTgsAnimation(lottieUrl)
    if err != nil {
        panic(err)
    }

    file := tele.FromReader(bytes.NewReader(tgsAnimation))

    photo := &tele.Document{
        File:                 file,
        MIME:                 "application/x-tgsticker",
        FileName:             "hexpot-10348.tgs",
        DisableTypeDetection: true,
    }

    return c.Send(photo)
}
		

Как мы видим, это лишь немного сложнее, чем отправить обычную картинку.

Для разработчиков, использующих TON и интеграцию в Telegram, освоение работы с Lottie открывает новые возможности для создания интерактивных анимаций. Если вы только начинаете свой путь в этой сфере или уже имеете опыт, важно продолжать изучать документацию и экспериментировать с доступными инструментами, чтобы оставаться в тренде и предлагать пользователям лучшие решения.

P.s. Всегда готов ответить на ваши вопросы. Пишите в тг @apitonDev.