iOS動畫之3D動畫

3D是在原來的基礎上修改z軸,實現(xiàn)投影、拉伸等3D喜愛效果霞溪,iOS提供了一個3D變幻矩陣(CATtransform3D)瑞侮,通過這個矩陣可實現(xiàn)各種透視、拉伸胯杭、移動和縮放效果。
一、相關概念
1练俐、錨點,其指定了bounds相對于position的值冕臭,同時也是變化時的中心點腺晾,默認為(0.5,0.5)辜贵,
2悯蝉、矩陣變化的原理,CATransform3D實質上是定義了一個三維變換,源碼如下
public init(m11: CGFloat(x縮放), m12: CGFloat(y切變), m13: CGFloat, m14: CGFloat, m21: CGFloat(x切變), m22: CGFloat(y縮放), m23: CGFloat, m24: CGFloat, m31: CGFloat, m32: CGFloat, m33: CGFloat, m34: CGFloat(透視), m41: CGFloat(x平移), m42: CGFloat(y平移), m43: CGFloat(z平移), m44: CGFloat)

二念颈、3D動畫效果
3D旋轉效果:

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        UIView.beginAnimations(nil, context: nil)
        UIView.setAnimationDuration(3)
       //旋轉
        imgV!.layer.transform = CATransform3DMakeRotation(CGFloat(Double.pi/2), 1, 1, 1)
        //縮放
//        imgV!.layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1)
        //平移
//        imgV!.layer.transform = CATransform3DMakeTranslation(100, 100, 100)

        UIView.commitAnimations()
    }

三泉粉、Cover Flow 3D效果


F28129BF-D5FA-44C8-8008-19103FC186D7.png
import UIKit
class MyCoverFlowController: UIViewController {
    var imageViewArr:NSMutableArray?
    let imageV1:UIImageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 250))
    let imageV2:UIImageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 250))
    let imageV3:UIImageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 250))
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        imageViewArr = [imageV1,imageV2,imageV3];
        for i in 0...(imageViewArr?.count)!-1 {
            let imageV = imageViewArr?.object(at: i) as! UIImageView
            let path:String = "\((i+1)*1000)"
            imageV.image = UIImage(named: path)
            imageV.layer.anchorPoint.y = 0.0
            view.addSubview(imageV)
        }
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        for i in 0...(imageViewArr?.count)!-1 {
            var imageTransform:CATransform3D = CATransform3DIdentity
            imageTransform.m34 = -0.005;
            imageTransform = CATransform3DTranslate(imageTransform, 0.0, 150.0, 0.0)
            imageTransform = CATransform3DScale(imageTransform, 0.95, 0.6, 1.0)
            if i==0 {
                imageTransform = CATransform3DRotate(imageTransform, CGFloat(Double.pi/8), 0.0, 1.0, 0.0)
            }else if i==1 {
                imageTransform = CATransform3DRotate(imageTransform, CGFloat(-Double.pi/8), 0.0, 1.0, 0.0)
            }
            let imageView:UIImageView = imageViewArr?.object(at: i) as! UIImageView
            let animation = CABasicAnimation(keyPath: "transform")
            animation.fromValue = NSValue(caTransform3D: imageView.layer.transform)
            animation.toValue = NSValue(caTransform3D: imageTransform)
            animation.duration = 3
        /**************************/
            let ani:CABasicAnimation = CABasicAnimation()
            ani.keyPath = "position"
            ani.duration = 3
            if i==0{
                ani.toValue = NSValue(cgPoint: CGPoint(x: 100, y: 10))
            } else if i==1 {
                ani.toValue = NSValue(cgPoint: CGPoint(x: 300, y: 10))
            } else {
                ani.toValue = NSValue(cgPoint: CGPoint(x: 200, y: 20))
            }
            let anG:CAAnimationGroup = CAAnimationGroup()
            anG.duration = 3
            anG.repeatCount = 1
            anG.isRemovedOnCompletion = false
            anG.fillMode = CAMediaTimingFillMode.forwards
            anG.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            anG.animations = [animation,ani]
            imageView.layer.add(anG, forKey: "\(i)")
        }
    }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子嗡靡,更是在濱河造成了極大的恐慌跺撼,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件讨彼,死亡現(xiàn)場離奇詭異歉井,居然都是意外死亡,警方通過查閱死者的電腦和手機哈误,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門哩至,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蜜自,你說我怎么就攤上這事菩貌。” “怎么了重荠?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵箭阶,是天一觀的道長。 經(jīng)常有香客問我戈鲁,道長仇参,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任婆殿,我火速辦了婚禮诈乒,結果婚禮上,老公的妹妹穿的比我還像新娘婆芦。我一直安慰自己怕磨,他們只是感情好,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布寞缝。 她就那樣靜靜地躺著癌压,像睡著了一般。 火紅的嫁衣襯著肌膚如雪荆陆。 梳的紋絲不亂的頭發(fā)上滩届,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天,我揣著相機與錄音被啼,去河邊找鬼帜消。 笑死,一個胖子當著我的面吹牛浓体,可吹牛的內容都是我干的泡挺。 我是一名探鬼主播,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼命浴,長吁一口氣:“原來是場噩夢啊……” “哼娄猫!你這毒婦竟也來了贱除?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤媳溺,失蹤者是張志新(化名)和其女友劉穎月幌,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悬蔽,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡扯躺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蝎困。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片录语。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖禾乘,靈堂內的尸體忽然破棺而出澎埠,到底是詐尸還是另有隱情,我是刑警寧澤盖袭,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布失暂,位于F島的核電站,受9級特大地震影響鳄虱,放射性物質發(fā)生泄漏。R本人自食惡果不足惜凭峡,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一拙已、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧摧冀,春花似錦倍踪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至椒惨,卻和暖如春缤至,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背康谆。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工领斥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沃暗。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓月洛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親孽锥。 傳聞我的和親對象是個殘疾皇子嚼黔,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內容