作家
登录

终于iOS11里,我们拥有了傻瓜化的交互式动画

作者: 来源: 2017-11-07 15:49:17 阅读 我要评论

终于iOS11里,我们拥有了傻瓜化的交互式动画

其实看完图片我们已经可以建立起手势移动距离和timeOffset的接洽关系。

以横向移动为前提,那么手指的x坐标/图片的width 老是 <= 1.0,所以,当扭迁移转变画的总时长为1,那么动画的进度timeOffset就正好等于x/imageView.width了。完美的接洽关系了起来。

问题

我们也看到了这种处理办法的弊病。就是,实袈溱太繁琐了。

如图

所以,在本年的wwdc里,苹不雅为我们供给了一种异常便利的解决筹划。

UIViewPropertyAnimator

其实袈溱iOS10,苹不雅已经惹人了别的一种基于View层的强大年夜的动画框架,UIViewPropertyAnimator.

他供给了一个异常棒的办法来解决以前自定义timingFunction只能由CAAnimation来处理的问题。

timingFunction

说到timingFunction,信赖写过动画的人都异常清跋扈体系供给的几种。

  • Liner (线性)
  • EaseIn (先慢后快)
  • Ea搜刮引擎优化ut (先快后慢)
  • EaseInEa搜刮引擎优化ut (慢进,加快,减速)

实际上这几种timingFunction只能说是勉强够用。当你想更过细调剂动画速度的时刻势必会应用自定义的贝塞尔曲线来控制动画速度。

比如在http://cubic-bezier.com/,我创建了一个自定义的曲线。

终于iOS11里,我们拥有了傻瓜化的交互式动画

他的control point 分别是(0.17, 0.67, 0.71, 0.15)

那么,如不雅你想用这个贝塞尔曲线当做timingFunction,在iOS10之前你只能应用CABasicAnimatin来实现。

终于iOS11里,我们拥有了傻瓜化的交互式动画

例如,第一个扭迁移转变画自定义timingFunction是如许的。

  1. basicAnimation.timingFunction = CAMediaTimingFunction.init(controlPoints: 0.17, 0.67, 0.71, 0.15) 

想在View层自定义timingFunction?

没门。

所幸,我们在iOS10的时刻拥有了UIViewPropertyAnimator

如今,我们如斯简单的就创建了一个自定义动画速度的动画。

  1. let convenienceAnimator = UIViewPropertyAnimator.init(duration: 0.66, controlPoint1: point1, controlPoint2: point2) { 
  2.                  
  3.             } 
  4.             convenienceAnimator.addCompletion({ (position) in 
  5.                 if position == .end { 
  6.                      
  7.                 } 
  8.             }) 
  9.             convenienceAnimator.startAnimation()    

iOS11中更强大年夜的UIViewPropertyAnimator

session 230中,苹不雅侧重介绍了我们梦寐以求的简单便利的交互式动画api。

终于iOS11里,我们拥有了傻瓜化的交互式动画

举一个session 230中的例子来看一下新版本中若何实现交互式动画。

这里,我们须要用手势来控制动画的进度。这里,动画是让小球大年夜左向右移动100的距离。

看看代码若何简单的将动画和手势接洽关系起来。

  1. var animator:UIViewPropertyAnimator! 
  2. var circle:UIImageView! 
  3.      
  4. func handlePan(recognizer:UIPanGestureRecognizer) { 
  5.         switch recognizer.state { 

      推荐阅读

      Python转JavaScript编译器,天了噜!还能转代码,到底怎么做到的

    为懂得决这个问题,Transcrpyt支撑别号章一ㄅ念。当在Python中应用<string>.split时,就会被翻译成一个具有Python的split语义的JavaScript函数<string>.py_split。在原生JavaScript代铝闼楝split指代的>>>详细阅读


    本文标题:终于iOS11里,我们拥有了傻瓜化的交互式动画

    地址:http://www.17bianji.com/lsqh/38570.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)