찾다
웹 프론트엔드HTML 튜토리얼iOS UIView动画实践(五):Keyframe Animation_html/css_WEB-ITnose

前言

有些时候大家可能会遇到制作复杂、具有连贯性UIView动画的需求,这时大家可能会使用在completion闭包中衔接一段一段的动画,使之成为一段连续的动画。

如果我们只是连接2个,或者3个动画,这种方式或许还行得通,但如果有更多的动画片段需要连接的时候,这种方式会带来灾难性的问题,你的代码会非常的冗余,不断的在completion闭包中嵌套代码,使代码维护起来相当的困难。所以今天向大家介绍能更好地实现这个需求的方法,Keyframe动画。

Keyframe动画可以让我们有效的拆分由若干段动画连接而成的复杂动画,可以较为精准的定义每段动画的起始点及持续时间,并且在代码组织方面也非常清晰。先看看今天要带大家实现的动画Demo:

           

使用场景

我们先来认识一下,在什么样的场景下需要使用Keyframe动画。如图下所示,这是一个由四段动画组成的一个复杂动画,让UIView沿着长方形的轨迹运动:

我们来看看用代码如何实现:

[cpp] view plaincopy

  1. UIView.animateWithDuration(1, animations: {  

  2.     view.center.x += 200.0  

  3. }, completion: { _ in  

  4.     UIView.animateWithDuration(1, animations: {  

  5.         view.center.y += 100.0  

  6.     }, completion: { _ in  

  7.         UIView.animateWithDuration(1, animations: {  

  8.             view.center.x -= 200.0  

  9.         }, completion: { _ in  

  10.             UIView.animateWithDuration(1, animations: {  

  11.                 view.center.y -= 100.0  

  12.             }, completion: nil)  

  13.         })  

  14.     })  

  15. })  

通过上面的伪代码可以看到,我们使用了completion闭包的方式连接每一段的动画,代码看起来尚且算清晰,可读性也马马虎虎。但是大家想象一下,如果我们使UIView按照一个复杂的路线运行,这一段动画可能有十几、几十段动画组成的,那么如果再使用completion闭包这种方式连接,那代码是多么的惨不忍睹。幸好我们有Keyframe动画,下面就让我们来看看如何使用Keyframe动画。

Keyframe动画

首先我们会使用到UIView的另一个动画方法animateKeyframesWithDuration(_: delay: options: animations: completion: ) :

[cpp] view plaincopy

  1. UIView.animateKeyframesWithDuration(2, delay: 0, options: [], animations: {  

  2.     // add keyframes  

  3. }, completion: nil)  

这个方法的几个参数与前几个使用过的动画方法参数一样。上面代码片段的意思是整个关键帧动画的持续时间为2秒、无延迟、无动画选项、执行完毕后无后续执行的代码。

注:该方法的动画选项不再是UIViewAnimationOptions,而是UIViewKeyframeAnimationOptions。具体的内容大家可以去查阅Apple的文档。

接下来我们要在animations闭包中添加关键帧了:

[cpp] view plaincopy

  1. UIView.animateKeyframesWithDuration(2, delay: 0, options: [], animations: {  

  2.     UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.25, animations: {  

  3.         view.center.x += 200.0  

  4.     })  

  5. }, completion: nil)  

addKeyframeWithRelativeStartTime(_: relativeDuration: animations: )是UIView添加关键帧的方法,该方法有三个参数:

  • startTime:关键帧开始时间,该时间是相对整个关键帧动画持续时间的相对时间,一般值在0到1之间。如果为0,则表明这一关键帧从整个动画的第0秒开始执行,如果设为0.5,则表明从整个动画的中间开始执行。

  • relativeDuration:关键帧持续时间,该时间同样是相对整个关键帧动画持续时间的相对时间,一般值也在0到1之间。如果设为0.25,则表明这一关键帧的持续时间为整个动画持续时间的四分之一。

  • animations:设置视图动画属性的动画闭包。

我们解释一下上面这段代码。整个关键帧动画的持续时间为2秒,第一个关键帧从第0秒开始,运行0.5秒结束。下面我们完成其他三个关键帧:

[cpp] view plaincopy

  1. UIView.animateKeyframesWithDuration(2, delay: 0, options: [], animations: {  

  2.     UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.25, animations: {  

  3.         view.center.x += 200.0  

  4.     })  

  5.     UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: {  

  6.         view.center.y += 100.0  

  7.     })  

  8.     UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.25, animations: {  

  9.         view.center.x -= 200.0  

  10.     })  

  11.     UIView.addKeyframeWithRelativeStartTime(0.75, relativeDuration: 0.25, animations: {  

  12.         view.center.y -= 100.0  

  13.     })  

  14. }, completion: nil)  

