iOS Swift 给动画添加点击事件

image.png

当前View里面有两个View,绿色的bigView和红色的smallView,smallView在bigView里面。现在让bigView执行一段移动动画,然后给bigView添加点击事件,发现点击事件无效。

因为iOS动画中的View点击事件无效

原因是iOS里几乎所有的View动画是都基于layer实现的,frame在动画开始会直接变成终点状态。动画过程中bigView的frame不会变化,也不能接收点击事件。添加点击事件可以在bigView的父view也就是当前view中重写touchesBegan() 方法,判断点击位置在哪个view里面。

添加完touchesBegan(),会发现点击bigView动画这个方法并不会触发,原因是动画中的layer会屏蔽触摸事件。这时有两种方法(效果相同):

  • 给UIView.animate() 方法添加options: .allowUserInteraction参数
  • 设置bigView的isUserInteractionEnabled = false

这样点击事件就会传递给当前view

class OurView: UIView {
    
    lazy var bigView = UIView(frame: CGRect(x: 100, y: 200, width: 200, height: 200))
    
    lazy var smallView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        
        bigView.backgroundColor = .green
        addSubview(bigView)
        
        smallView.backgroundColor = .red
        bigView.addSubview(smallView)
        
        let tap = UITapGestureRecognizer(target: self, action: #selector(doClick))
        bigView.isUserInteractionEnabled = true
        bigView.addGestureRecognizer(tap)
        
        UIView.animate(withDuration: 100, delay: 0, options: .allowUserInteraction) {
            self.bigView.transform = CGAffineTransform(translationX: 0, y: 300)
        } completion: { _ in

        }

    }
    
    @objc func doClick() {
        print("clicked")
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

接下来判断点击位置在哪个View里。
touch.location(in: self)获取触摸点在当前view中的位置;用bigView.layer.presentation()?.frame可以获取动画中的layer的frame。

  • 如果要判断是否点击了bigView,直接用movingFrame.contains(point)即可。
  • 如果要判断是否点击了smallView,也就是动画中的view的子view,那么需要进行坐标转换才能得到smallView的实时frame:用offsetBy方法转换smallView.frame,最后用smallFrame.contains(point)判断:
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            var point = touch.location(in: self)
            if let movingFrame = bigView.layer.presentation()?.frame {
                let f = smallView.frame
                var smallFrame = f.offsetBy(dx: movingFrame.minX, dy: movingFrame.minY)
                let contains = smallFrame.contains(point)
                print("smallView touches: \(contains)")
            }
            break;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容