• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

iOSSwift实现图片点击缩放回弹动画

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果就是下面这个样子:

思路借鉴的是MZTimerLabel,有想过做一个自定义的ImageView,但那样的话之前view用必须要改代码,索性就按照MZTimerLabel这个方式实现,简单易用,从简从俗

我的调用方式

1.CollectionViewCell初始化的时候调用ZZAnimateScaleImg初始化方法
var animateScaleImg: ZZAnimateScaleImg?
override func awakeFromNib() {
super.awakeFromNib()
animateScaleImg = ZZAnimateScaleImg(imgView: imageIcon)
}


2.CollectionView 选中事件中出发动画行为

func collectionView(_ collectionView: UICollectionView, 
shouldHighlightItemAt indexPath: IndexPath) -> Bool {
        if let suiteGoodsDetailCell = collectionView.cellForItem
        (at: indexPath) as? SuiteGoodsDetailCell{
            suiteGoodsDetailCell.animateScaleImg?.touchBeganWithScale()
            mSuiteCellDetail?.openSuiteBuyConfirm()
        }
        return true
}
    
func collectionView(_ collectionView: UICollectionView, 
didUnhighlightItemAt indexPath: IndexPath) {
        if let suiteGoodsDetailCell = collectionView.cellForItem
            (at: indexPath) as? SuiteGoodsDetailCell{
            suiteGoodsDetailCell.animateScaleImg?.touchEndWithScale()
        }
    }

3.CollectionView deinit清理资源
deinit {
animateScaleImg?.removeAnimaton()
}

使用方式:

  • 调用者初始化变量
    var animateScaleImg: ZZAnimateScaleImg?
    animateScaleImg = ZZAnimateScaleImg(imgView: imageIcon)

  • 动画调用
    animateScaleImg?.touchBeganWithScale()
    animateScaleImg?.touchEndWithScale()

  • 调用者释放
    调用者deinit时清理animation对象
    deinit {
    animateScaleImg?.removeAnimaton()
    }

//
//  ZZAnimateScaleImg.swift
//
//  实现点击之后图片缩小然后在复原的动画效果
//
//  var animateScaleImg: ZZAnimateScaleImg?
//
//  Created by buoge on 2017/4/21.
//



import Foundation

class ZZAnimateScaleImg: NSObject,CAAnimationDelegate {
    
    private var isAnimation = false
    private var mImageView:UIImageView?
    private var imageAnimation: CAKeyframeAnimation?
    
    init(imgView: UIImageView) {
        self.mImageView = imgView
    }
    
    //CAAnimationDelegate
    func animationDidStart(_ anim: CAAnimation) {
        isAnimation = true
    }
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if flag {
            isAnimation = false
        }
    }
    
    // 点击缩小
    func touchBeganWithScale() {
        if !isAnimation {
            UIView.animate(withDuration: 0.1, delay: 0, options: .curveEaseInOut, animations: { [weak self] in
                self?.mImageView?.transform = CGAffineTransform(scaleX: 0.93, y: 0.93)
                }, completion: nil)
        }
    }
    
    // resetScale
    func restScale() {
        if !isAnimation {
            mImageView?.transform = CGAffineTransform(scaleX: 1, y: 1)
        }
    }
    
    // 回弹
    func touchEndWithScale() {
        if !isAnimation {
            restScale()
            startAnimation()
        }
    }
    
    // 跳动一下的效果
    private func startAnimation() {
        imageAnimation = CAKeyframeAnimation(keyPath: "transform")
        let scale1 = CATransform3DMakeScale(0.95, 0.95, 1)
        let scale2 = CATransform3DMakeScale(0.98, 0.98, 1)
        let scale3 = CATransform3DMakeScale(1, 1, 1)
        imageAnimation?.values = [scale1,scale2,scale3]
        imageAnimation?.keyTimes = [0.05,0.2,1]
        imageAnimation?.calculationMode = kCAFilterLinear
        imageAnimation?.duration = 0.2
        imageAnimation?.repeatCount = 1
        imageAnimation?.delegate = self
        mImageView?.layer.add(imageAnimation!, forKey: "imageViewEffect")
    }
    
    //释放
    func removeAnimaton(){
        isAnimation = false
        imageAnimation?.delegate = nil
        mImageView?.layer.removeAllAnimations()
    }
    
    
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Swift]LeetCode1109.航班预订统计|CorporateFlightBookings发布时间:2022-07-14
下一篇:
Swift新手教程12-可选链发布时间:2022-07-14
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap