Android常用开源项目(二十六)

Android开发之实现图片翻转的动画效果

1.首先看下运行的效果图

Android开发之实现图片翻转的动画效果

运行效果图一

Android开发之实现图片翻转的动画效果

运行效果图二

Android开发之实现图片翻转的动画效果

运行效果图三

Android开发之实现图片翻转的动画效果

运行效果图四

Android开发之实现图片翻转的动画效果

运行效果图五

2.此例是实现图片的动画翻转,包含四种3D翻转的效果以及一种2D平移效果。在此例中需要实现一个自定义的View类

Android开发之实现图片翻转的动画效果

代码结构图

3.下面给出具体的一个实现步骤

<1>.实现自定义的view类Roll3DView

public class Roll3DView extends View {

private static final String TAG = "TDAct";

private int viewWidth, viewHeight;

private Context context;

private Paint paint;

private Camera camera;

private Matrix matrix;

private float rotateDegree = 0;

//X方向旋转轴 Y方向旋转轴

private float axisX = 0, axisY = 0;

private int partNumber = 1;

private List<Bitmap> bitmapList;

private Bitmap[][] bitmaps;

//滚动方向:1竖直方向 其他为水平方向

private int direction = 1;

int averageWidth = 0, averageHeight = 0;

//滚动模式

private RollMode rollMode = RollMode.SepartConbine;

private int preIndex = 0, currIndex = 0, nextIndex = 0;

private ValueAnimator valueAnimator;

private int rollDuration = 1 * 1000;

//正在翻转

private boolean rolling;

//滚动模式

public enum RollMode {

//3D整体滚动 尾部逐渐分离再合并 各模块依次滚动 百叶窗

Roll2D, Whole3D, SepartConbine, RollInTurn, Jalousie;

}

public Roll3DView(Context context) {

super(context);

init(context);

}

public Roll3DView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

public Roll3DView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

private void init(Context context) {

bitmapList = new ArrayList<>();

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

camera = new Camera();

matrix = new Matrix();

this.context = context;

}

private void initBitmaps() {

if (viewHeight <= 0 && viewWidth <= 0)

return;

if (null == bitmapList || bitmapList.size() <= 0)

return;

bitmaps = new Bitmap[bitmapList.size()][partNumber];

initIndex();

averageWidth = (int) (viewWidth / partNumber);

averageHeight = (int) (viewHeight / partNumber);

Bitmap partBitmap;

for (int i = 0; i < bitmapList.size(); i++) {

for (int j = 0; j < partNumber; j++) {

Rect rect;

if (rollMode != RollMode.Jalousie) {

if (direction == 1) {//纵向分块

rect = new Rect(j * averageWidth, 0, (j + 1) * averageWidth, viewHeight);

partBitmap = getPartBitmap(bitmapList.get(i), j * averageWidth, 0, rect);

} else {//横向分块

rect = new Rect(0, j * averageHeight, viewWidth, (j + 1) * averageHeight);

partBitmap = getPartBitmap(bitmapList.get(i), 0, j * averageHeight, rect);

}

} else {

if (direction == 1) {

rect = new Rect(0, j * averageHeight, viewWidth, (j + 1) * averageHeight);

partBitmap = getPartBitmap(bitmapList.get(i), 0, j * averageHeight, rect);

} else {

rect = new Rect(j * averageWidth, 0, (j + 1) * averageWidth, viewHeight);

partBitmap = getPartBitmap(bitmapList.get(i), j * averageWidth, 0, rect);

}

}

bitmaps[i][j] = partBitmap;

}

}

}

/**

* 初始化位置

*/

private void initIndex() {

int listSize = bitmapList.size();

nextIndex = currIndex + 1;

preIndex = currIndex - 1;

if (nextIndex > listSize - 1)

nextIndex = 0;

if (preIndex < 0)

preIndex = listSize - 1;

}

@SuppressLint("NewApi")

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (null == bitmapList || bitmapList.size() <= 0)

return;

switch (rollMode) {

case Roll2D:

drawRollWhole3D(canvas, true);

break;

case Whole3D:

drawRollWhole3D(canvas, false);

break;

case SepartConbine:

drawSepartConbine(canvas);

break;

case RollInTurn:

drawRollInTurn(canvas);

break;

case Jalousie:

drawJalousie(canvas);

break;

}

}

