iOS开发之动画篇-基础篇1

基础篇：

一.制作动画的原理

十二个基本的动画原理：网页动画的十二原则（参考全部开源的HTML和CSS代码实现）

二.寻找灵感
1.知名设计师共享平台：Dribbble相当于程序员的gitHub

2.pttrns：手机设计较多

三.制作动画的基础
1.iOS动画UIView动画概述

苹果给开发者的UIView实现API：UIView.animateWithDuration

四.一些动画的特效实现
1.Position

如图，放置三个不同颜色的View，给它们设置position位移动画

swift代码

.swift代码部分

import UIKit

class PositionViewController: UIViewController {

    @IBOutlet weak var blueView: UIView!
    @IBOutlet weak var pickView: UIView!
    @IBOutlet weak var greenView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    override func viewDidAppear(_ animated: Bool) {
        UIView.animate(withDuration: 1) {

            self.blueView.center.x = self.view.bounds.width - self.blueView.center.x;
        }

        UIView.animate(withDuration: 1, delay: 0.5, options: UIViewAnimationOptions.layoutSubviews, animations: {

            self.pickView.center.y = self.view.bounds.height - self.pickView.center.y;

        }, completion: nil)

        UIView.animate(withDuration: 1, delay: 1, options: UIViewAnimationOptions.layoutSubviews, animations: {

            self.greenView.center.x = self.view.bounds.width - self.greenView.center.x;
            self.greenView.center.y = self.view.bounds.height - self.greenView.center.y;
        }, completion: nil)
    }

我们可以使用delay设置动画执行顺序，也如果需要同时开始动画，可以写在一个animate里面。

UIView.animate(withDuration: 1) {

            self.blueView.center.x = self.view.bounds.width - self.blueView.center.x;
            self.pickView.center.y = self.view.bounds.height - self.pickView.center.y;
            self.greenView.center.x = self.view.bounds.width - self.greenView.center.x;
            self.greenView.center.y = self.view.bounds.height - self.greenView.center.y;
        }