第二个关键帧的开始时间为0.25,也就是从整个动画时间的第0.5时开始执行,同样持续0.5秒。后两个关键帧的参数就不难理解了。

现在整个代码看起来非常整洁,条理清晰,可读性非常好,而且可以有更精确的控制。即使再多几个关键帧也同样可以从容应对。

关键帧动画不仅仅用于同一个视图的分段动画,也可使使用于不同视图的组合动画,由于我们还没讲到图层动画,所以,开篇的示例动画中就使用了关键帧动画实现了多个视图的组合动画。

示例动画

在这个示例中虽然看起来是一个纸飞机视图的连续动画,但其实是由三个纸飞机视图组合而成的:

从图中可以看到其实是有三个纸飞机视图,只不过在界面加载之前2号和3号纸飞机视图的透明度都是为零。

整个动画是由这三个纸飞机视图通过关键帧动画组合而成:

图中标示出了三个飞机视图的运行轨迹、视图大小、视图透明度的状态,我们来看看代码如何实现:

[cpp] view plaincopy

  1. let zoomInScaleTransform = CGAffineTransformMakeScale(0.2, 0.2)  

  2. UIView.animateKeyframesWithDuration(3, delay: 0, options: [], animations: {  

  3.     UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.2, animations: {  

  4.         self.customHeaderView.paperAirplane.center.x += self.view.frame.width  

  5.         self.customHeaderView.paperAirplane.center.y += -180  

  6.         self.customHeaderView.paperAirplane.transform = zoomInScaleTransform  

  7.     })  

  8.     UIView.addKeyframeWithRelativeStartTime(0.3, relativeDuration: 0.01, animations: {  

  9.         self.customHeaderView.paperAirplaneOpposite.alpha = 1  

  10.         self.customHeaderView.paperAirplaneOpposite.transform = zoomInScaleTransform  

  11.     })  

  12.     UIView.addKeyframeWithRelativeStartTime(0.3, relativeDuration: 0.5, animations: {  

  13.         self.customHeaderView.paperAirplaneOpposite.transform = CGAffineTransformIdentity  

  14.         self.customHeaderView.paperAirplaneOpposite.center.x -= self.view.frame.width  

  15.         self.customHeaderView.paperAirplaneOpposite.center.y += 90  

  16.     })  

  17.     UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.01, animations: {  

  18.         self.customHeaderView.paperAirplaneComeBack.alpha = 1  

  19.     })  

  20.     UIView.addKeyframeWithRelativeStartTime(0.9, relativeDuration: 0.2, animations: {  

  21.         self.customHeaderView.paperAirplaneComeBack.center.x += 33  

  22.     })  

  23. }, completion: { _ in  

  24.     self.restorePaperAirplaneStatus()  

  25. })  

大家看到这大家可能会有疑问了,三段动画怎么会有五个关键帧呢,我们来刨析一下:

  • 第一个关键帧:完成1号纸飞机视图运动到右上角并移出屏幕,视图逐渐变小的动画。该关键帧从整个动画的第0秒开始执行,持续时间为0.6秒。

  • 第二个关键帧:由于2号纸飞机视图的初始透明度为零,所以在第二个关键帧将透明度设为1,并且缩小视图。注意这两个动作需要在瞬间完成,所以relativeDuration设为0.01,一个极短的时间。开始时间为整个动画的第0.9秒开始,较第一个关键帧延迟0.3秒。

  • 第三个关键帧:与第二个关键帧同时开始执行,完成2号纸飞机视图从小变大、并且往左下角运动,一直移出屏幕。持续时间为1.5秒。

  • 第四个关键帧:与第二个关键帧作用相似,改变3号纸飞机视图的透明度,同样是在瞬间完成。

  • 第五个关键帧:与第四个关键帧同时执行, 完成向右移动的动画,持续0.6秒。

关键帧完成之后,在completion闭包中调用restorePaperAirplaneStatus()方法,恢复3个纸飞机视图的状态及位置,以便再次执行动画。

总结

大家在使用关键帧动画时,对于关键帧的开始时间和持续时间需要仔细设置,保证每个关键帧在合适的时间开始,执行恰当的持续时间。在必要时候也需要在关键帧里修改视图的一些状态,但要设置极短的持续时间,表示瞬间完成。

下一篇会向大家介绍在使用Auto Layout的情况下,如何通过约束实现动画,好了今天就先到这里吧。


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구