/**

* 整体翻滚

* degree 0->90 往下翻滚或者往右翻滚

*

* @param canvas

* @param draw2D 是否画2D效果:true 画2D效果; false 画3D效果

*/

private void drawRollWhole3D(Canvas canvas, boolean draw2D) {

Bitmap currWholeBitmap = bitmapList.get(currIndex);

Bitmap nextWholeBitmap = bitmapList.get(nextIndex);

canvas.save();

if (direction == 1) {

camera.save();

if (draw2D)

camera.rotateX(0);

else

camera.rotateX(-rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-viewWidth / 2, 0);

matrix.postTranslate(viewWidth / 2, axisY);

canvas.drawBitmap(currWholeBitmap, matrix, paint);

camera.save();

if (draw2D)

camera.rotateX(0);

else

camera.rotateX((90 - rotateDegree));

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-viewWidth / 2, -viewHeight);

matrix.postTranslate(viewWidth / 2, axisY);

canvas.drawBitmap(nextWholeBitmap, matrix, paint);

} else {

camera.save();

if (draw2D)

camera.rotateY(0);

else

camera.rotateY(rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(0, -viewHeight / 2);

matrix.postTranslate(axisX, viewHeight / 2);

canvas.drawBitmap(currWholeBitmap, matrix, paint);

camera.save();

if (draw2D)

camera.rotateY(0);

else

camera.rotateY(rotateDegree - 90);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-viewWidth, -viewHeight / 2);

matrix.postTranslate(axisX, viewHeight / 2);

canvas.drawBitmap(nextWholeBitmap, matrix, paint);

}

canvas.restore();

}

/**

* 纵向 头部接合 尾部分离效果

* degree 0->90 往下翻滚 或者 往右翻滚 90->0往上翻滚 或者往翻滚

*

* @param canvas

*/

