CAShapeLayer之strokeStart和strokeEnd属性研究

CAShapeLayer之strokeStart和strokeEnd属性研究

galshir-todo-list-swipe.gif

最近利用闲暇在研究上面的这个动画，因为本身对动画没有太深入的研究。
该动画是来自一个设计师的设计作品：https://dribbble.com/shots/3959132-Todo-List-Swipe-To-Check
觉得很nice

在研究这个动画的过程中涉及到了UIBezierPath，CAKeyframeAnimation，CAShapeLayer，CATransaction等系统类

先不表这个动画的思路

本文单开是为了介绍CAShapeLayer的strokeStart和strokeEnd属性

官方文档

• strokeStart
  The relative location at which to begin stroking the path. Animatable.
• strokeEnd
  The relative location at which to stop stroking the path. Animatable.

1. keyPath = strokeStart，keytimes=[@"0", @"1"]；

• values = [@"0",@"1"];
  strokeEnd默认为1，strokeStart：0~1
  strokeStart = 0 时有一条完整的路径
  strokeStart = 1 时 路径消失。
  效果就是一条从路径起点到终点慢慢的消失
• values = [@"1",@"0"];
  strokeEnd默认为1，strokeStart从 1 到 0 ，
  strokeStart = 1 时无路径
  strokeStart = 0 时 画出一条完整的路径。
  效果就是一条从路径终点到起点慢慢的出现

2. keyPath = strokeEnd，keytimes=[@"0", @"1"]；

• values = [@"0",@"1"];
  strokeStart默认为0，strokeEnd从 0-1，
  strokeEnd=0 时，无路径，
  strokeEnd=1 时，一条完整路径。
  效果就是一条路径起点到终点慢慢的出现
• values = [@"1",@"0"];
  strokeStart默认为0，strokeEnd从 1-0，
  strokeEnd=1 时，有路径，
  strokeEnd=0 时，无路径。
  效果就是一条路径终点到起点慢慢的消失

效果图如下：

如果图片加载失败，请点击我.gif

动画的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示执行的方向 和路径的范围。

放出研究到一半的动画：

QQ20181019-130017-HD.gif