搜索
首页web前端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
超越HTML:网络开发的基本技术超越HTML:网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站,仅靠HTML是不够的,还需要以下技术:JavaScript赋予网页动态和交互性,通过操作DOM实现实时变化。CSS负责网页的样式和布局,提升美观度和用户体验。现代框架和库如React、Vue.js和Angular,提高开发效率和代码组织结构。

HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中