private void drawSepartConbine(Canvas canvas) {

for (int i = 0; i < partNumber; i++) {

Bitmap currBitmap = bitmaps[currIndex][i];

Bitmap nextBitmap = bitmaps[nextIndex][i];

canvas.save();

if (direction == 1) {

camera.save();

camera.rotateX(-rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-currBitmap.getWidth() / 2, 0);

matrix.postTranslate(currBitmap.getWidth() / 2 + i * averageWidth, axisY);

canvas.drawBitmap(currBitmap, matrix, paint);

camera.save();

camera.rotateX((90 - rotateDegree));

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight());

matrix.postTranslate(nextBitmap.getWidth() / 2 + i * averageWidth, axisY);

canvas.drawBitmap(nextBitmap, matrix, paint);

} else {

camera.save();

camera.rotateY(rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(0, -currBitmap.getHeight() / 2);

matrix.postTranslate(axisX, currBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(currBitmap, matrix, paint);

camera.save();

camera.rotateY(rotateDegree - 90);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight() / 2);

matrix.postTranslate(axisX, nextBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(nextBitmap, matrix, paint);

}

canvas.restore();

}

}

/**

* 依次翻滚

*

* @param canvas

*/

private void drawRollInTurn(Canvas canvas) {

for (int i = 0; i < partNumber; i++) {

Bitmap currBitmap = bitmaps[currIndex][i];

Bitmap nextBitmap = bitmaps[nextIndex][i];

float tDegree = rotateDegree - i * 30;

if (tDegree < 0)

tDegree = 0;

if (tDegree > 90)

tDegree = 90;

canvas.save();

if (direction == 1) {

float tAxisY = tDegree / 90f * viewHeight;

if (tAxisY > viewHeight)

tAxisY = viewHeight;

if (tAxisY < 0)

tAxisY = 0;

camera.save();

camera.rotateX(-tDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-currBitmap.getWidth(), 0);

matrix.postTranslate(currBitmap.getWidth() + i * averageWidth, tAxisY);

canvas.drawBitmap(currBitmap, matrix, paint);

camera.save();

camera.rotateX((90 - tDegree));

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight());

matrix.postTranslate(nextBitmap.getWidth() + i * averageWidth, tAxisY);

canvas.drawBitmap(nextBitmap, matrix, paint);

} else {

float tAxisX = tDegree / 90f * viewWidth;

if (tAxisX > viewWidth)

tAxisX = viewWidth;

if (tAxisX < 0)

tAxisX = 0;

camera.save();

camera.rotateY(tDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(0, -currBitmap.getHeight() / 2);

matrix.postTranslate(tAxisX, currBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(currBitmap, matrix, paint);

//

camera.save();

camera.rotateY(tDegree - 90);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight() / 2);

matrix.postTranslate(tAxisX, nextBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(nextBitmap, matrix, paint);

}

canvas.restore();

}

}

/**

* 百叶窗翻页

*

* @param canvas

*/

private void drawJalousie(Canvas canvas) {

for (int i = 0; i < partNumber; i++) {

Bitmap currBitmap = bitmaps[currIndex][i];

Bitmap nextBitmap = bitmaps[nextIndex][i];

canvas.save();

//注意 百叶窗的翻转方向和其他模式是相反的 横向的时候纵翻 纵向的时候横翻

if (direction == 1) {

if (rotateDegree < 90) {

camera.save();

camera.rotateX(rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight() / 2);

matrix.postTranslate(currBitmap.getWidth() / 2, currBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(currBitmap, matrix, paint);

} else {

camera.save();

camera.rotateX(180 - rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight() / 2);

matrix.postTranslate(nextBitmap.getWidth() / 2, nextBitmap.getHeight() / 2 + i * averageHeight);

canvas.drawBitmap(nextBitmap, matrix, paint);

}

} else {

if (rotateDegree < 90) {

camera.save();

camera.rotateY(rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight() / 2);

matrix.postTranslate(currBitmap.getWidth() / 2 + i * averageWidth, currBitmap.getHeight() / 2);

canvas.drawBitmap(currBitmap, matrix, paint);

} else {

camera.save();

camera.rotateY(180 - rotateDegree);

camera.getMatrix(matrix);

camera.restore();

matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight() / 2);

matrix.postTranslate(nextBitmap.getWidth() / 2 + i * averageWidth, nextBitmap.getHeight() / 2);

canvas.drawBitmap(nextBitmap, matrix, paint);

}

}

canvas.restore();

}

}

/**

* 获取bitmap的一部分

*

* @param bitmap 被裁减的bitmap

* @param rect 裁剪范围 方块

* @return 裁剪后的bitmap

*/

private Bitmap getPartBitmap(Bitmap bitmap, int x, int y, Rect rect) {

Bitmap bitmap1 = Bitmap.createBitmap(bitmap, x, y, rect.width(), rect.height());

return bitmap1;

}

@Override

protected void onFinishInflate() {

super.onFinishInflate();

initBitmaps();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

viewWidth = getMeasuredWidth();

viewHeight = getMeasuredHeight();

if (viewWidth != 0 && viewHeight != 0) {

//缩放处理bitmap

for (int i = 0; i < bitmapList.size(); i++) {

bitmapList.set(i, scaleBitmap(bitmapList.get(i)));

}

initBitmaps();

invalidate();

}

}

public void setRotateDegree(float rotateDegree) {

this.rotateDegree = rotateDegree;

if (direction == 1) {

axisY = rotateDegree / (float) (rollMode == RollMode.Jalousie ? 180 : 90) * viewHeight;

} else {

axisX = rotateDegree / (float) (rollMode == RollMode.Jalousie ? 180 : 90) * viewWidth;

}

invalidate();

}

/**

* 设置滚动模式

*

* @param rollMode

*/

public void setRollMode(RollMode rollMode) {

this.rollMode = rollMode;

}

/**

* 设置滚动方向 1竖直方向 其他为水平方向

*

* @param direction

*/

public void setRollDirection(int direction) {

this.direction = direction;

initBitmaps();

}

public void setPartNumber(int partNumber) {

this.partNumber = partNumber;

initBitmaps();

}

/**

* 关于这几句代码的详细解释

* 参考drawable文件夹中的图片explain_3d_img进行阅读

* <p>

* 1.camera.rotateX(rotateDegree); camera有一个三维坐标系系统 这里绕X轴设置旋转角度

* 加粗*旋转的中心点是被旋转物的中心*加粗

* <p>

* 2.

* matrix.preTranslate(-viewWidth / 2, -viewHeight);

* matrix.postTranslate(viewWidth / 2, axisY);

* <p>

* matrix原点是(0,0)点 要做绕x轴旋转操作 首先要将物体中心点移到(0,0)点(pre),再旋转,然后移回原位置(post) 然后显示的就是旋转后的效果了

* 但是这样操作的话,旋转中心中规中矩在物体中心

* 如果要控制旋转中心点 则像这里的代码那样 在preTranslate的时候 适当改变参数

* 这样便将旋转中心点设置到了图片的上边缘(向左移动0.5宽,向上移动0) 和图片的下边缘(向左移动0.5宽,向上移动整个高)

*/

public void addImageBitmap(Bitmap bitmap) {

bitmapList.add(bitmap);//缩放处理 使bitmap尺寸铺满view

initBitmaps();

invalidate();

}

public void removeBitmapAt(int index) {

bitmapList.remove(index);

}

/**

* 根据给定的宽和高进行拉伸

*

* @param origin 原图

* @return new Bitmap

*/

private Bitmap scaleBitmap(Bitmap origin) {

if (origin == null) {

return null;

}

int height = origin.getHeight();

int width = origin.getWidth();

float scaleWidth = ((float) viewWidth) / width;

float scaleHeight = ((float) viewHeight) / height;

Matrix matrix = new Matrix();

matrix.postScale(scaleWidth, scaleHeight);// 使用后乘

Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);

return newBM;

}

public void toNext() {

if (rolling)

return;

if (rollMode == RollMode.RollInTurn) {

valueAnimator = ValueAnimator.ofFloat(0, 90 + (partNumber - 1) * 30);

} else if (rollMode == RollMode.Jalousie) {

valueAnimator = ValueAnimator.ofFloat(0, 180);

} else {

valueAnimator = ValueAnimator.ofFloat(0, 90);

}

rolling = true;

valueAnimator.setDuration(rollDuration);

valueAnimator.addUpdateListener(updateListener);

valueAnimator.addListener(toNextAnimListener);

valueAnimator.start();

}

private AnimatorListenerAdapter toNextAnimListener = new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

currIndex++;

if (currIndex > bitmapList.size() - 1)

currIndex = 0;

initIndex();

setRotateDegree(0);//更新Index 旋转角度归0

rolling = false;

}

};

