JSON

Lottie初级教程:打造iOS APP完美动画(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-29 10:04 我要评论( )

上面就是你播放动画需要的代码。在Lottie中有个 LOTAnimationView 分类可以直接从JSON文件下载动画数据。你要先用你已经下载好的JSON文件创建一个 LOTAnimationView 对象,你才能展示这个动画。 LOTAnimationView

上面就是你播放动画需要的代码。在Lottie中有个LOTAnimationView分类可以直接从JSON文件下载动画数据。你要先用你已经下载好的JSON文件创建一个LOTAnimationView对象,你才能展示这个动画。

LOTAnimationViewUIView的一个子分类,所以你只要像执行其他视图一样执行LOTAnimationView就可以了。我们先将它的大小重置,放在中心位置,把内容模式设为Aspect Fill;然后我们调用addSubview把动画视图添加到主视图;最后,我们调用play()播放动画。

现在我们运行项目看看APP的效果是什么样。只要打开APP,它就会实时播放动画。

 

lottie-sample-4-1.gif

循环动画

默认情况下,动画只播放一次。如果你想循环播放动画,你可以把loopAnimation属性设为true如下:

 animationView.loopAnimation = true

LOTAnimationView 分类也为你自定义动画提供了大量属性。如果你想放慢动画播放速度,只要像下面这样改变animationSpeed属性就行了:

animationView.animationSpeed = 0.5

从远程服务器上载入Animation JSON File

你不仅可以把JSON文件保存在本地,而且可以把动画数据保存在远程服务器上。Lottie已经为开发者从远程URL上下载JSON文件准备好了API。用下面的代码替换animationView的初始化界面,看看你会得到什么样的动画。

let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)

动画视图转换

LOTAnimationViewUIView一样都支持不同类型的动画转换。你可以通过合理地设置转换属性对动画进行旋转,大小重置,位置重置。下面是一个把动画顺时针转换45度的转换示例:

let rotateTransform = CGAffineTransform(rotationAngle: 45.0) animationView.transform = rotateTransform

相似的,你可以像其他标准UIView对象一样把UIView动画覆盖在原来的动画上。我们在现有的动画上重建一不同大小的动画。用下面的代码把viewDidLoad()替换掉:

override func viewDidLoad() {     super.viewDidLoad()                 if let animationView = LOTAnimationView(name: "servishero_loading") {         animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)         animationView.center = self.view.center                  animationView.loopAnimation = true         animationView.contentMode = .scaleAspectFill         animationView.animationSpeed = 0.5                  // Applying UIView animation         let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)         animationView.transform = minimizeTransform         UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {             animationView.transform = CGAffineTransform.identity         }, completion: nil)                  view.addSubview(animationView)              animationView.play()     }      }

运行APP你就会得到下面的结果,是不是很有趣呢?

 

lottie-sample-5-2.gif

接下来呢?

好的UI动画不仅能使你的应用上一个层次,而且能提供动人的用户体验。在Lottie出现之前,用After Effects来真正地实现动画的确是非常艰难又耗时的工作。但现在有了这个强大的动画库将使得动画实现变得无比轻松。

在这个教程中,你应该已经学会了如何使Lottie服务于你的iOS项目。我在这儿只是大概介绍了一下Lottie的要点,你可以在GitHub上了解更多关于Lottie的信息。不仅如此,我们在下期教程将通过建立一个炒鸡棒的管理动画对Lottie进行更加深入的探讨。

保持关注哦。如果你喜欢这个教程,请在下方留言或分享给你的朋友。

你可以在GitHub上下载这个简单的Xcode项目以供参考。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Swift JSON数据解析生成视频教程

    Swift JSON数据解析生成视频教程

    2017-05-20 13:02

  • 轻松在Swift3中解析JSON的微框架 相关介绍、文档、教程

    轻松在Swift3中解析JSON的微框架 相关介绍、文档、教程

    2017-04-24 09:01

  • 使用 Swift 解析 JSON

    使用 Swift 解析 JSON

    2017-04-14 11:01

  • 在Swift中使用JavaScript的方法和技巧

    在Swift中使用JavaScript的方法和技巧

    2017-04-10 12:00

网友点评
5