亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

設(shè)計(jì)背景

在進(jìn)行動(dòng)效設(shè)計(jì)時(shí)，為了達(dá)到符合物理性的效果，經(jīng)常使用緩動(dòng)曲線來(lái)控制元素的運(yùn)動(dòng)速率。

緩動(dòng)曲線包含四大類，分別是線性（linear）、緩入（ease in）、緩出（ease out）和緩入緩出（ease in and out）。除了線性類，其余三大類又可以細(xì)分出二次方緩動(dòng)曲線（Quadratic）、立方緩動(dòng)曲線（Cubic）、指數(shù)緩動(dòng)曲線（Exponential）、正弦緩動(dòng)曲線（Sinusoidal）等子類。

在Origami Studio的Classic Animation?Patch中預(yù)設(shè)了四大類與常用四子類的組合曲線預(yù)設(shè)即：? ?

• Linear
• Quadratic In
• Quadratic Out
• Quadratic In-Out
• Cubic In
• Cubic Out
• Cubic In-Out
• Exponential In
• Exponential Out
• Exponential In-Out
• Sinusoidal In
• Sinusoidal Out
• Sinusoidal In-Out

共13條緩動(dòng)曲線。

設(shè)計(jì)師在設(shè)計(jì)動(dòng)效時(shí)會(huì)根據(jù)不同的場(chǎng)景選用適合的曲線，在交付時(shí)常用三階貝塞爾曲線參數(shù)的形式交付，例：Exponential Out：cubic-bezier(0.19, 1, 0.22, 1);

三階貝塞爾曲線一共有4個(gè)控制點(diǎn)，起始點(diǎn)、結(jié)束點(diǎn)，以及中間的兩個(gè)調(diào)節(jié)點(diǎn)，上述例子中的四個(gè)參數(shù)即為兩個(gè)調(diào)節(jié)點(diǎn)的坐標(biāo)對(duì)應(yīng)為 ( x1, y1, x2, y2 )，圖中粉色為控制點(diǎn)1 P1，湖藍(lán)色為控制點(diǎn)2 P2。

緩動(dòng)曲線的定義域是[0,1]，而其值域滿足前提 f(0)=0,f(1)=1，所以整條曲線出現(xiàn)在0～1的第一象限。

問(wèn)題背景

在以往的交付流程中，為了多端設(shè)備效果統(tǒng)一，一般采用三階貝塞爾曲線的參數(shù)交付，在Android中使用貝塞爾插值器，可以直接使用PathInterpolator類，但是這個(gè)類是在API21增加的，低版本將不適用。我們希望用Android提供的原生方法來(lái)優(yōu)雅的解決緩動(dòng)曲線在Android低版本設(shè)備的體驗(yàn)問(wèn)題！

Android插值器

通過(guò)回溯發(fā)現(xiàn)PathInterpolator類繼承自BaseInterpolator類，BaseInterpolator類實(shí)現(xiàn)了Interpolator接口，而Interpolator接口在Android官方文檔的介紹中已知的間接子類有AccelerateDecelerateInterpolator, AccelerateInterpolator, DecelerateInterpolator, LinearInterpolator 等諸多子類，看起來(lái)是不是和緩動(dòng)曲線很像？

Linear自不用說(shuō)，以DecelerateInterpolator為例，官方是這樣描述的?“An interpolator where the rate of change starts out quickly and and then decelerates.”?和ease out的概念基本一致，同時(shí)該類的帶參構(gòu)造方法參數(shù)為：factor：Degree to which the animation should be eased. Setting factor to 1.0f produces an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the ease-out effect (i.e., it starts even faster and ends evens slower).?所以通過(guò)調(diào)節(jié)factor參數(shù)，我們應(yīng)該就能得到符合我們要求的緩出曲線。而AccelerateDecelerateInterpolator, AccelerateInterpolator, DecelerateInterpolator, LinearInterpolator這些插值器可以直接原生調(diào)用，不存在兼容性問(wèn)題，需要的只是一個(gè)factor參數(shù)。

應(yīng)用到設(shè)計(jì)

從工程結(jié)構(gòu)找到了解決問(wèn)題的方式，但是如何將之前通過(guò)三階貝塞爾曲線參數(shù)交付的動(dòng)效設(shè)計(jì)轉(zhuǎn)化成factor參數(shù)是一個(gè)問(wèn)題。得益于Origami Studio開(kāi)放的Math Expression Patch，讓所有可以通過(guò)數(shù)學(xué)公式描述的效果都可以在Origami Studio中實(shí)現(xiàn)。通過(guò)查看DecelerateInterpolator類的源碼，我們得到了DecelerateInterpolator效果的數(shù)學(xué)公式：

public float getInterpolation(float input) {
????float result;
????if (mFactor == 1.0f) {
????????result = (float)(1.0f - (1.0f - input) * (1.0f - input));
????} else {
????????result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));
????}

????return result;

}

該公式轉(zhuǎn)化到Origami Studio中如下圖：

通過(guò)對(duì)接口的封裝得到了一個(gè)易用的Decelerate Interpolator Patch

我們通過(guò)實(shí)驗(yàn)及對(duì)比，得出了一些常用曲線的factor值：

factor = 1.0? ??Quadratic Out 二次方緩出曲線 factor = 1.5? ??Cubic?Out?立方緩出曲線 factor = 3.0? ??Exponential?Out?指數(shù)緩出曲線

* 緩入曲線以此類推

現(xiàn)在，你只需要告訴工程師你的插值器類型和factor參數(shù)，優(yōu)雅高效的實(shí)現(xiàn)動(dòng)效。

* Origami插值器組件下載見(jiàn)附件

引用

?[1]?pyericz.緩動(dòng)曲線[DB/OL].pxrgo，2017-08-28[2018-05-17].?http://www.pxrgo.com/math/2017/08/28/ease-curve/.

?[2]?Andrey Sitnik.easing[DB/OL].Andrey Sitnik，2012[2018-05-17].?https://easings.net/.

?[3] Juraj Novák.inloop[DB/OL].Juraj Novák，2016[2018-05-17].?https://inloop.github.io/interpolator/.

?[4]?Google.Android Developers[DB/OL].Google，2018[2018-05-17].?https://developer.android.com/.

?[5]?Facebook.Origami?Design[DB/OL].Facebook，2018[2018-05-17].?https://origami.design/