private ValueAnimator.AnimatorUpdateListener updateListener = new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

float value = (float) valueAnimator.getAnimatedValue();

setRotateDegree(value);

}

};

/**

* 执行从next 到 curr的翻转过程

*/

public void toPre() {

if (rolling)

return;

int startRotate = 0;

if (rollMode == RollMode.RollInTurn) {

startRotate = 90 + (partNumber - 1) * 30;

} else if (rollMode == RollMode.Jalousie) {

startRotate = 180;

} else {

startRotate = 90;

}

//rotateDegree == 0 说明curr在当前显示

//设置角度为90或180 nextIndex和currIndex preIndex轮转互换,使next显示到当前的图片,然后完成翻转

//可以通俗的理解为 先倒过来 再翻过去 只不过倒过来之前把图片也互换了 所以看不出来而已

rollIndex(true);

setRotateDegree(startRotate);

rolling = true;

valueAnimator = ValueAnimator.ofFloat(startRotate, 0);

valueAnimator.setDuration(rollDuration);

valueAnimator.addUpdateListener(updateListener);

valueAnimator.addListener(toPreAnimListener);

valueAnimator.start();

}

private AnimatorListenerAdapter toPreAnimListener = new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

rollIndex(false);//index位置恢复正常

currIndex--;

if (currIndex < 0)

currIndex = bitmapList.size() - 1;

rolling = false;

initIndex();

invalidate();//index位置修正之后刷新一下

}

};

private void rollIndex(boolean toPre) {

int temp;

if (toPre) {

temp = currIndex;

currIndex = preIndex;

preIndex = nextIndex;

nextIndex = temp;

} else {

temp = currIndex;

currIndex = nextIndex;

nextIndex = preIndex;

preIndex = temp;

}

}

/**

* 设置一次的滚动时间

*

* @param rollDuration

*/

public void setRollDuration(int rollDuration) {

this.rollDuration = rollDuration;

}

}

<2>.自定义布局ItemView类,用于对上述的Roll3DView类进行操作

