Я оживляющий CALayer
вдоль CGPath
(QuadCurve) довольно хорошо в IOS. Но я бы хотел использовать более интересную функцию плавности, чем те, которые предоставляет Apple (EaseIn / EaseOut и т. Д.). Например, отскок или упругая функция.
С помощью MediaTimingFunction (безье) можно делать следующее:
Но я бы хотел создать более сложные временные функции . Проблема в том, что для синхронизации мультимедиа, похоже, требуется кубическая Безье, которая недостаточно мощна для создания этих эффектов:
(источник: sparrow-framework.org )
Код , чтобы создать рассмотренном выше , является достаточно простым в других рамках, что делает это очень расстраивает. Обратите внимание, что кривые отображают время входа и время выхода (кривая Tt), а не кривые время-положение. Например, easyOutBounce (T) = t возвращает новый t . Затем этот t используется для построения движения (или любого другого свойства, которое мы должны анимировать).
Итак, я хотел бы создать сложный заказ, CAMediaTimingFunction
но понятия не имею, как это сделать, и возможно ли это вообще? Есть ли альтернативы?
РЕДАКТИРОВАТЬ:
Вот конкретный пример по шагам. Очень познавательно :)
Я хочу анимировать объект вдоль линии от точки a до b , но я хочу, чтобы он «подпрыгивал» своим движением вдоль линии, используя приведенную выше кривую easyOutBounce. Это означает, что он будет следовать точной линии от a до b , но будет ускоряться и замедляться более сложным образом, чем это возможно при использовании текущей функции CAMediaTimingFunction на основе Безье.
Давайте сделаем эту линию любым произвольным движением кривой, указанным с помощью CGPath. Он все еще должен двигаться по этой кривой, но он должен ускоряться и замедляться так же, как в примере с прямой.
Теоретически я думаю, что это должно работать так:
Давайте опишем кривую движения как движение анимации по ключевым кадрам (t) = p , где t - время [0..1], p - положение, вычисленное в момент времени t . Таким образом, move (0) возвращает позицию в начале кривой, перемещает (0,5) в точную середину и перемещает (1) в конце. Использование временной функции time (T) = t для предоставления значений t для move должно дать мне то, что я хочу. Для эффекта подпрыгивания функция синхронизации должна возвращать те же значения t для времени (0,8) и времени (0,8).(просто пример). Просто замените функцию синхронизации, чтобы получить другой эффект.
(Да, можно выполнять подпрыгивание линии, создавая и объединяя четыре линейных сегмента, которые движутся вперед и назад, но в этом нет необходимости. В конце концов, это просто простая линейная функция, которая сопоставляет значения времени с позициями.)
Надеюсь, я здесь понимаю.
источник
Ответы:
Я нашел это:
Какао с любовью - Параметрические кривые ускорения в Core Animation
Но я думаю, что это можно сделать немного проще и читабельнее, используя блоки. Итак, мы можем определить категорию в CAKeyframeAnimation, которая будет выглядеть примерно так:
CAKeyframeAnimation + Parametric.h:
CAKeyframeAnimation + Parametric.m:
Теперь использование будет выглядеть примерно так:
Я знаю, что это может быть не так просто, как вы хотели, но это только начало.
источник
В iOS 10 стало проще создавать пользовательские функции синхронизации с помощью двух новых объектов синхронизации.
1) UICubicTimingParameters позволяет определить кубическую кривую Безье как функцию ослабления.
или просто используя контрольные точки при инициализации аниматора
Этот замечательный сервис поможет выбрать контрольные точки для ваших кривых.
2) UISpringTimingParameters позволяет разработчикам управлять коэффициентом демпфирования , массой , жесткостью и начальной скоростью для создания желаемого поведения пружины.
Параметр Duration по-прежнему отображается в Animator, но будет проигнорирован для весеннего времени.
Если этих двух вариантов недостаточно, вы также можете реализовать свою собственную временную кривую, подтвердив протокол UITimingCurveProvider .
Более подробно, как создавать анимацию с разными временными параметрами, вы можете найти в документации .
Также, пожалуйста, посмотрите презентацию Advances in UIKit Animations and Transitions с WWDC 2016.
источник
CoreAnimation
версияUISpringTimingParameters
(CASpringAnimation
) поддерживается до iOS 9!UITimingCurveProvider
не только представлять кубическую или пружинную анимацию, но также представлять анимацию, которая сочетает в себе кубический и пружинный переходыUITimingCurveType.composed
.Способ создания настраиваемой функции синхронизации - использование фабричного метода functionWithControlPoints :::: в CAMediaTimingFunction (также имеется соответствующий метод initWithControlPoints :::: init). Это создает кривую Безье для вашей временной функции. Это не произвольная кривая, но кривые Безье очень мощные и гибкие. Чтобы разобраться в контрольных точках, потребуется немного практики. Совет: большинство программ для рисования могут создавать кривые Безье. Играя с ними, вы получите визуальную обратную связь с кривой, которую вы представляете с контрольными точками.
Эта ссылка указывает на документацию Apple. Есть небольшой, но полезный раздел о том, как функции предварительной сборки строятся из кривых.
Изменить: следующий код показывает простую анимацию отскока. Для этого я создал составную функцию времени ( значения и свойства NSArray времени ) и дал каждому сегменту анимации различную продолжительность времени ( свойство keytimes ). Таким образом, вы можете составлять кривые Безье, чтобы создать более сложную синхронизацию для анимации. Это хорошая статья об этом типе анимации с хорошим примером кода.
источник
Не уверен, что вы все еще ищете, но PRTween выглядит довольно впечатляюще с точки зрения его способности выходить за рамки того, что Core Animation дает вам из коробки, в первую очередь, настраиваемых функций времени. Он также поставляется со многими - если не всеми - популярными кривыми плавности, которые предоставляют различные веб-фреймворки.
источник
Быстрая реализация версии - TFAnimation . Демонстрация представляет собой анимацию кривой греха . Используйте
TFBasicAnimation
точно так же,CABasicAnimation
за исключением назначенияtimeFunction
с блоком, отличным отtimingFunction
.Ключевым моментом является создание подкласса
CAKeyframeAnimation
и вычисление положения кадров по интервалуtimeFunction
в1 / 60fps
s. В конце концов, добавьте все вычисленное значение вvalues
ofCAKeyframeAnimation
и времена по интервалуkeyTimes
также.источник
Я создал подход, основанный на блоках, который генерирует группу анимаций с несколькими анимациями.
Каждая анимация для каждого свойства может использовать 1 из 33 различных параметрических кривых, функцию времени затухания с начальной скоростью или настраиваемую пружину, настроенную в соответствии с вашими потребностями.
После того, как группа сгенерирована, она кэшируется в представлении и может быть запущена с помощью AnimationKey, с анимацией или без нее. После запуска анимация синхронизируется в соответствии со значениями уровня представления и применяется соответствующим образом.
Фреймворк можно найти здесь FlightAnimator
Вот пример ниже:
Для запуска анимации
источник