您的位置：首页 > 其它

[翻译] AnimatedPath 动画路径（持续更新）

2014-04-06 06:50 302 查看



AnimatedPath
动画路径

感谢原作者分享精神，有空补上使用教程

https://github.com/twotoasters/AnimatedPath

AnimatedPathexploresusingthe
CAMediaTiming
protocoltointeractivelycontrolthedrawingofapath.
AnimatedPath尝试使用CAMediaTiming协议来控制绘制一条路径。

Basicusage
基本使用方法

Step1:DrawaPath
第一步：绘制一条路径

Taparoundthescreentoaddpointstoapath.点击屏幕来给路径添加点

Dragexistingpointstomovethem.拖动存在的点

Tapandholdexistingpointstoremovethem.长按着一个点来删除这个点

Step2:Animate
第二步：动画

Thepathisrenderedusinga
CAShapeLayer
with
speed==0
.

Thelayerhasananimationforits
strokeEnd
keypathwitha
fromValue
of0anda
toValue
of1.

Sincethelayer's
speed==0
,adjustingthelayer's
timeOffset
controlsthetimeatwhichtheanimationisrendered.

Theslideratthetopofthescreenadjuststhelayer's
timeOffset
.

使用CAShapeLayer来渲染路径，设置speed=0

这个layer用strokeEnd作为关键帧路径，其值从0到1变化

当layer的speed为0时，操作layer的timeOffset来控制时间，动画就是通过这个来渲染的

屏幕上方的slider控制器操作着layer的timeOffset

GettingtheSetupRight
如何正确的设置

Themostdifficultpartofputtingthisexampletogetherwasunderstandinghowtoaddtheanimationtothelayerandstillbeabletocontroltheanimation'sprogressviathe
timeOffset
.Here'swhatworked:
最难的部分就是怎么把动画加进layer中去，而且，还能够控通过timeOffset来控制动画的百分比进度，以下代码描述了怎么运作的：

CABasicAnimation*animation=[CABasicAnimationanimationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];


animation.fromValue=@0.0;

animation.toValue=@1.0;

animation.removedOnCompletion=NO;

animation.duration=kDuration;


[self.pathBuilderView.pathShapeView.shapeLayeraddAnimation:animationforKey:NSStringFromSelector(@selector(strokeEnd))];

self.pathBuilderView.pathShapeView.shapeLayer.speed=0;

self.pathBuilderView.pathShapeView.shapeLayer.timeOffset=0.0;

[CATransactionflush];

self.pathBuilderView.pathShapeView.shapeLayer.timeOffset=kInitialTimeOffset;

Theendresultofthisapproachisthattheanimationhasa
beginTime
of0andtheshapelayerrendersitattime
kInitialTimeOffset
.

结果呢，就是动画有一个beginTime，从0开始，然后，shapelayer就根据kInitialTimeOffset来渲染。

The
[CATransactionflush]
isrequiredbecauseitforcesthesystemtogivetheanimationaddedtothelayera
beginTime
.Theanimation's
beginTime
iscalculatedbyaddingitsinitialvalue(itsvaluebeforebeingaddedtothelayer)tothelayer'scurrenttime.Thisiswhythelayer's
timeOffset
mustbesetto0ratherthan
kInitialTimeOffset
whentheanimationisadded.Otherwise,theanimation's
beginTime
willhavealreadytaken
kInitialTimeOffset
intoaccountsuchthattheanimationisaddedtothetimerange
(kInitialTimeOffset,kInitialTimeOffset+kDuration)
insteadof
(0,kDuration)
.

这个方法[CATransactionflush]是必须的，因为，他能够强制的让系统给添加了动画的layer一个beginTime。这个动画的beginTime是添加了layer的起始值，这就是为什么layer的timeOffset必须设置成0，而不是kInitalTimeOffset。所以，这个动画的beginTime会考虑到kInitialTimeOffset，然后他的时间就被设置成了（kIntialTimeOffset,kInitialTimeOffset+kDuration），而不是（0，kDuration）【能力有限，此段翻译不准，见谅】

MoreInfo
ThisexamplewasinspiredbyControllingAnimationTimingbyDavidRnnqvist

Apple'sTiming,Timespaces,andCAAnimationisahelpfulresource.

这个例子的灵感来自于ControllingAnimationTimingbyDavidRnnqvist

苹果的Timing,Timespaces,andCAAnimation也很管用
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航