public class ItemView extends LinearLayout implements View.OnClickListener{

private Context context;

private Roll3DView roll3DView;

private Button toLeft;

private Button toRight;

private Button toUp;

private Button toDown;

private TextView titleTv;

private BitmapDrawable bgDrawable1, bgDrawable2,bgDrawable3,bgDrawable4,bgDrawable5;

public ItemView(Context context) {

super(context);

init(context);

}

public ItemView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

public ItemView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

private void init(Context context) {

this.context = context;

View.inflate(context, R.layout.demo_item,this);

toLeft = (Button) findViewById(R.id.left_btn);

toRight = (Button) findViewById(R.id.right_btn);

toUp = (Button) findViewById(R.id.roll_up_btn);

toDown = (Button) findViewById(R.id.roll_down_btn);

roll3DView = (Roll3DView) findViewById(R.id.three_d_view);

titleTv = (TextView) findViewById(R.id.title_tv);

toLeft.setOnClickListener(this);

toRight.setOnClickListener(this);

toUp.setOnClickListener(this);

toDown.setOnClickListener(this);

bgDrawable1 = (BitmapDrawable) getResources().getDrawable(R.drawable.img1);

bgDrawable2 = (BitmapDrawable) getResources().getDrawable(R.drawable.img2);

bgDrawable3 = (BitmapDrawable) getResources().getDrawable(R.drawable.img3);

bgDrawable4 = (BitmapDrawable) getResources().getDrawable(R.drawable.img4);

bgDrawable5 = (BitmapDrawable) getResources().getDrawable(R.drawable.img5);

Bitmap bitmap1 = bgDrawable1.getBitmap();

Bitmap bitmap2 = bgDrawable2.getBitmap();

Bitmap bitmap3 = bgDrawable3.getBitmap();

Bitmap bitmap4 = bgDrawable4.getBitmap();

Bitmap bitmap5 = bgDrawable5.getBitmap();

roll3DView.addImageBitmap(bitmap1);

roll3DView.addImageBitmap(bitmap2);

roll3DView.addImageBitmap(bitmap3);

roll3DView.addImageBitmap(bitmap4);

roll3DView.addImageBitmap(bitmap5);

roll3DView.setRollMode(Roll3DView.RollMode.Whole3D);

}

@Override

public void onClick(View v) {

switch (v.getId()){

case R.id.left_btn:

roll3DView.setRollDirection(0);

roll3DView.toPre();

break;

case R.id.right_btn:

roll3DView.setRollDirection(0);

roll3DView.toNext();

break;

case R.id.roll_up_btn:

roll3DView.setRollDirection(1);

roll3DView.toPre();

break;

case R.id.roll_down_btn:

roll3DView.setRollDirection(1);

roll3DView.toNext();

break;

}

}

public Roll3DView getRoll3DView() {

return roll3DView;

}

public void setTitleText(String titleText){

titleTv.setText(titleText);

}

}

<3>.在此例中,我用到了注解,是自定义的方式实现,下面给出具体的实现类

ViewInject.java接口类

@Target(ElementType.FIELD) //表示用在字段上

@Retention(RetentionPolicy.RUNTIME) //表示其生命周期是运行时

public @interface ViewInject {

int value() default 0;

}

ViewInjectUtil.java类

public class ViewInjectUtil {

private static final String TAG = "ViewInjectUtil";

public static void injectView(Activity activity){

try {

Field[] fields = activity.getClass().getDeclaredFields(); //获取类中声明的字段

for (Field field : fields) {

boolean isAnnotationPresent = field.isAnnotationPresent(ViewInject.class); //字段是否关联注解

if(isAnnotationPresent){

ViewInject viewInject = field.getAnnotation(ViewInject.class); //获取所关联的注解

field.setAccessible(true);

field.set(activity,activity.findViewById(viewInject.value())); //为字段设置findViewById值

}

}

} catch (IllegalAccessException e) {

e.printStackTrace();

}

}

}

<4>.在Activity控件中实现上述的动画效果。

  • Activity的实现类DemoAct.java

public class DemoAct extends Activity{

@ViewInject(R.id.item1)

private ItemView item1;

@ViewInject(R.id.item2)

private ItemView item2;

@ViewInject(R.id.item3)

private ItemView item3;

@ViewInject(R.id.item4)

private ItemView item4;

@ViewInject(R.id.item5)

private ItemView item5;

private Roll3DView roll3DView1,roll3DView2,roll3DView3,roll3DView4,roll3DView5;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.act_demo);

ViewInjectUtil.injectView(this);

initView();

}

