翻書動畫實現

最近利用空餘時間實現了一下翻書的動畫：

主要利用了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...