ios应用打开动画 iphone的app打开动画

转载

mob64ca140beea5 2023-08-08 10:46:32

文章标签 ios应用打开动画 iOS swift 动画移动开发 文章分类 iOS 移动开发

动画在iOS开发中有举足轻重的作用，通过动画你可以让你的用户了解他究竟干了什么，下面是一个简单的演示动画：

ios应用打开动画 iphone的app打开动画_iOS

现在跟着我的步伐一起来学吧

给动画添加添加持续时间

首先创建一个新的swift Playground，给他命名为“FlyingSquares”，接着要导入“PlaygroundSupport”。

import UIKit
import PlaygroundSupport

下面我们要建立一个画布来让我们能够在上面画画：

// --- 创建一个大小都为为500的画布 ---
let liveViewFrame = CGRect(x: 0, y: 0, width: 500, height: 500)
let liveView = UIView(frame: liveViewFrame)
liveView.backgroundColor = .red // 注意为了方便看画布在哪里，我在这里把画布设为红色

PlaygroundPage.current.liveView = liveView

当你明白画布在哪里之后就把背景色改成白色吧

liveView.backgroundColor = .white

接着我们在画布里创建一个正方形

let smallFrame = CGRect(x: 0, y: 0, width: 100, height: 100)
let square = UIView(frame: smallFrame)
square.backgroundColor = .red

liveView.addSubview(square) // 把正方形添加到画布里

好嘞，前期工作完成了，现在我们来添加一个小动画让他变成橘黄色通过使用 UIView.animate(withDuration:) 来实现

UIView.animate(withDuration: 3.0) {
	square.backgroundColor = .orange
}

如果你现在运行一下代码你将会看到正方形是如何变色的

ios应用打开动画 iphone的app打开动画_swift_02

当然除了变色，你还可以使它动起来。例如：我们让它放大地跑到中间去：

UIView.animate(withDuration: 3.0) {
    square.backgroundColor = .orange
    square.frame = CGRect(x: 150, y: 150, width: 250, height: 250) // 通过新的位置来让正方形移到想要去的地方
}

通过添加一行新代码你可以看到

ios应用打开动画 iphone的app打开动画_移动开发_03

使用闭包来添加新动画

但是呢，如果你想要让它再从中心点到右上角要怎么搞呢？
如果你只是单词地再添加一个方法：

UIView.animate(withDuration: 3.0) {
    square.backgroundColor = .red
    square.frame = CGRect(x: 400, y: 0, width: 100, height: 100) // 让正方形去往右上角
}

运行的时候你就会发现它居然直接向右边行走了，根本没有到达中间点，这个时候要怎么办呢？别慌，我们还有闭包可以用，在一开始我们省略了 UIView.animate(withDuration: , animations: ) 里面的一个参数，利用第二个参数我们就可以添加下一个动画了

UIView.animate(withDuration: 3.0, animations: {
   square.backgroundColor = .orange   // 改变正方形的颜色
   square.frame = CGRect(x: 150, y: 150, width: 250, height: 250) // 让正方形移动到中间位置
}) { (_) in  // 使用闭包来完成下一个动画
   UIView.animate(withDuration: 3.0) {
   square.backgroundColor = .red   // 改变正方形的颜色
   square.frame = CGRect(x: 400, y: 0, width: 100, height: 100) // 让正方形从中间移动到右上角
   }
}

运行一下就会看到我们想要的效果啦

ios应用打开动画 iphone的app打开动画_ios应用打开动画_04

添加延迟或自定义选项

注意到animate除了有两个参数的还可以有四个参数的 UIView.animate(withDuration: , delay: , options: , animations: , completion: ) 通过此方法我们可以让动画持续播放。其中，delay参数表示延迟动画开始的秒数。 options参数是用于自定义动画的预定义选项数组。”

例如，我们让它延迟2秒并且一直重复，我们可以这么做：

UIView.animate(withDuration: 3.0, delay: 2.0, options: [.repeat], animations: {
    square.backgroundColor = .orange
    square.frame = CGRect(x: 400, y: 400, width: 100, height: 100)
    }, completion: nil)

运行的时候你就可以看到正方形在不断重复一个动作：

ios应用打开动画 iphone的app打开动画_iOS_05

变换属性

swift提供了三个常用的图形变换方法，具体为：Scale（按比例扩大或缩小）、Rotate（旋转）、Translate（改变位置）

ios应用打开动画 iphone的app打开动画_移动开发_06

它们都申明在CGAffineTransform这个结构体里面，具体的用法如下：

UIView.animate(withDuration: 3.0) {

    square.backgroundColor = .orange
    
    let scaleTransform = CGAffineTransform(scaleX: 2.0, y: 2.0) // 按比例放大2倍
    let rotateTransform = CGAffineTransform(rotationAngle: .pi) // 此处设定旋转角度，pi为180度，想要什么角度就进行简单的乘法或除法即可
    let translateTransform = CGAffineTransform(translationX: 200, y: 200) // 设定最终移动到哪一个位置
    let comboTransform = scaleTransform.concatenating(rotateTransform).concatenating(translateTransform) // 将所有效果都组合起来
    
    square.transform = comboTransform    
}

运行的时候你将会看到：

ios应用打开动画 iphone的app打开动画_swift_07

使用identity来撤销刚刚实现的动画

在刚刚的示例里面我们改变了正方形的位置、颜色，还让它旋转到达中间，但是如果我们要在让它回去要怎么办呢？如果再写一遍相同的代码有些繁琐，CGAffineTransform提供了一个好用的属性identity来帮我们解决这个问题。

和一开始的方法一样，我们通过闭包来添加让正方形回到原位的动画：

UIView.animate(withDuration: 3.0, animations: {

    square.backgroundColor = .orange
    let scaleTransform = CGAffineTransform(scaleX: 2.0, y: 2.0)
    let rotateTransform = CGAffineTransform(rotationAngle: .pi)
    let translateTransform = CGAffineTransform(translationX: 200, y: 200)
    let comboTransform = scaleTransform.concatenating(rotateTransform).concatenating(translateTransform)
    square.transform = comboTransform
    
}) { (_) in
    UIView.animate(withDuration: 3.0) {
        square.transform = CGAffineTransform.identity // 注意identity只能撤销使用CGAffineTransform产生的效果，无法修改正方形的颜色
    }
}

运行一下你将会看到：

ios应用打开动画 iphone的app打开动画_swift_08