![begin{tikzpicture}deft{0}defr{3.1415}begin{axis}[width=12cm,height=7cm, ticks=none, xmin=-0.5, xmax=3.8, axis y line=left,axis x line=bottom, xlabel=$t$,ylabel=$x$, every axis x label/.style={at={(current axis.south east)},anchor=south},every axis y label/.style={at={(current axis.north west)},anchor=west},enlargelimits=true,mark size=1 ]addplot[smooth,blue,domain=t:r,samples=80] {1-cos(deg(x*3))};addplot[mark=*] coordinates {(t,0)};addplot[mark=*] coordinates {(r,2)};end{axis}end{tikzpicture}](https://www.pvsm.ru/images/2016/05/25/estestvennaya-animaciya-v-interfeisah. "Естественная анимация в интерфейсах - 1")
Рис. 0. КДПВ
Анимация в интерфейсе делает наглядным изменение его состояния. Например, при неудачной отправке длинная форма прокручивается к неправильно заполненному полю. Или увеличивающаяся по нажатию фотография раздвигает окружающие элементы.
Без анимации сложнее воспринимать резкие и внезапные изменения. Вместе с тем анимация должна быть короткой и ненавязчивой, чтобы не мешать пользователю.
Анимация кажется естественной, когда повторяет привычное движение предметов окружающего мира. Под катом я расскажу, как делал анимацию на основе физических законов. Смотрите готовый результат на демо-странице (там один блок следует за другим при движении мыши).
Читать полностью »
