Core анимации в Xamarin.iOSCore Animation in Xamarin.iOS

В данной статье рассматриваются framework Core Animation, показывающий, как она позволяет использовать высокий уровень производительности, плавности анимации в UIKit, а также как использовать его напрямую для элемента управления анимации более низкого уровня.This article examines the Core Animation framework, showing how it enables high performance, fluid animations in UIKit, as well as how to use it directly for lower-level animation control.

включает в себя iOS Core Animation для обеспечения поддержки анимации для представлений в приложении.iOS includes Core Animation to provide animation support for views in your application. Все Сверхвысокий smooth анимации в iOS, таких как прокрутка таблиц и проведение пальцем по экрану, между различными представлениями выполнить также, как они основаны на базовой анимации, внутренним образом.All of the ultra-smooth animations in iOS such as scrolling of tables and swiping between different views perform as well as they do because they rely on Core Animation internally.

На платформах, Core Animation и двухмерной графики могут работать совместно для создания привлекательных, анимировано двумерной графики.The Core Animation and Core Graphics frameworks can work together to create beautiful, animated 2D graphics. На самом деле базовой анимации можно даже преобразовать двумерная графика в трехмерном пространстве, создание потрясающие, возможности взаимодействия.In fact Core Animation can even transform 2D graphics in 3D space, creating amazing, cinematic experiences. Тем не менее чтобы создать true трехмерной графики, потребовалось бы использовать что-то, как OpenGL ES, или очереди игры на такой API, как MonoGame, несмотря на то, что 3D выходит за рамки этой статьи.However, to create true 3D graphics, you would need to use something like OpenGL ES, or for games turn to an API such as MonoGame, although 3D is beyond the scope of this article.

Core AnimationCore Animation

iOS использует платформу, Core Animation для создания эффектов анимации, такие как переход между представлениями, скользящий меню и прокрутка эффекты лишь некоторые из них.iOS uses the Core Animation framework to create animation effects such as transitioning between views, sliding menus and scrolling effects to name a few. Для работы с анимацией двумя способами:There are two ways to work with animation:

  • Через UIKit, который включает анимации на основе представлений, а также анимированные переходы между контроллерами.Via UIKit, which includes view-based animations as well as animated transitions between controllers.
  • С помощью базовой анимации, какие слои напрямую, что для более детального элемента управления.Via Core Animation, which layers directly, allowing for finer-grained control.

С помощью UIKit анимацииUsing UIKit Animation

UIKit предоставляет несколько функций, которые позволяют легко добавить анимацию к приложению.UIKit provides several features that make it easy to add animation to an application. Несмотря на то, что внутри она использует базовой анимации, он упрощает его чтобы работать только с помощью представлений и контроллеров.Although it uses Core Animation internally, it abstracts it away so you work only with views and controllers.

В этом разделе рассматриваются функции UIKit анимации, в том числе:This section discusses UIKit animation features including:

  • Переходы между контроллерамиTransitions between controllers
  • Переходы между представлениямиTransitions between views
  • Просмотр свойств анимацииView property animation

Переходы контроллера представленияView Controller Transitions

UIViewController предоставляет встроенную поддержку для перехода между контроллерами представления через PresentViewController метод.UIViewController provides built-in support for transitioning between view controllers through the PresentViewController method. При использовании PresentViewController, переход на втором контроллере при необходимости могут быть анимированы.When using PresentViewController, the transition to the second controller can optionally be animated.

Например, рассмотрим приложение с двумя контроллерами, которых касается кнопки в первый контроллер вызывает PresentViewController для отображения второй контроллер.For example, consider an application with two controllers, where touching a button in the first controller calls PresentViewController to display a second controller. Чтобы контролировать, какие анимации перехода, используется для отображения второго контроллера, просто присвойте его ModalTransitionStyle свойства, как показано ниже:To control what transition animation is used to show the second controller, simply set its ModalTransitionStyle property as shown below:

SecondViewController vc2 = new SecondViewController {
    ModalTransitionStyle = UIModalTransitionStyle.PartialCurl
};

