Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 11.02.2017, 16:58
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

На самом деле это грязный хак поскольку по умолчанию у всех элементов если не указано это свойство то параметр имеет значение none. Если казано только значение трансформации осей X и Y - браузер выставляет значение в transform 2D матрицу, но как только указано значение Z то матрица сразу приобретает вид 3D трансформации.

Чтобы написать как можно короче и эффективнее мне не осталось ничего другого кроме как вручную устанавливать параметры матрицы автоматически в 3D режим путем перепарса Computed Style и перегруппировки.

Вот кусок оригинального кода:

// get matrix and set a default value if not present
						var matrixStart = (window.getComputedStyle(e[x], null)[prop] === 'none') ? 'matrix(1, 0, 0, 1, 0, 0)' : window.getComputedStyle(e[x], null)[prop];
						
						var M2D = $.arguments(this.getValFromPropsBrackets('matrix',matrixStart)[1], ',');

						// set matrix from 2D to 3D
						if( M2D.length <= 6) {
							var matrix3D = 'matrix3d('+ M2D[0] +', '+ M2D[1] +', 0, 0, '+ M2D[2] +', '+ M2D[3] +', 0, 0, 0, 0, 1, 0,'+ M2D[4] +','+ M2D[5] +', 0, 1)'
						} 
						else {
							var matrix3D = window.getComputedStyle(e[x], null)['transform'];
						}
												
						// extract matrix values
						var M3D = $.arguments(this.getValFromPropsBrackets('matrix3d',matrix3D)[1], ',');

						//console.log(M3D);
						/*
						matrix3d pattern
						   1, 0, 0, 0,    1 scalex 6 scaley 11 scalez
						   0, 1, 0, 0,    5 skewX  2 skewY
						   0, 0, 1, 0,    10 rotateX 9 rotateY 1 rotateZ  
						   tx, ty , tz, 1 13 translateX 14 translateY 15 translateZ
						   				  12 - perspective
						*/


В результате затрагиваемый элемент дом сразу же снабжается переупакованной матрицей 4x4 из 16ти значений. Я кстати задействовал не все параметры, которые мог и можно было достичь интересных эффектов типа блика солнечных лучей на камере если затрагивать перспективу, но это уж недокументированная фича.

Собственно. 1). считываем текущую конфигурацию матрицы. Если none, то прописывает дефолтные параметры трансформации не затрагивая и не искажая ничего 2). переупаковываем 2D матрицу в 3D матрицу с учетом 2D трансформации. 3). запускаем анимацию с параметрами полученными при "оригинальной" прописи свойства transform как по стандарту CSS, дробим все это на сегменты и запускаем анимацию каждого вектора отдельным контекстом через RAF.

В результате получаем обрисованный по матрице 3D элемент по всем трем осям если эти значения отличны от 0.

Например:

$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );


Меняем ширину с bounce, трансформируем перспективу и вращаем по всем трем осям за 900 миллисекунд используя тот же эффект bounce. Все элементарно просто на выходе.

Сейчас у меня код маленько с запашком, но я на первых порах работал в основном над самими механизмами и не внедрял никаких паттернов кроме SOLID и Module на Single Namespase. В будущем это будет переработано, но как я пока не могу придумать.

Присоединяйтесь. Код выложен на GitHub, вся документация по API на английском. Связки в ядре элементарные специально чтобы было как можно проще и быстрее влиться в разработку.
Ответить с цитированием
  #42 (permalink)  
Старый 04.10.2017, 12:23
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

1.7.2

- Обнаружился баг связанный со скоростью иниуиализации Android browser: метод самоинициализации позаимствован у jQuery.

- Добавлен $.fireEvent для симуляции таких событий как click и submit и так далее.

- Частично переписано на ES6. Со временем полностью избавлюсь от Legacy кода(бабулю не предлагать - лишний мартышкин труд).

- Исправно работает на трех проектах, один из которых - калькулятор стоимости пластиковых окон и конструкций ПВХ. Будут еще проекты где можно использовать - будут новые фичи. Принимаю заявки на нужные вам модули.
Ответить с цитированием
  #43 (permalink)  
Старый 17.02.2018, 20:18
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Evolution сдохла потому что полноценный фреймворк писать некогда да и я сам в другой области деятельности сейчас обитаю, однако, переназвал проект RevolveR и позиционирую как front-end микро библиотеку.

Сохранено API и совместимость в принципе есть с legacy evo.

Код переписан на ES6 / ES7 почти полностью. Интерфейс теперь реализован на классах и можно юзать любой префикс namespace на ваш выбор. Тоесть теперь совместимо с $ зависимыми либами.

