Playground에 의한 코딩입니다.
첫 분은 아래를 참고하십시오.

제1회: 【초보자용】Swift3로 폭속 코딩 그 1(화면 작성과 Snippets의 사용법)
제2회: 【초보자용】Swift3로 폭속 코딩 그 2(UIView와 문자 표시)
제3회: 【초보자용】Swift3로 폭속 코딩 그 3(버튼 클릭과 이벤트)

이미지 로드

이번에 사용하는 이미지입니다. cat.png


왼쪽 창을 엽니다.


리소스 그룹을 마우스 오른쪽 버튼으로 클릭하여 cat.png 이미지를 추가합니다.


추가 후 UIImage 클래스에서 로드하고 UIImageView에서 이미지를 볼 수 있습니다.

// 画像を表示する
let img: UIImage = UIImage(named: "cat.png")!
let imgView: UIImageView = UIImageView(frame:  CGRect(x: 0, y: 30, width: 80, height: 80))
imgView.image = img
self.view.addSubview(imgView)

소스 코드

이번의 모든 소스 코드입니다.

import UIKit
import CoreImage


class ViewController: UIViewController {


    override func viewDidLoad() {
        super.viewDidLoad()


        // 画像を設定する
        var img: UIImage = UIImage(named: "cat.png")!

        // セピア(フィルター処理)
        let sepiaFilter = CIFilter(name: "CISepiaTone")
        sepiaFilter?.setValue(CIImage(image:img), forKey: kCIInputImageKey)
        sepiaFilter?.setValue(0.8, forKey: kCIInputIntensityKey)
        // UIImageに変換
        img = UIImage(ciImage: sepiaFilter!.outputImage!)


        let imgView: UIImageView = UIImageView(frame:  CGRect(x: 0, y: 30, width: 80, height: 80))
        imgView.image = img


        // スケール行列を生成する
        let transformScale:CGAffineTransform = CGAffineTransform(scaleX: 0.75, y: 0.75)
        // 回転行列を生成する
        let transformRot:CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat((30.0 * M_PI) / 180.0))
        // 平行移動行列を生成する
        let transformTrans:CGAffineTransform = CGAffineTransform(translationX: 100, y: 0);

        // 単位行列を生成する
        var transform:CGAffineTransform = CGAffineTransform.identity
        // スケーリング行列×回転行列×平行移動行列＝縮小して回転して平行移動
        transform = transformScale.concatenating(transformRot);
        transform = transform.concatenating(transformTrans);
        // 逆順だと結果が変わるので注意
        // 平行移動する前の位置を起点に回転してしまう
        //transform = transformTrans.concatenating(transformRot);
        //transform = transform.concatenating(transformScale);

        imgView.transform = transform



        self.view.addSubview(imgView)



        UIView.animate(
            // アニメーションの時間（秒）
            withDuration: 1.0,
            // 遅延時間
            delay: 3.0,
            // バネ係数
            usingSpringWithDamping: 1,

            // 初速度
            initialSpringVelocity: 1.0,

            // 一定の速度
            options: UIViewAnimationOptions.curveLinear,

            animations: { () -> Void in
                // スケール行列を生成する
                let transformScale:CGAffineTransform = CGAffineTransform(scaleX: 0.5, y: 0.5)
                // 回転行列を生成する
                let transformRot:CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat((45.0 * M_PI) / 180.0))
                // 平行移動行列を生成する
                let transformTrans:CGAffineTransform = CGAffineTransform(translationX: 200, y: 0);

                // 単位行列を生成する
                var transform:CGAffineTransform = CGAffineTransform.identity
                // スケーリング行列×回転行列×平行移動行列＝縮小して回転して平行移動
                transform = transformScale.concatenating(transformRot);
                transform = transform.concatenating(transformTrans);


                imgView.transform = transform

            // アニメーション完了時の処理
            }) { (Bool) -> Void in
            print("アニメーション終了")                      
        }

    print(self.view.perform(Selector(("recursiveDescription"))))

    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)


    }

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

}