В этом случае PartialCurl анимации используется, несмотря на то, что несколько других, в том числе:In this case a PartialCurl animation is used, although several others are available, including:

  • CoverVertical — Слайдов вверх в нижней части экранаCoverVertical – Slides up from the bottom of the screen
  • CrossDissolve Старое представление исчезает и появляется новое представлениеCrossDissolve – The old view fades out & the new view fades in
  • FlipHorizontal -Перевернуть горизонтального справа налево.FlipHorizontal - A horizontal right-to-left flip. На увольнения перехода зеркальное отражение слева направо.On dismissal the transition flips left-to-right.

Для анимации перехода, передайте true как второй аргумент PresentViewController:To animate the transition, pass true as the second argument to PresentViewController:

PresentViewController (vc2, true, null);

На следующем рисунке показан как выглядит перехода для PartialCurl случай:The following screenshot shows what the transition looks like for the PartialCurl case:

Представление переходовView Transitions

Помимо переходы между контроллерами UIKit поддерживает анимации переходы между представлениями для замены одно представление для другого.In addition to transitions between controllers, UIKit also supports animating transitions between views to swap one view for another.

Например, допустим, имеется контроллер с UIImageView, которой коснувшись изображения отображались секунды UIImageView.For example, say you had a controller with UIImageView, where tapping on the image should display a second UIImageView. Для анимации изображение суперпредставления представления для перехода на второй вид изображения осуществляется простым вызовом UIView.Transition, передавая ему toView и fromView как показано ниже:To animate the image view’s superview to transition to the second image view is as simple as calling UIView.Transition, passing it the toView and fromView as shown below:

UIView.Transition (
    fromView: view1,
    toView: view2,
    duration: 2,
    options: UIViewAnimationOptions.TransitionFlipFromTop |
        UIViewAnimationOptions.CurveEaseInOut,
    completion: () => { Console.WriteLine ("transition complete"); });

UIView.Transition также принимает duration параметр, который определяет, сколько времени выполняется анимация, а также options Чтобы задать такие параметры, такие как анимация и функцией плавности.UIView.Transition also takes a duration parameter that controls how long the animation runs, as well as options to specify things such as the animation to use and the easing function. Кроме того можно указать обработчик завершения, который будет вызываться при завершении анимации.Additionally, you can specify a completion handler that will be called when the animation completes.

Снимок экрана ниже показано анимированные переходы между изображение представления, если TransitionFlipFromTop используется:The screenshot below show the animated transition between the image views when TransitionFlipFromTop is used:

Анимация свойств представленияView Property Animations

Поддерживает UIKit анимации на различные свойства UIView класса бесплатно, включая:UIKit supports animating a variety of properties on the UIView class for free, including:

  • FrameFrame
  • ГраницыBounds
  • ЦентрCenter
  • Коэффициент альфаAlpha
  • TransformTransform
  • ЦветColor

Эти анимации происходит неявно, указав изменения свойств в NSAction делегат, переданный статический UIView.Animate метод.These animations happen implicitly by specifying property changes in an NSAction delegate passed to the static UIView.Animate method. Например, следующий код выполняет анимацию центральной точки UIImageView:For example, the following code animates the center point of a UIImageView:

pt = imgView.Center;

UIView.Animate (
    duration: 2, 
    delay: 0, 
    options: UIViewAnimationOptions.CurveEaseInOut | 
        UIViewAnimationOptions.Autoreverse,
    animation: () => {
        imgView.Center = new CGPoint (View.Bounds.GetMaxX () 
            - imgView.Frame.Width / 2, pt.Y);},
    completion: () => {
        imgView.Center = pt; }
);

В результате образ анимации вперед и назад в верхней части экрана, как показано ниже:This results in an image animating back and forth across the top of the screen, as shown below:

Как и в Transition метода Animate позволяет длительность задать, вместе с функцией плавности.As with the Transition method, Animate allows the duration to be set, along with the easing function. В этом примере также используется UIViewAnimationOptions.Autoreverse параметр, который приводит к анимации для анимации из значения, в котором начальной.This example also used the UIViewAnimationOptions.Autoreverse option, which causes the animation to animate from the value back to the initial one. Тем не менее, код также задает Center начальное значение в завершающий обработчик.However, the code also sets the Center back to its initial value in a completion handler. Во время анимации интерполяцией значения свойств со временем, реальной модели значение свойства всегда равно конечное значение, которое было задано.While an animation is interpolating property values over time, the actual model value of the property is always the final value that has been set. В этом примере возвращается в точку рядом с правой стороны суперпредставления.In this example, the value is a point near the right side of the superview. Без параметра Center до начальной точки, который является, где из-за завершения анимации Autoreverse задаваемое, изображение было подключить обратно в правую часть после завершения анимации, как показано ниже:Without setting the Center to the initial point, which is where the animation completes due to the Autoreverse being set, the image would snap back to the right side after the animation completes, as shown below:

