웹 프론트엔드 HTML 튜토리얼 iOS 动画Animation-4-4: CALayer子类:CAReplicatorLayer_html/css_WEB-ITnose

iOS 动画Animation-4-4: CALayer子类:CAReplicatorLayer_html/css_WEB-ITnose

Jun 24, 2016 am 11:20 AM

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解。

上一片介绍了CAShpeLayer,并且做了两个示例,如果创造力比较强,就那些东西可以创造出你以前不敢想象的动画效果。

今天我们接着来讲一下CAReplication
CAReplication是一个复制图层,可以按要求将layer复制出若干份,先来看看在CALayer的基础上又增加了那些API

API 描述
instanceCount 重复实例Layer(以下简称实例)的个数
instanceDelay 实例持续的时间
instanceTransform 实例动画
instanceColor 实例颜色
instanceRedOffset 红色偏移
instanceGreenOffset 绿色偏移
instanceBlueOffset 蓝色偏移
instanceAlphaOffset 透明度偏移

·
今天我以一个菊花为例,效果是这样的Demo下载

这个可以作为tableView的下拉刷新的效果,当然我比较懒,是用了一个slider代替了tableView下拉的偏移量。

他的实现过程也很简单,我们就创建一个CAReplicatorLayer吧。

var replicatorLayer = CAReplicatorLayer()replicatorLayer.frame = someView.boundssomeView.layer.addSublayer(replicatorLayer)
로그인 후 복사
  • 解释
    同样someView为storyboard中创建的View
    给定大小,并将其添加到someView的layer上
  • 其实这一个菊花是有很多个重复的矩形layer组成的。那么还需要一个矩形的layer

    var instanceLayer = CALayer()let layerWidth: CGFloat = 10.0let midX = CGRectGetMidX(someView.bounds) - layerWidth / 2instanceLayer.frame = CGRect(x: midX, y: 0.0, width: layerWidth, height: layerWidth * 2.5)instanceLayer.backgroundColor = UIColor.whiteColor().CGColorreplicatorLayer.addSublayer(instanceLayer)
    로그인 후 복사
  • 解释
    这里创建的小矩形layer叫instanceLayer
    将其添加到replicatorLayer上
  • 这样写到这只是在视图上放了一个replicatorLayer,然后又添加了一个矩形layer,接下来就可以开始设置replicatorLayer的属性了

    先设定颜色

    replicatorLayer.instanceColor = UIColor.grayColor().CGColor//        replicatorLayer.instanceRedOffset = 0.0//        replicatorLayer.instanceGreenOffset = 0.0//        replicatorLayer.instanceBlueOffset = 0.0//        replicatorLayer.instanceAlphaOffset = 0.0
    로그인 후 복사
  • 解释
    颜色偏移量自己尝试着调一下,看看有什么变化
  • 在storyboard上创建一个slider,用拖线的方式生成一个势力的人的方法

     @IBAction func slider(sender: UISlider) {        let count: Int = Int(sender.value * 30)        replicatorLayer.instanceCount = count        if sender.value == 1 {            replicatorLayer.instanceDelay = CFTimeInterval(1.0 / Double(count))            addAnimation()        }else{            if faderAnimation != nil {                instanceLayer.opacity = 1.0               instanceLayer.removeAnimationForKey("fader")            }        }        replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(Float(M_PI * 2.0) * sender.value / Float(count)), 0.0, 0.0, 1.0)    }
    로그인 후 복사
  • 解释
    设置instancCount根据slider的值发生变化,int类型
    持续1秒,CFTimeInterval类型,在这里代表的是生成count个layer所需要的时间
    在slider的值不为1.0的时候,将动画去除,并且不透明度设为1
    instanceTransform,设置动画,上面是3D动画绕Z轴旋转的角度
  • 添加动画

    func addAnimation() {        faderAnimation = CABasicAnimation(keyPath: "opacity")        faderAnimation.fromValue = 1.0        faderAnimation.toValue = 0.0        faderAnimation.duration = 1        faderAnimation.repeatCount = Float(Int.max)        instanceLayer.opacity = 0.0        instanceLayer.addAnimation(faderAnimation, forKey: "fader")    }
    로그인 후 복사

    动画我就不解释,想了解动画的请看本专题下之前的文章

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    뜨거운 기사 태그

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

    웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

    웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

    & lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

    & lt; meter & gt의 목적은 무엇입니까? 요소?

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

    내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? 내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? Mar 18, 2025 pm 02:39 PM

    내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까?

    & lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

    & lt; datalist & gt의 목적은 무엇입니까? 요소?

    See all articles