let window = UIWindow(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
let viewController = ViewController()
viewController.view.backgroundColor = UIColor.white

window.rootViewController = viewController
window.makeKeyAndVisible()

import PlaygroundSupport

PlaygroundPage.current.liveView = window
PlaygroundPage.current.needsIndefiniteExecution = true

미리보기

고양이 이미지가 애니메이션됩니다.

이미지에 필터링

이미지 처리를 하려면 CoreImage 프레임워크를 이용합니다.

import CoreImage

이번에는 다음 줄에서 세피아 필터를 걸고 있습니다.
이미지 처리를 위해서는 CIImage 클래스로 변환하여
이미지 처리 후 UIImage 클래스로 다시 변환하고 있습니다.

// セピア(フィルター処理)
let sepiaFilter = CIFilter(name: "CISepiaTone")
sepiaFilter?.setValue(CIImage(image:img), forKey: kCIInputImageKey)
// フィルタの強さ、かける割合
sepiaFilter?.setValue(0.8, forKey: kCIInputIntensityKey)
// UIImageに変換
img = UIImage(ciImage: sepiaFilter!.outputImage!)

이미지 자세 (스케일, 방향, 위치)

CGAffineTransform 클래스를 사용하여
UIView의 자세를 지정할 수 있습니다.
CGAffineTransform 클래스는 행렬에 의한 변환을 실시합니다.
스케일, 방향, 위치 행렬을 생성하고,
concatenating 메소드로 행렬의 곱셈을 실시하고 있습니다.
행렬에 의한 계산이므로 거는 순서를 잘못하면 결과가 바뀌어 버리는 것에 주의입니다.
보통은 스케일링 행렬×회전 행렬×평행 이동 행렬의 순서에 곱합니다.

// スケール行列を生成する
let transformScale:CGAffineTransform = CGAffineTransform(scaleX: 0.75, y: 0.75)
// 回転行列を生成する
let transformRot:CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat((30.0 * M_PI) / 180.0))
// 平行移動行列を生成する
let transformTrans:CGAffineTransform = CGAffineTransform(translationX: 100, y: 0);

// 単位行列を生成する
var transform:CGAffineTransform = CGAffineTransform.identity
// スケーリング行列×回転行列×平行移動行列＝縮小して回転して平行移動
transform = transformScale.concatenating(transformRot);
transform = transform.concatenating(transformTrans);
// 逆順だと結果が変わるので注意
// 平行移動する前の位置を起点に回転してしまう
//transform = transformTrans.concatenating(transformRot);
//transform = transform.concatenating(transformScale);

imgView.transform = transform

이미지 애니메이션

UIView.animate 메서드에 의해 Tween 애니메이션을 실시하고 있습니다.
withDuration은 애니메이션 시간입니다.
delay는 애니메이션 시작까지의 시간입니다.
usingSpringWithDamping은 스프링 계수입니다. 값이 작을수록 점프가 강해집니다. 0.2등의 값을 넣으면 튀는 것 같은 움직임이 될 것입니다.
initialSpringVelocity는 애니메이션의 첫 속도입니다.
options에는 애니메이션의 속도 변화를 넣습니다. UIViewAnimationOptions 클래스의 파라미터로 지정합니다.

curveLinear : 일정 속도

curveEaseIn : 움직이기 시작이 천천히

curveEaseOut : 움직임 끝이 천천히

curveEaseInOut : 움직임의 시작과 끝이 천천히

animation 메서드는 애니메이션 완료 후 자세를 정의합니다.
시작과 끝의 자세에 대해 보간되고 애니메이션됩니다.

UIView.animate(
            // アニメーションの時間（秒）
            withDuration: 1.0,
            // 遅延時間
            delay: 3.0,
            // バネ係数
            usingSpringWithDamping: 1,

            // 初速度
            initialSpringVelocity: 1.0,

            // 一定の速度
            options: UIViewAnimationOptions.curveLinear,

            animations: { () -> Void in

           　　    // アニメーション完了時の姿勢を定義すると補間される     
            }
// アニメーション完了時の処理
) { (Bool) -> Void in
  print("アニメーション終了")          
}