<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>ease on adolsai's echo</title><link>https://adolsai.com/tag/ease/</link><description>Recent content in ease on adolsai's echo</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Tue, 16 Jun 2020 22:52:37 +0800</lastBuildDate><atom:link href="https://adolsai.com/tag/ease/index.xml" rel="self" type="application/rss+xml"/><item><title>Timer动画使用缓动函数</title><link>https://adolsai.com/archives/easings-timing-function.html</link><pubDate>Mon, 01 Jun 2020 15:12:00 +0800</pubDate><guid>https://adolsai.com/archives/easings-timing-function.html</guid><description>&lt;p&gt;&lt;strong&gt;缓动函数&lt;/strong&gt; 通过时间的变化控制参数值变化的速率。&lt;/p&gt;&#10;&lt;blockquote&gt;&#10;&lt;p&gt;现实生活中，物体并不是突然启动或者停止，当然也不可能一直保持匀速移动。就像我们打开抽屉的过程那样，刚开始拉的那一下动作很快，但是当抽屉被拉出来之后我们会不自觉的放慢动作。掉落在地板上的东西，一开始下降的速度很快，后来就会在地板上来回反弹直到停止。&lt;/p&gt;&#10;&lt;/blockquote&gt;&#10;&lt;p&gt;系统自带的缓冲函数如下:&lt;/p&gt;&#10;&lt;pre tabindex="0"&gt;&lt;code&gt;kCAMediaTimingFunctionLinear&#10;&#10;kCAMediaTimingFunctionEaseIn&#10;&#10;kCAMediaTimingFunctionEaseOut&#10;&#10;kCAMediaTimingFunctionEaseInEaseOut&#10;&#10;kCAMediaTimingFunctionDefault&#10;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;使用&lt;code&gt;CAMediaTimingFunctionName&lt;/code&gt;中如下方法可以取出贝塞尔曲线控制点:&lt;/p&gt;&#10;&lt;pre tabindex="0"&gt;&lt;code&gt;- (void)getControlPointAtIndex:(size_t)idx values:(float[_Nonnull 2])ptr; &#10;&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;直接绘制出来是这样的曲线:&lt;/p&gt;&#10;&lt;p&gt;&lt;img src="https://adolsai.com/uploads/2020/06/1179825508.webp" alt="default-timing-function" loading="lazy" decoding="async"&gt;&#10;&lt;/p&gt;&#10;&lt;p&gt;当然系统也提供自定义控制点方法:&lt;/p&gt;&#10;&lt;pre tabindex="0"&gt;&lt;code&gt;/* Creates a timing function modelled on a cubic Bezier curve. The end&#10; * points of the curve are at (0,0) and (1,1), the two points &amp;#39;c1&amp;#39; and&#10; * &amp;#39;c2&amp;#39; defined by the class instance are the control points. Thus the&#10; * points defining the Bezier curve are: &amp;#39;[(0,0), c1, c2, (1,1)]&amp;#39; */&#10;&#10;+ (instancetype)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;&#10;&lt;/code&gt;&lt;/pre&gt;</description></item></channel></rss>