С помощью базовой анимацииUsing Core Animation

UIView анимации, обеспечивающие большую возможность и должны использоваться, если это возможно из-за Простота реализации.UIView animations allow a lot of capability and should be used if possible due to the ease of implementation. Как упоминалось ранее, анимации UIView использовать платформу Core Animation.As mentioned earlier, UIView animations use the Core Animation framework. Тем не менее, некоторые вещи не может выполняться с помощью UIView анимации, такие как анимация дополнительные свойства, которые не могут анимироваться представление или интерполяцией нелинейных пути.However, some things cannot be done with UIView animations, such as animating additional properties that cannot be animated with a view, or interpolating along a non-linear path. В таких случаях, когда необходимо более детального контроля Core Animation используется также и напрямую.In such cases where you need finer control, Core Animation can be used directly as well.

СлоиLayers

При работе с базовой анимации, анимации осуществляется через слои, которые имеют тип CALayer.When working with Core Animation, animation happens via layers, which are of type CALayer. Слой аналогичен представления, где уровень иерархии, во многом как просмотр иерархии.A layer is conceptually similar to a view in that there is a layer hierarchy, much like there is a view hierarchy. На самом деле слои обратно представления с представлением, добавляя поддержку взаимодействия с пользователем.Actually, layers back views, with the view adding support for user interaction. Вы можете доступа к уровню любого представления в представлении Layer свойство.You can access the layer of any view via the view’s Layer property. На самом деле, используется контекст в Draw метод UIView фактически создается из слоя.In fact, the context used in Draw method of UIView is actually created from the layer. На внутреннем уровне слоя резервного UIView имеет его делегат, задайте режим, который является то, что вызывает Draw.Internally, the layer backing a UIView has its delegate set to the view itself, which is what calls Draw. Да, при рисовании для UIView, фактически рисуемого ее слой.So when drawing to a UIView, you are actually drawing to its layer.

Анимация уровень может быть явными и неявными.Layer animations can be either implicit or explicit. Неявные анимации являются декларативными.Implicit animations are declarative. Объявить свойства слоя, которое следует изменить, и анимация просто работает.You simply declare what layer properties should change and the animation just works. С другой стороны явные анимации создаются через класс анимации, который добавляется к слою.Explicit animations on the other hand are created via an animation class that is added to a layer. Явные анимации разрешить добавление контролировать способ создания анимации.Explicit animations allow addition control over how an animation is created. Следующие разделы углубимся в явных и неявных анимации более подробно.The following sections delve into implicit and explicit animations in greater depth.

Неявные анимацииImplicit Animations

Для анимации свойств слоя рекомендуется с помощью неявного анимации.One way to animate the properties of a layer is via an implicit animation. UIView анимации Создание неявного анимации.UIView animations create implicit animations. Тем не менее можно создать неявный анимации непосредственно в слой также.However, you can create implicit animations directly against a layer as well.

Например, следующий код задает слоя Contents из образа, задает ширину границы и цвет, и добавляет слой как подуровень слоя представления:For example, the following code sets a layer’s Contents from an image, sets a border width and color, and adds the layer as a sublayer of the view’s layer:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    layer = new CALayer ();
    layer.Bounds = new CGRect (0, 0, 50, 50);
    layer.Position = new CGPoint (50, 50);
    layer.Contents = UIImage.FromFile ("monkey2.png").CGImage;
    layer.ContentsGravity = CALayer.GravityResize;
    layer.BorderWidth = 1.5f;
    layer.BorderColor = UIColor.Green.CGColor;

    View.Layer.AddSublayer (layer);
}

Чтобы добавить неявное анимации для слоя, просто перенести изменения свойств в CATransaction.To add an implicit animation for the layer, simply wrap property changes in a CATransaction. Это позволяет анимации свойств, которые не будут анимируемым с анимированный значок представления, такие как BorderWidth и BorderColor как показано ниже:This allows animating properties that would not be animatable with a view animation, such as the BorderWidth and BorderColor as shown below:

