Swift3.1动画(一)

前言:

前段时间,苹果爸爸警告了热更新技术,估计是为了力推swift做准备,swift会越来越重要。所以我特地整理了下去年学习swift动画的demo,现在已经把demo更新到最新swift3.0,在此做个记录,也给大家分享下。

外观属性:

backgroundColor 背景颜色 alpha 透明度

一、一般动画

1、普通平移

普通平移.gif

<pre> UIView.animate(withDuration: 2, delay: 0.0, options: [], animations: { self.dog.center.x += 140 }, completion: nil) </pre>

说明:改变参数,会出现不同的动画效果 1、<code>withDuration </code> 动画持续时间 2、<code>delay</code> 延迟时间 3、<code>options</code> <code>[]</code>代表传入参数为空

2、重复来回移动

重复来回移动.gif

<pre> UIView.animate(withDuration: 2, delay: 0.0, options: [.repeat, .autoreverse], animations: { self.dog.center.x += 140 }, completion: nil) </pre>

说明:<code>[.autoreverse, .repeat]</code>添加两个参数,需要用冒号<code>,</code>分开,方括号<code>[]</code>包起来 1、<code>options</code> <code>.repeat</code>重复 <code>.autoreverse</code>来回移动

3、淡入淡出

火车启动停止

现实生活中,物体不仅仅突然启动或者停止,很多东西像火车都是慢慢启动(speed up)慢慢停止(slow down)

淡入淡出.gif

说明: 1、<code>options</code> <code>.repeat</code>重复 <code>.curveEaseOut</code>淡出(逐渐减速) <code>..curveEaseIn</code>淡入(逐渐加速)

二、弹簧动画(Spring Animation)

由于 iOS 本身大量使用的就是 Spring Animation,用户已经习惯了这种动画效果

iOS的弹簧效果.gif

弹簧图解.png

由图可以很清楚看出,<code>point A</code>到<code>point B</code>,会在终点<code>point B</code>来回晃动,就是我们常说的惯性

Spring Animation 的 API 和一般动画相比多了两个参数,分别是usingSpringWithDamping和initialSpringVelocity <pre> UIView.animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [.repeat, .autoreverse], animations: { self.dog.center.x += 140 }, completion: nil) </pre>

说明: 1、<code>usingSpringWithDamping</code>传入数值为0.0~1.0,数值越大,弹性越不明显 2、<code>initialSpringVelocity</code> 动画速度,<code>usingSpringWithDamping</code>相同情况下,<code>initialSpringVelocity</code>数值越大,初始速度越大(个人想法:<code>withDuration</code>持续时间相同,但是初始速度大,我觉得是通过摆动的幅度,反弹效果来扯平,也就是说数值越大,反弹效果更明显)

该图来源其他资料.gif

从上图可以看出,25的比5.0初始速度快,而且有反弹效果,下面是我代码写的,值分别为0.2和9.0的效果

惯性0.2.gif

惯性9.0.gif

三、过渡(Transitions)

1、普通过渡

transitionFlipFromBottom效果

<pre> UIView.transition(with: animationContainerView!, duration: 1.33, options: [.repeat, .curveEaseOut, .transitionFlipFromBottom], animations: { self.animationContainerView!.addSubview(newView) }, completion: nil) </pre>

<code>transitionFlipFromBottom</code>把底部作为视图翻转的“枢纽”

transitionCurlDown效果

<code>transitionCurlDown</code>类似翻页效果 <code>transition</code><code>option</code>很有好多,朋友们可以自己敲来试试

2、替换view

替换.gif

<pre> //替换图片 UIView.transition(from: dogView, to: pandaView, duration: 3.0, options: [.transitionFlipFromBottom, .repeat], completion: nil) </pre>

全部代码均已校正,总结自外文《iOS.Animations.by.Tutorials》

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏RESTART POiNTER

Web H5视频滤镜的“百搭”解决方案——WebGL着色器

视频滤镜,顾名思义,是在视频素材上duang特效的一种操作。 随着H5页面越做越炫酷的趋势,单一的视频播放已经不能满足我们的需求,视频滤镜在Web页面上的应用越...

2.1K30
来自专栏HenCoder

HenCoder Android 自定义 View 1-6:属性动画(上手篇)

如果你没听说过 HenCoder,可以先看看这个: HenCoder:给高级 Android 工程师的进阶手册

15620
来自专栏Material Design组件

Human Interface Guidelines — Segmented Controls

15140
来自专栏算法+

自动红眼移除算法 附c++完整代码

“红眼”一般是指在人物摄影时,当闪光灯照射到人眼的时候,瞳孔放大而产生的视网膜泛红现象。

541130
来自专栏IMWeb前端团队

这个问题你应该很熟悉,然后懵逼,然后放弃

今天早晨决定写这篇博文,但是晚上回家的时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。第一部分为抛出问题,诚邀各路英雄...

18500
来自专栏Android知识点总结

Android原生绘图之让你了解View的运动

8220
来自专栏落影的专栏

OpenGL ES实践教程(六)全景视频获取焦点

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

32950
来自专栏hightopo

电信网络拓扑图自动布局

31120
来自专栏数据小魔方

PPT手绘利器——布尔运算

今天给大家介绍PPT里一个隐藏的强大功能——布尔运算! 布尔运算 ▽ 别被名字吓着了 其实就是形状与形状之间的交、并、补运算 高中时数学课上都学过集合中的交集、...

344110
来自专栏HT

纯Shading Language绘制飞机火焰效果

上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫效果的特点,今天我们将用纯Shadin...

24360

扫码关注云+社区

领取腾讯云代金券