在 iOS 中实现谷歌灭霸彩蛋

第一个rotate和translate决定了最终的位置和运动轨迹，至于第二个rotate作用，只是叠加第一个rotate的值作为最终的旋转弧度，这里刚好为0也就是不旋转。那么在iOS中该如何实现相似的运动轨迹呢?可以利用UIBezierPath, CAKeyframeAnimation的属性path可以指定这个UIBezierPath为动画的运动轨迹。确定起点和实际终点作为贝塞尔曲线的起始点和终止点，那么如何确定控制点?好像可以将“预想”的终点(下图中的(0,-1))作为控制点。

图6 将“预想”的终点作为控制点的贝塞尔曲线，看起来和CSS中的运动轨迹差不多

扩展问题

通过文章中描述的方式生成的贝塞尔曲线是否与CSS中的动画轨迹完全一致呢?

现在可以给视图添加动画了：

let layer = CALayer() 
    layer.frame = bounds 
    layer.contents = image.cgImage 
    self.layer.addSublayer(layer) 
    let centerX = Double(layer.position.x) 
    let centerY = Double(layer.position.y) 
    let radian1 = Double.pi / 12 * Double.random(in: -0.5..<0.5) 
    let radian2 = Double.pi / 12 * Double.random(in: -0.5..<0.5) 
    let random = Double.pi * 2 * Double.random(in: -0.5..<0.5) 
    let transX = 60 * cos(random) 
    let transY = 30 * sin(random) 
    //1:  
    // x' = x*cos(rad) - y*sin(rad) 
    // y' = y*cos(rad) + x*sin(rad) 
    let realTransX = transX * cos(radian1) - transY * sin(radian1) 
    let realTransY = transY * cos(radian1) + transX * sin(radian1) 
    let realEndPoint = CGPoint(x: centerX + realTransX, y: centerY + realTransY) 
    let controlPoint = CGPoint(x: centerX + transX, y: centerY + transY) 
    //2: 
    let movePath = UIBezierPath() 
    movePath.move(to: layer.position) 
    movePath.addQuadCurve(to: realEndPoint, controlPoint: controlPoint) 
    let moveAnimation = CAKeyframeAnimation(keyPath: "position") 
    moveAnimation.path = movePath.cgPath 
    moveAnimation.calculationMode = .paced 
    //3:                  
    let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation") 
    rotateAnimation.toValue = radian1 + radian2 
    let fadeOutAnimation = CABasicAnimation(keyPath: "opacity") 
    fadeOutAnimation.toValue = 0.0 
    let animationGroup = CAAnimationGroup() 
    animationGroup.animations = [moveAnimation, rotateAnimation, fadeOutAnimation] 
    animationGroup.duration = 1 
    //4: 
    animationGroup.beginTime = CACurrentMediaTime() + 1.35 * Double(i) / Double(imagesCount) 
    animationGroup.isRemovedOnCompletion = false 
    animationGroup.fillMode = .forwards 
    layer.add(animationGroup, forKey: nil) 

• //1: 实际的偏移量旋转了radian1弧度，这个可以通过公式x' = x*cos(rad) - y*sin(rad), y' = y*cos(rad) + x*sin(rad)算出
• //2: 创建UIBezierPath并关联到CAKeyframeAnimation中
• //3: 两个弧度叠加作为最终的旋转弧度
• //4: 设置CAAnimationGroup的开始时间，让每层Layer的动画延迟开始

结尾

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!