public override void ViewDidAppear (bool animated)
{
    base.ViewDidAppear (animated);

    CATransaction.Begin ();
    CATransaction.AnimationDuration = 10;
    layer.Position = new CGPoint (50, 400);
    layer.BorderWidth = 5.0f;
    layer.BorderColor = UIColor.Red.CGColor;
    CATransaction.Commit ();
}

Этот код также анимирует слоя Position, — расположение точки привязки слоя измеряется от левого верхнего угла superlayer координат.This code also animates the layer’s Position, which is the location of the layer’s anchor point measured from the upper left of the superlayer’s coordinates. Точка привязки слоя — нормализованный точки в системе координат слоя.The anchor point of a layer is a normalized point within the layer’s coordinate system.

На следующем рисунке показана точка положение и привязки:The following figure shows the position and anchor point:

При выполнении примера Position, BorderWidth и BorderColor анимации, как показано на следующем снимке экрана:When the example is run, the Position, BorderWidth and BorderColor animate as shown in the following screenshots:

Явные анимацииExplicit Animations

В дополнение к неявное анимации, Core Animation включает широкий набор классов, унаследованных от CAAnimation , которые позволяют инкапсулировать анимации, которые затем добавлены явно со слоем.In addition to implicit animations, Core Animation includes a variety of classes that inherit from CAAnimation that let you encapsulate animations that are then explicitly added to a layer. Это позволяет более детального контроля над анимацией, например изменить начальное значение анимации, группирование анимации и указания опорных кадров разрешены нелинейных пути.These allow finer-grained control over animations, such as modifying the start value of an animation, grouping animations and specifying keyframes to allow non-linear paths.

Следующий код является примером явные анимацией с помощью CAKeyframeAnimation для слоя, показанный ранее (в разделе «неявные анимации):The following code shows an example of an explicit animation using a CAKeyframeAnimation for the layer shown earlier (in the Implicit Animation section):

public override void ViewDidAppear (bool animated)
{
    base.ViewDidAppear (animated);
    
    // get the initial value to start the animation from
    CGPoint fromPt = layer.Position;
    
    /* set the position to coincide with the final animation value
    to prevent it from snapping back to the starting position
    after the animation completes*/
    layer.Position = new CGPoint (200, 300);
    
    // create a path for the animation to follow
    CGPath path = new CGPath ();
    path.AddLines (new CGPoint[] { fromPt, new CGPoint (50, 300), new CGPoint (200, 50), new CGPoint (200, 300) });
    
    // create a keyframe animation for the position using the path
    CAKeyFrameAnimation animPosition = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
    animPosition.Path = path;
    animPosition.Duration = 2;
    
    // add the animation to the layer.
    /* the "position" key is used to overwrite the implicit animation created
    when the layer positino is set above*/
    layer.AddAnimation (animPosition, "position");
}

Этот код изменяет Position слоя, создав путь, который затем используется для определения анимации ключевого кадра.This code changes the Position of the layer by creating a path that is then used to define a keyframe animation. Обратите внимание, что слоя Position присваивается конечное значение Position из анимации.Notice that the layer’s Position is set to the final value of the Position from the animation. Без этого слоя необходимо сразу же станет его Position перед анимации так, как анимация изменяет только значения презентации и не фактического значения модели.Without this, the layer would abruptly return to its Position before the animation because the animation only changes the presentation value and not the actual model value. Установив значение модели конечное значение анимации, слой сохранятся в конце анимации.By setting the model value to the final value from the animation, the layer stay in place at the end of the animation.

На следующих снимках экрана показано слой, содержащий изображение анимации по указанному пути:The following screenshots show the layer containing the image animating through the specified path:

СводкаSummary

В этой статье мы рассмотрели возможности анимации, предоставляемого Core Animation платформ.In this article we looked at the animation capabilities provided via the Core Animation frameworks. Мы рассмотрели Core Animation, узнайте, как он поддерживает анимацию в UIKit, и как он может использоваться непосредственно для элемента управления анимации более низкого уровня.We examined Core Animation, showing both how it powers animations in UIKit, and how it can be used directly for lower-level animation control.