Создание анимации в сети в js, Tween, Spring, взаимодействие с пользователем, прерывание и смешивание всего этого в карусели - PullRequest
Новая
       34

Создание анимации в сети в js, Tween, Spring, взаимодействие с пользователем, прерывание и смешивание всего этого в карусели

1 голос
/ 01 июля 2019

Назад история.

Я веб-разработчик и могу делать все, что угодно в Интернете. Когда я впервые начал заниматься программированием, это было во flash-сценарии 3, мне было 14, а теперь мне 29, и я до сих пор не понял этого. Я решил, что наконец-то доберусь до сути.

Цели.

Чтобы сделать проблему ощутимой.

Реализовать карусель, которую можно сильно ударить, выполнить автозапуск, перейти с помощью кнопки «назад» и «вперед», любая из этих анимаций должна быть прерываемой и иметь связанную с ней скорость, кроме отслеживания мыши / пальца. Я хочу, чтобы это казалось естественным, я хочу, чтобы движущиеся элементы чувствовали, что они имеют вес, и они скользят на свои места. Они должны чувствовать себя настоящими, как будто их можно потрогать. Анимация должна быть аддитивной, так как я меняю направление и взаимодействую с ней, она должна быть похожа на то, какой человек ожидает от нее. Как будто они скользят по пластику по гладкой поверхности. Когда оно будет завершено, оно должно встать на место.

Теперь я знаю, что стек за потоком, это все о том, чтобы показать вашу работу Я сделал так много раз, и все сводится к беспорядку. Так что перемирие, пожалуйста, дайте комментарии и указания, и я обновлю вопрос с текущим прогрессом и контрольно-пропускными пунктами. Я сделаю, а затем буду держать его в курсе.

Моя отправная точка

https://codesandbox.io/s/strange-darkness-3hmub

Concepts.

Итак, вот вещи, о которых я думаю, мне нужно подумать. Я считаю, что на самом деле нужно учитывать два типа анимации.

Tweens и Spring или анимация со скоростью (я не знаю, что я делаю). 

interface {
   type:"tween"|"velocity";
   velocity:number; //unit per/second??? pixel
   duration?:number;
   from:number;
   to:number;
   start_time:number;
   easing:(progress:number)=>number
}

Процесс мышления.

Я думаю, мне нужна анимация, чтобы складывать. Поэтому мне нужно знать, когда началась анимация и какой она. Мне нужно знать, должна ли новая анимация полностью удалить все предыдущие или она должна складываться поверх нее.

Например, у меня могут быть стопки всевозможных анимаций, но если использование касается их, тогда их нужно удалить.

Я думаю, мне нужно время начала, чтобы делать такие вещи, как ослабление функций. Я хочу, чтобы он имел вес и чувствовал, что он обладает инерцией.

войска. Возможно, вы не сможете ответить, но предложите мозговой штурм. Я хочу уложить это в постель!

Я предан !! Внесите свой вклад, как вы можете, и я сделаю работу !!!

...