Оптимизация перетаскивания кадров в подвижном представлении на стороне апплета для Android.

Предыстория: используется в последних проектахmovable-viewДавайте сделаем функцию сортировки перетаскиванием.После завершения функции я тестирую ее на реальной машине.Обнаружено, что анимация перетаскивания имеет серьезное падение кадров на стороне Android. Проверьте Google и обнаружите, что есть такие же друзья, у которых похожие проблемы:Как решить проблему, из-за которой Android слишком зависает при перемещении и перетаскивании изображений апплета

Причины выпадения кадров

Например, на странице есть 2 элемента A и B. Пользователь делает жест touchmove на A и просит B проследить за движением.movable-viewявляется типичным примером. Процесс ответа на событие touchmove:

А. Событие touchmove выбрасывается из уровня представления (Webview) на уровень логики (служба приложений).

б. Логический уровень (служба приложений) обрабатывает событие touchmove, а затем изменяет позицию B через setData.

однаждыtouchmoveОтвет должен пройти2 связь между логическим уровнем и уровнем рендеринга и один рендеринг, время связи относительно велико. такжеsetDataРендеринг также блокирует выполнение других скриптов., что приводит к задержке процесса анимации всего взаимодействия с пользователем.

По вышеуказанным причинам был запущен апплет WeChat.WXS(WX Script), его роль состоит в том, чтобы позволить логическому коду работать на уровне представления (Webview) и достичь цели оптимизации за счет сокращения количества передач данных между уровнем представления и логическим уровнем. Конкретная ссылка:WXSа такжеWXS реагирует на события

Практики оптимизации с использованием WXS в Taro

Предыстория: поскольку в настоящее время в Taro нет поддержки WXS (taro#2959), поэтому я не могу написать код WXS непосредственно в проекте и позволить Таро скомпилировать его в WXML для меня. Так что это должно быть реализовано с некоторыми хитростями, и я надеюсь, что Taro сможет поддерживать WXS в будущем.

Если вы используете собственную разработку апплета, вы можете обратиться напрямуюWXSа такжеWXS реагирует на событияЧтобы добиться, если это другие фреймворки, вы можете обратиться к этой статье для практики.

код перед оптимизацией

пройти до оптимизацииsetStateобновлять динамическиx,yзначения координат, чтобы использоватьmovable-viewдля достижения эффекта перетаскивания.

оптимизировать

Сначала нужно удалитьmovable-viewкомпонент, потому что его нельзя использоватьmovable-viewа такжеWXSуменьшить количество путей, по которым передаются данные, а во-вторыхmovable-viewэто анимация, сделанная с помощью CSS, мы можем использоватьposition:absoluteвместо этого вWXSСредние динамические настройкиtop&leftзначение, достижениеmovable-viewЭффект.

Во-вторых, в соответствующем компоненте (используяWXSкаталог компонентов или страниц) для созданияmove.wxsФайл сценария, используемый для динамической установки узлов, которые необходимо анимировать.top&leftКоординатное значение.

Если вы обнаружите, что во время компиляции нет скомпилированного каталога компонентовmove.wxsфайл, вы можете обратиться кcopyнастроить. источникtaro#2959

Наконец, в соответствующемJSXимпортировать подmove.wxsи сtouchmoveПривязка событий.

Проблемы с использованием Таро

На момент редактирования автором этой статьи ТароWXSХорошей поддержки нет, и можно только сказать, что она едва достигает цели оптимизации частоты кадров с помощью WXS. Тем не менее, Taro также готов поддержать его, обратите внимание.taro#2959. Автор продолжит следитьTaroправильноWXSподдерживать прогресс.

в моем использованииWXSКогда вам нужно использоватьcallMethodсцена (ссылка:WXS реагирует на события), звонитьTaroСогласно официальному руководству, метод, определенный в компоненте класса, нельзя использовать напрямую. Его нужно использовать очень уродливым образом, как показано ниже. В настоящее время конкретная причина неизвестна. Предполагается, чтоTaroМетоды, не привязанные к событиям, компилируются по-другому.

онлайн демо

После вышеуказанной оптимизации вAndroidПлавность анимации перетаскивания на модели будет значительно улучшена. Вы можете отсканировать код апплета ниже, чтобы испытать его, процесс выглядит следующим образом:

Отсканируйте код апплета, чтобы войти в апплет
апплет входа в систему
На странице «Личная библиотека» отсканируйте штрих-код на обратной стороне книги, чтобы добавить несколько книг.
Перетащите после долгого нажатия на книгу