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

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

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

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

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

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对象设置帧前缀:

imageInterface.setImageNamed("image")

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

4、开始动画:

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

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

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

CSS 3D的魅力

最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-st...

984
来自专栏腾讯IVWEB团队的专栏

浏览器渲染原理

本文为大家分享了浏览器的工作原理和渲染过程,如计算CSS样式,构建Render Tree, Layout等过程。

1.5K3
来自专栏小红豆的数据分析

小蛇学python(10)tkinter和pandas的补充

本文主要是想对写界面以及操作表格遇到的常见问题做个总结。前两篇文章想想对tkinter和pandas这两个库的概述还不够全面。

1813
来自专栏AndroidTv

【Android】属性动画的使用理解

属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

2923
来自专栏服务端技术杂谈

iOS 开发从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是...

3937
来自专栏DannyHoo的专栏

设置圆角图片的两种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2142
来自专栏前端新视界

通过 JS 判断页面是否有滚动条的简单方法

前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方...

2819
来自专栏格子的个人博客

Markdown语法学习记录

鉴于每次写博客,写文章的时候,总是要重复去查询Markdown的相关语法,这种闹心的感觉我再也不要了。

1072
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

2255
来自专栏守候书阁

编写自己的代码库(css3常用动画的实现)

在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了...

1592

扫码关注云+社区

领取腾讯云代金券