private void initView() {

roll3DView1 = item1.getRoll3DView();

roll3DView2 = item2.getRoll3DView();

roll3DView3 = item3.getRoll3DView();

roll3DView4 = item4.getRoll3DView();

roll3DView5 = item5.getRoll3DView();

roll3DView1.setRollMode(Roll3DView.RollMode.Roll2D);

item1.setTitleText("2D平移");

roll3DView2.setRollMode(Roll3DView.RollMode.Whole3D);

item2.setTitleText("3D翻转");

roll3DView3.setRollMode(Roll3DView.RollMode.SepartConbine);

roll3DView3.setPartNumber(3);

item3.setTitleText("开合效果");

roll3DView4.setRollMode(Roll3DView.RollMode.Jalousie);

roll3DView4.setPartNumber(8);

item4.setTitleText("百叶窗");

roll3DView5.setRollMode(Roll3DView.RollMode.RollInTurn);

roll3DView5.setPartNumber(9);

item5.setTitleText("轮转效果");

}

}

  • Activity的实现类RollDebugAct.java

public class RollDebugAct extends Activity {

private static final String TAG = "TDAct";

@ViewInject(R.id.three_d_view)

private Roll3DView tdView;

@ViewInject(R.id.three_d_view1)

private Roll3DView tdView1;

@ViewInject(R.id.three_d_view2)

private Roll3DView tdView2;

@ViewInject(R.id.three_d_view3)

private Roll3DView tdView3;

@ViewInject(R.id.three_d_view4)

private Roll3DView tdView4;

@ViewInject(R.id.three_d_view5)

private Roll3DView tdView5;

@ViewInject(R.id.three_d_view6)

private Roll3DView tdView6;

@ViewInject(R.id.three_d_view8)

private Roll3DView tdView8;

@ViewInject(R.id.three_d_view9)

private Roll3DView tdView9;

@ViewInject(R.id.atdv_seek_bar)

private SeekBar seekBar;

@ViewInject(R.id.atdv_seek_bar1)

private SeekBar seekBar1;

@ViewInject(R.id.atdv_seek_bar2)

private SeekBar seekBar2;

private int max = 90;

private int max1 = 210;

private int max2 = 180;

private BitmapDrawable bgDrawable1, bgDrawable2;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.act_roll_debug);

ViewInjectUtil.injectView(this);

initView();

}

private void initView() {

seekBar.setMax(max);

seekBar.setOnSeekBarChangeListener(onSeekBarChangeListener);

seekBar1.setMax(max1);

seekBar1.setOnSeekBarChangeListener(onSeekBarChangeListener1);

seekBar2.setMax(max2);

seekBar2.setOnSeekBarChangeListener(onSeekBarChangeListener2);

bgDrawable1 = (BitmapDrawable) getResources().getDrawable(R.drawable.img1);

bgDrawable2 = (BitmapDrawable) getResources().getDrawable(R.drawable.img2);

Bitmap bitmap1 = bgDrawable1.getBitmap();

Bitmap bitmap2 = bgDrawable2.getBitmap();

tdView.addImageBitmap(bitmap1);

tdView1.addImageBitmap(bitmap1);

tdView2.addImageBitmap(bitmap1);

tdView3.addImageBitmap(bitmap1);

tdView4.addImageBitmap(bitmap1);

tdView5.addImageBitmap(bitmap1);

tdView6.addImageBitmap(bitmap1);

tdView8.addImageBitmap(bitmap1);

tdView9.addImageBitmap(bitmap1);

tdView.addImageBitmap(bitmap2);

tdView1.addImageBitmap(bitmap2);

tdView2.addImageBitmap(bitmap2);

tdView3.addImageBitmap(bitmap2);

tdView4.addImageBitmap(bitmap2);

tdView5.addImageBitmap(bitmap2);

tdView6.addImageBitmap(bitmap2);

tdView8.addImageBitmap(bitmap2);

tdView9.addImageBitmap(bitmap2);

}

SeekBar.OnSeekBarChangeListener onSeekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

Log.d(TAG, "progress = " + progress);

tdView.setRollDirection(1);

tdView.setPartNumber(3);

tdView.setRollMode(Roll3DView.RollMode.SepartConbine);

tdView.setRotateDegree(progress);

tdView1.setRollDirection(0);

tdView1.setRollMode(Roll3DView.RollMode.Whole3D);

tdView1.setRotateDegree(progress);

tdView2.setRollDirection(1);

tdView2.setRollMode(Roll3DView.RollMode.Whole3D);

tdView2.setRotateDegree(progress);

tdView3.setRollDirection(0);

tdView3.setPartNumber(3);

tdView3.setRollMode(Roll3DView.RollMode.SepartConbine);

tdView3.setRotateDegree(progress);