Многое оптимизировал и переработал.

Babel не смог мой код скомпилировать да и нет смысла компилировать из 7 в 6 - все равно ждать пока трахнутый MS подтянет свои ишаки - эджаки.

Разрабатываться будет медленно. Некогда. Есть пожелания или сообщения о багах - пишите в трекер.

https://github.com/xShiftx/revolver

Планирую дорабатывать дальше.

p.s.: Аякса больше нет. Теперь работает на движке Fetch.
p.s.s: если кто захочет поразрабатывать - плиз не используйте новые циклы - это ущерб производительности и я против промисов.
Ответить с цитированием
  #44 (permalink)  
Старый 01.03.2018, 23:37
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Нашел время проверить как все работает в Edge. Оказывается работает все что нужно. Теперь даже babel не нужен так как ни один нормальный пользователь не использует IE. Это хорошо.

Добавлен индикатор прокрутки страницы, легаси код почти отсутствует + немного оптимизированы методы для работы с предварительной обработкой CSS стилей перед анимацией.

Всего 42кб основной движок и можно делать достаточно симпатичные SPA сайты как например arch66.pro
Ответить с цитированием
  #45 (permalink)  
Старый 02.03.2018, 21:24
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

1.0.6 : + DOM методы wrap, unwrap, replace

в планах методы для отработки элементов форм типа валидатора интегрированного с bootstrap и стилями, а также автоматический коструктор data объекта для отправки через fetch. Пока думаю как сделать.
Ответить с цитированием
  #46 (permalink)  
Старый 12.07.2018, 09:13
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Я убил Хромиум своим каким-то await eval. В ожидании дьявола поперхнулась Opera, Yandex, Chrome, Chromium и все остальные браузеры, которые на движке Chromium.

Ошибку обещают исправить к 19 Июля, когда будет глобальное обновление. Это значит, что те кто перекрашивал иконку и не разрабатывал барузер обновят еще немного позже.

Стабильно работает в Safari, Edge и FireFox.

Ждите, кто использовал и не понял почему зависло.


Ссылки: https://bugs.chromium.org/p/chromium...tail?id=855181

Сноска: Bulk update: M68 stable cut is scheduled for July 19th. This issue is marked as RB-Stable, so please take a look at it before. Thanks!
Ответить с цитированием
  #47 (permalink)  
Старый 23.07.2018, 18:25
Новичок на форуме
Отправить личное сообщение для AntiShift Посмотреть профиль Найти все сообщения от AntiShift
 
Регистрация: 23.07.2018
Сообщений: 1

А у вас проц. какой?
Ответить с цитированием
  #48 (permalink)  
Старый 01.11.2018, 09:31
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Я на i3 U серии тестил. Там в хроме завис bounce(код заимствовал на этом сайте для коллекции easings) - исправлено уже месяца как 3 или 4.

v.1.1.2 : исправлены ошибки при работе на субдоменах. добавлен $.cookie модуль. Теперь работает на андроидах последних обновленных версий браузера. Все перешло на Chrome.
Ответить с цитированием
  #49 (permalink)  
Старый 02.11.2018, 18:38
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

Если я хочу contenteditable div, то это не будет работать...
let formInputs = this.querySelectorAll("input[type='text']...


Если я хочу custom markup...
i.outerHTML = '<div class="revolver__form-hidden-input">'+ i.outerHTML +'</div>';


...
Но, плюсик поставлю за упорство )

...
Интересно мнение по поводу https://github.com/jorgebucaran/hyperapp
Ответить с цитированием
  #50 (permalink)  
Старый 05.11.2018, 12:59
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

SuperZen,

1. ну можно и это прицепить. идей почти не подают поэтому че самому надо, то и реализую.

2. оно у меня было в основном под RevolveR CMS(https://dev.to/xshiftx/writing-revol...t-for-fun-5efo) запилено, можно и кастомную разметку. Накиньте пример API как бы вам было удобно.

3. TS не люблю.

Я вот думаю, стоит ли переписывать на jQuery like(http://cyberx.pro/querySelectorAll-r...hout-jQuery/)?

p.s.: 1.2.2.1 : исправлена работа с hash в url строке(UNIT TEST: https://xshiftx.github.io/RevolveR/#UNIT-TEST :: для тестирования fetch разверните на localhost c PHP так как git не умеет выполнять пыхапэ).

https://github.com/xShiftx/RevolveR

Последний раз редактировалось xShift, 05.11.2018 в 13:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно загрузить через framework Mateus jQuery 5 11.01.2013 20:08