CAShapeLayer之strokeStart和strokeEnd屬性研究
galshir-todo-list-swipe.gif
最近利用閑暇在研究上面的這個(gè)動(dòng)畫(huà)破衔，因?yàn)楸旧韺?duì)動(dòng)畫(huà)沒(méi)有太深入的研究。
該動(dòng)畫(huà)是來(lái)自一個(gè)設(shè)計(jì)師的設(shè)計(jì)作品：https://dribbble.com/shots/3959132-Todo-List-Swipe-To-Check
覺(jué)得很nice
在研究這個(gè)動(dòng)畫(huà)的過(guò)程中涉及到了UIBezierPath钱烟，CAKeyframeAnimation，CAShapeLayer，CATransaction等系統(tǒng)類(lèi)
先不表這個(gè)動(dòng)畫(huà)的思路
本文單開(kāi)是為了介紹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.
- 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í)無(wú)路徑
strokeStart = 0 時(shí) 畫(huà)出一條完整的路徑般哼。
效果就是一條從路徑終點(diǎn)到起點(diǎn)慢慢的出現(xiàn)
- keyPath = strokeEnd吴汪，keytimes=[@"0", @"1"]；
- values = [@"0",@"1"];
strokeStart默認(rèn)為0蒸眠，strokeEnd從 0-1漾橙，
strokeEnd=0 時(shí)，無(wú)路徑楞卡，
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í)焦除，無(wú)路徑。
效果就是一條路徑終點(diǎn)到起點(diǎn)慢慢的消失
動(dòng)畫(huà)的0-1（fromValue = 0踢京，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示執(zhí)行的方向 和路徑的范圍宦棺。
放出研究到一半的動(dòng)畫(huà)：
QQ20181019-130017-HD.gif
