CAShapeLayer之strokeStart和strokeEnd屬性研究

galshir-todo-list-swipe.gif

最近利用閑暇在研究上面的這個(gè)動(dòng)畫，因?yàn)楸旧韺?dòng)畫沒有太深入的研究。
該動(dòng)畫是來自一個(gè)設(shè)計(jì)師的設(shè)計(jì)作品：https://dribbble.com/shots/3959132-Todo-List-Swipe-To-Check
覺得很nice

在研究這個(gè)動(dòng)畫的過程中涉及到了UIBezierPath，CAKeyframeAnimation，CAShapeLayer，CATransaction等系統(tǒng)類

先不表這個(gè)動(dòng)畫的思路

本文單開是為了介紹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默認(rèn)為1，strokeStart：0~1
  strokeStart = 0 時(shí)有一條完整的路徑
  strokeStart = 1 時(shí) 路徑消失。
  效果就是一條從路徑起點(diǎn)到終點(diǎn)慢慢的消失
• values = [@"1",@"0"];
  strokeEnd默認(rèn)為1，strokeStart從 1 到 0 ，
  strokeStart = 1 時(shí)無路徑
  strokeStart = 0 時(shí) 畫出一條完整的路徑。
  效果就是一條從路徑終點(diǎn)到起點(diǎn)慢慢的出現(xiàn)

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

• values = [@"0",@"1"];
  strokeStart默認(rèn)為0，strokeEnd從 0-1，
  strokeEnd=0 時(shí)，無路徑，
  strokeEnd=1 時(shí)，一條完整路徑。
  效果就是一條路徑起點(diǎn)到終點(diǎn)慢慢的出現(xiàn)
• values = [@"1",@"0"];
  strokeStart默認(rèn)為0，strokeEnd從 1-0，
  strokeEnd=1 時(shí)，有路徑，
  strokeEnd=0 時(shí)，無路徑。
  效果就是一條路徑終點(diǎn)到起點(diǎn)慢慢的消失

效果圖如下：

如果圖片加載失敗，請點(diǎn)擊我.gif

動(dòng)畫的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示執(zhí)行的方向 和路徑的范圍。

放出研究到一半的動(dòng)畫：

QQ20181019-130017-HD.gif