最近利用空餘時間實現了一下翻書的動畫：
主要利用了3個方面的東西：
1：canvas的clip方法
2：設定path路徑，這其中包括了bezier函式的理解
3：繪圖原理參考： 此大神
廢話不多說，直接原始碼吧
import android.animation.animator;
import android.animation.valueanimator;
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.path;
import android.graphics.porterduff;
import android.graphics.porterduffxfermode;
import android.graphics.region;
import android.text.layout;
import android.text.staticlayout;
import android.text.textpaint;
import android.util.attributeset;
import android.view.motionevent;
import android.view.view;
/** * created by kxdoffice on 2015/12/30.
*/public class clippingtest extends view
public clippingtest(context context, attributeset attrs)
private void init()
@override
protected void ondraw(canvas canvas) else
}@override
public boolean ontouchevent(motionevent event)
if (event.getaction() == motionevent.action_move)
if (event.getaction() == motionevent.action_up)
//postinvalidate();
}return true;
}private void clipstart()
});clipanim.addlistener(new animator.animatorlistener()
@override
public void onanimationend(animator animation)
}@override
public void onanimationcancel(animator animation)
@override
public void onanimationrepeat(animator animation)
});clipanim.setduration(900);
clipanim.start();
}private float mybezierx(float value)
private float mybeziery(float value)
/*** 內部類 point
*/private class point
public int getx()
public void setx(int x)
public int gety()
public void sety(int y) }}
ul li 3 實現翻書動畫效果
按慣例，上gif 重現 codepen.io anon pen jj 這是我今天參加面試時候，面試官讓我做的一道題，面試官坐我旁邊看我現場做，然而我比較菜，回來後才做出來 來看看html部分 由於li是inline block元素，所有沒有寫li的閉合，寫了的話每個li之間會有4px的間距，不寫瀏覽...
ul li 3 實現翻書動畫效果
按慣例，上gif 重現 這是我今天參加面試時候，面試官讓我做的一道題，面試官坐我旁邊看我現場做，然而我比較菜，回來後才做出來 來看看html部分 由於li是inline block元素，所有沒有寫li的閉合，寫了的話每個li之間會有4px的間距，不寫瀏覽器也會自動補全。css部分 body ul l...
Unity Shader實現翻書效果
這裡就隨便用的一張紋理了，我們還是稱為 翻木板 吧，哈哈。實現過程 其實這個效果實現起來還是挺簡單的，大概思路其實就是讓所有頂點都繞z軸旋轉，並且通過正余弦使之帶有一點弧度。下面開始讓我們一步一步的實現該效果。首先開啟unity新建乙個工程，場景，並且建立乙個名為openbookeffect的sha...