Android开发之实现图片翻转的动画效果
1.首先看下运行的效果图
运行效果图一
运行效果图二
运行效果图三
运行效果图四
运行效果图五
2.此例是实现图片的动画翻转,包含四种3D翻转的效果以及一种2D平移效果。在此例中需要实现一个自定义的View类
代码结构图
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文件夹下的资源
-
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>