AppleWatch开发入门九——Watch帧动画的实现

简介:

AppleWatch开发入门九——Watch帧动画的实现

        动画一直是iOS系统的一大亮点,CoreAnimation和粒子效果的支持,开发者可以很容易的做出效果炫酷的动画特效。在watchOS中,由于性能和屏幕尺寸的限制,对于动画,并没有强大的框架支持,但是这并不是说开发者就没办法在watch上添加动画的特效了。在watchOS中唯一可以让开发者用于动画操作的就是帧动画。

        和iOS类似,watchOS中的真动画也是通过UIImage对象的合集来展示的。只是设置和用法略有不同。

        首先,watchOS中帧动画的操作被单独封装成了一个协议,当然,WKInterfaceImage类是遵守了这个协议的:

?
1
2
3
4
5
6
7
8
public  protocol WKImageAnimatable : NSObjectProtocol {
     //从默认帧开始播放动画
     public  func startAnimating()
     //播放一个指定范围的帧动画 NSRange是帧的范围,durtion是播放一遍的时间,repeatCount是重复播放次数,0为无限循环
     public  func startAnimatingWithImagesInRange(imageRange: NSRange, duration: NSTimeInterval, repeatCount: Int)
     //停止播放动画
     public  func stopAnimating()
}

创建帧动画的步骤与一些注意:

1、关联一个视图中的WKInterfaceImage对象

2、所有帧动画的图片帧必须有统一的格式:比如image1.png,image2.png等等

3、给WKInterfaceImage对象设置帧前缀:

?
1
imageInterface.setImageNamed( "image" )

注意:这里使用的方法和设置图片的方法一样,但是参数有别,图片的设置需要完整的图片名,动画帧前缀的设置只要设置帧图片的前缀。

4、开始动画:

?
1
  imageInterface.startAnimatingWithImagesInRange(NSRange(location: 1, length: 3), duration: 3, repeatCount: 0)

注意:素材帧必须放入watchKit App这个Target中,才可以使用。 

目录
相关文章
|
12月前
|
存储
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
281 0
|
2月前
|
图形学
Unity动画☀️Unity动画系统Bug集合
Unity动画☀️Unity动画系统Bug集合
|
5月前
|
开发框架 API 开发者
Flutter的动画:实现方式与动画库的技术探索
【4月更文挑战第26天】探索Flutter动画机制与库:基础动画、自定义动画、物理动画及Lottie、AnimatedWidgets、EasyAnimations等库的应用,助开发者实现丰富动画效果,提升用户体验。同时,了解性能优化技巧,如避免重绘、利用离屏渲染和GPU加速,确保动画流畅。 Flutter为移动应用开发带来强大动画支持。
|
5月前
|
iOS开发
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
131 0
|
12月前
|
前端开发 JavaScript
优美的Reactl列表动画:Styled-Components动画实践
优美的Reactl列表动画:Styled-Components动画实践
|
移动开发 前端开发 JavaScript
【前端动画】实现动画的6种方式
【前端动画】实现动画的6种方式
1152 0
|
Dart Android开发
Flutter(十七)——组合动画
Flutter(十七)——组合动画
311 2
Flutter(十七)——组合动画
|
存储 Android开发 iOS开发
Flutter(十四)——动画的原理以及Tween与Curve的使用
Flutter(十四)——动画的原理以及Tween与Curve的使用
623 1
Flutter(十四)——动画的原理以及Tween与Curve的使用
|
JavaScript
【Vue3从零开始-第四章】4-5 列表动画和状态动画
【Vue3从零开始-第四章】4-5 列表动画和状态动画
158 0
【Vue3从零开始-第四章】4-5 列表动画和状态动画
|
Dart 开发者
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
173 0
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)