tdView4.setRollDirection(1);

tdView4.setPartNumber(3);

tdView4.setRollMode(Roll3DView.RollMode.SepartConbine);

tdView4.setRotateDegree(progress);

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

};

SeekBar.OnSeekBarChangeListener onSeekBarChangeListener1 = new SeekBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

tdView8.setRollDirection(1);

tdView8.setPartNumber(5);

tdView8.setRollMode(Roll3DView.RollMode.RollInTurn);

tdView8.setRotateDegree(progress);

tdView9.setRollDirection(0);

tdView9.setPartNumber(5);

tdView9.setRollMode(Roll3DView.RollMode.RollInTurn);

tdView9.setRotateDegree(progress);

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

};

SeekBar.OnSeekBarChangeListener onSeekBarChangeListener2 = new SeekBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

tdView5.setRollDirection(0);

tdView5.setPartNumber(5);

tdView5.setRollMode(Roll3DView.RollMode.Jalousie);

tdView5.setRotateDegree(progress);

tdView6.setRollDirection(1);

tdView6.setPartNumber(5);

tdView6.setRollMode(Roll3DView.RollMode.Jalousie);

tdView6.setRotateDegree(progress);

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

};

}

<5>.具体实现的资源类文件

  • drawable文件夹下的资源

Android开发之实现图片翻转的动画效果

Android开发之实现图片翻转的动画效果

Android开发之实现图片翻转的动画效果

Android开发之实现图片翻转的动画效果

Android开发之实现图片翻转的动画效果

  • layout文件夹下的布局文件

act_demo.xml布局文件

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<com.yyo.loadingproject.widget.ItemView

android:id="@+id/item1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"></com.yyo.loadingproject.widget.ItemView>

<com.yyo.loadingproject.widget.ItemView

android:id="@+id/item2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"></com.yyo.loadingproject.widget.ItemView>

<com.yyo.loadingproject.widget.ItemView

android:id="@+id/item3"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"></com.yyo.loadingproject.widget.ItemView>

<com.yyo.loadingproject.widget.ItemView

android:id="@+id/item4"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"></com.yyo.loadingproject.widget.ItemView>

<com.yyo.loadingproject.widget.ItemView

android:id="@+id/item5"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"></com.yyo.loadingproject.widget.ItemView>

</LinearLayout>

</ScrollView>

act_roll_debug.xml布局文件

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:orientation="horizontal">

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view"

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:layout_weight="1" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view1"

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:layout_weight="1" />

</LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:orientation="horizontal">

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view2"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view3"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view4"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

</LinearLayout>

<SeekBar

android:id="@+id/atdv_seek_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="30dp" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:orientation="horizontal">

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view5"

android:layout_width="130dp"

android:layout_height="130dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view6"

android:layout_width="130dp"

android:layout_height="130dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

</LinearLayout>

<SeekBar

android:id="@+id/atdv_seek_bar2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="30dp" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:orientation="horizontal">

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view8"

android:layout_width="130dp"

android:layout_height="130dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view9"

android:layout_width="130dp"

android:layout_height="130dp"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp" />

</LinearLayout>

<SeekBar

android:id="@+id/atdv_seek_bar1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="30dp"

android:layout_marginBottom="50dp"/>

</LinearLayout>

</ScrollView>

demo_item.xml布局文件

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:id="@+id/title_tv"

android:layout_width="match_parent"

android:layout_height="25dp"

android:gravity="center"

android:text="百叶窗"

android:textColor="@color/black"

android:textSize="15sp" />

<com.yyo.loadingproject.view.Roll3DView

android:id="@+id/three_d_view"

android:layout_width="150dp"

android:layout_height="120dp"

android:layout_gravity="center_horizontal"

android:layout_marginTop="20dp" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:padding="10dp">

<Button

android:id="@+id/left_btn"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

android:gravity="center"

android:text="左翻"

android:textSize="15sp" />

<Button

android:id="@+id/right_btn"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

android:gravity="center"

android:text="右翻"

android:textSize="15sp" />

<Button

android:id="@+id/roll_up_btn"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

android:gravity="center"

android:text="上翻"

android:textSize="15sp" />

<Button

android:id="@+id/roll_down_btn"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

android:gravity="center"

android:text="下翻"

android:textSize="15sp" />

</LinearLayout>

</LinearLayout>

展开阅读全文

没有更多推荐了,返回首页