尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Dance 动画控制全解:start、pause、reverse、finish 四大操作的使用指南

Dance 动画控制全解:start、pause、reverse、finish 四大操作的使用指南 Dance 动画控制全解start、pause、reverse、finish 四大操作的使用指南【免费下载链接】DanceA radical elegant animation library for iOS.项目地址: https://gitcode.com/gh_mirrors/dance1/DanceDance 是一款基于 iOS 10UIViewPropertyAnimator构建的优雅 iOS 动画库它把原本复杂的动画流程压缩成一行行链式调用的代码。无论你是刚接触 iOS 动画的初学者还是想给项目加入更细腻动效的开发者掌握 Dance 动画控制中的start、pause、reverse、finish四大操作就能像操作一台播放器一样随心所欲地控制视图动画。本文将从零开始逐一拆解这四个核心方法的用法、注意事项与组合技巧帮你快速上手这套 iOS 动画控制指南。先认识 Dance四大操作从哪来在使用四大操作之前你需要先为某个UIView创建一个动画。Dance 的核心思路很简单每个视图都带有一个dance属性通过view.dance.animate(...)定义动画目标之后就能在任何能引用到该视图的地方调用控制方法。circle.dance.animate(duration: 2.0, curve: .easeInOut) { $0.center self.view.center $0.backgroundColor .blue }.start()动画创建后并不会自动运行必须调用start()才开始。而pause、reverse、finish则负责对这段播放中的动画做实时干预它们的实现都集中在 Dance.swift 中值得对照源码阅读。start() 方法如何启动一个 Dance 动画start()是四大操作的第一步也是最简单的一步——让已经声明好的动画真正跑起来。它有两种形式circle.dance.start() // 立即开始 circle.dance.start(after: 5.0) // 延迟 5 秒后开始使用小贴士动画块声明后不会自动执行忘记调用start()是新手最常见的失误。start(after:)非常适合入场等待场景比如页面加载后延迟播放的提示动画。Dance 支持链式调用可以在声明动画的同时直接启动比如circle.dance.animate(...).addCompletion { ... }.start()完整写法见 Dance.swift。pause() 方法暂停动画的正确姿势pause()可以在任意时刻冻结动画适合做点击暂停、再点击继续的交互。同样支持延迟暂停pause(after:)。circle.dance.pause()这里有一个特别容易踩坑的细节pause()只是暂停了时间轴视图并不会渲染在暂停位置如果希望视图停留在暂停瞬间的画面必须再调用一次finish(at: .current)才能把画面定住。这也是官方示例项目 ViewController.swift 中反复强调的要点。另外暂停后的动画状态依然是.activeisRunning才会变为false判断动画是否在跑要用isRunning而不是state。reverse() 方法让动画像倒放一样回放reverse()是四大操作中最有电影感的一个——它会把正在进行的动画倒着播放就像视频倒放一样。再调用一次又会恢复正向播放。circle.dance.reverse() // 反向播放 circle.dance.isReversed true // 等价写法使用小贴士想从第一次start()就反向播放链式写法一步搞定circle.dance.start().reverse()。注意reverse()只会翻转播放方向不会改变动画的总时长反向播放同样要花完整时长。完成回调中的position参数在反转后语义会变化若视图最终回到初始位置回调收到的是.start而不是.end逻辑判断时别写反了。相关实现见 Dance.swift。finish() 方法手动结束动画的最佳实践finish(at:)的作用是立即结束动画并把视图渲染到你指定的位置同时立刻触发所有 completion 回调。位置有三种选择circle.dance.finish(at: .current) // 停在当前位置 circle.dance.finish(at: .end) // 直接跳到终点 circle.dance.finish(at: .start) // 回到起点几个值得记住的场景配合 pause 定格画面pause()后视图不渲染补上finish(at: .current)即可定格。中断动画比如用户快速点击跳过开场动画时用finish(at: .end)直接跳到最终状态。源码里还有一层容错处理如果动画还没启动finish会先自动启动再结束所以即使调用时机不当也不会崩溃见 Dance.swift。四大操作组合使用技巧单独用会了组合起来才是 Dance 的魅力所在。以下三种组合最能体现这套动画控制 API 的优雅// 1. 启动即反向入场即倒放 circle.dance.start().reverse() // 2. 暂停并调整进度实现拖拽进度条效果 circle.dance.pause().setProgress(to: 0.5) // 3. 播放 / 暂停切换 if circle.dance.isRunning { circle.dance.pause() } else { circle.dance.start() }配合progress属性还能实现类似视频播放器的拖拽 scrubbing体验——滑动滑块时调用circle.dance.progress value视图会无缝跳到对应进度示例见 Dance.swift。官方 Demo 里就有一个圆形视图配合滑块实时拖拽的演示把四大操作和进度控制结合得淋漓尽致。常见问题排查Q1调用start()后控制台打印错误Dance 是宽容的库如果对没有活动动画的视图调用操作不会崩溃而是打印** Dance Error: view with dance.tag tag does not have an active animation! **此时多半是动画已完成被自动清理或还没创建动画。调用前先用circle.dance.hasAnimation判断一下即可可用circle.dance.tag追踪每个动画。Q2pause()后视图消失了不是消失而是暂停时视图未渲染。补上circle.dance.finish(at: .current)即可。Q3state和isRunning有什么区别state表示动画是否已启动暂停也算.activeisRunning才表示此刻是否正在播放。判断在不在动请用后者状态定义见 Dance.swift。总结Dance 动画控制的核心就这四把钥匙start()启动、pause()暂停、reverse()倒放、finish(at:)收尾。它们都建立在UIViewPropertyAnimator之上却又比原生 API 友好得多配合链式调用和容错机制几乎可以零成本接入任意 iOS 项目。建议照着官方示例项目动手跑一遍创建一个视图、声明动画、然后用四个按钮依次触发这四种操作很快你就能感受到这套 iOS 动画库激进而优雅的设计哲学。【免费下载链接】DanceA radical elegant animation library for iOS.项目地址: https://gitcode.com/gh_mirrors/dance1/Dance创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表