码迷,mamicode.com
首页 > 其他好文 > 详细

机顶盒中动画、倒影、悬浮效果实现!!!!

时间:2014-11-18 16:03:58      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:机顶盒动画   倒影   悬浮的效果实现   

       上次写了一篇关于机顶盒焦点事件的获取,以及页面的适配。接下来,开始编写机顶盒开发中对于一些图片的焦点事件,动画效果、倒影的实现。这都是在机顶盒开发界面中常常要要用到的一些效果!!直接开代码:

由于上一篇文章我已经写过了一些界面的适配,(http://blog.csdn.net/a565102223/article/details/41074645)接下来就直接在上次的代码中修改了,为了简单演示起见,我只修改View1的layout1.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="45dp" >


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
<!-- 这个布局中的imageview是创建倒影使用的 -->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="425dp" >


            <ImageView
                android:id="@+id/setting_layout_refimg_0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="50dp" />


            <ImageView
                android:id="@+id/setting_layout_refimg_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="300dip" />
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/video_type_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal" >
<!-- 布局都是使用的帧布局,看起起来会有突出的效果,记得把可点击的属性都加上 -->
            <FrameLayout
                android:id="@+id/setting_layout_fl_0"
                android:layout_width="510dp"
                android:layout_height="344dp" >
<!-- 这张图片作为第一张图片,但图片获得焦点后显示,失去焦点后不显示 -->
                <ImageView
                    android:id="@+id/setting_layout_bg_0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:background="@drawable/setting_left_top" />
<!-- 功能图片 -->
                <ImageView
                    android:id="@+id/setting_layout_log_0"
                    android:layout_width="264dp"
                    android:layout_height="250dp"
                    android:layout_marginLeft="115dp"
                    android:layout_marginTop="20dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:nextFocusDown="@+id/setting_layout_log_1"
                    android:nextFocusRight="@+id/setting_layout_log_3"
                    android:nextFocusUp="@id/settings"
                    android:scaleType="fitXY"
                    android:src="@drawable/setting_net" />
            </FrameLayout>


            <FrameLayout
                android:id="@+id/setting_layout_fl_1"
                android:layout_width="400dp"
                android:layout_height="244dp"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="210dp" >


                <ImageView
                    android:id="@+id/setting_layout_bg_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/right_bottom" />


                <ImageView
                    android:id="@+id/setting_layout_log_1"
                    android:layout_width="264dp"
                    android:layout_height="150dp"
                    android:layout_marginLeft="65dp"
                    android:layout_marginTop="65dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:nextFocusRight="@+id/setting_layout_log_2"
                    android:nextFocusUp="@+id/setting_layout_log_0"
                    android:scaleType="fitXY"
                    android:src="@drawable/setting_update" />
            </FrameLayout>


            <FrameLayout
                android:id="@+id/setting_layout_fl_2"
                android:layout_width="550dp"
                android:layout_height="300dp"
                android:layout_marginLeft="300dp"
                android:layout_marginTop="165dp" >


                <ImageView
                    android:id="@+id/setting_layout_bg_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/vod_big_top" />


                <ImageView
                    android:id="@+id/setting_layout_log_2"
                    android:layout_width="405dp"
                    android:layout_height="200dp"
                    android:layout_marginLeft="85dp"
                    android:layout_marginTop="60dp"
                    android:background="@drawable/setting_viedo"
                    android:clickable="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:nextFocusLeft="@+id/setting_layout_log_1"
                    android:nextFocusRight="@+id/settings"
                    android:nextFocusUp="@+id/setting_layout_log_3" />
            </FrameLayout>


            <FrameLayout
                android:id="@+id/setting_layout_fl_3"
                android:layout_width="387dp"
                android:layout_height="338dp"
                android:layout_marginLeft="294dip"
                android:layout_marginTop="5dip" >


                <ImageView
                    android:id="@+id/setting_layout_bg_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:background="@drawable/setting_left_top" />


                <ImageView
                    android:id="@+id/setting_layout_log_3"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_marginLeft="90dp"
                    android:layout_marginTop="15dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:nextFocusDown="@+id/setting_layout_log_2"
                    android:nextFocusLeft="@+id/setting_layout_log_0"
                    android:nextFocusRight="@+id/setting_layout_log_4"
                    android:src="@drawable/setting" />
            </FrameLayout>


            <FrameLayout
                android:id="@+id/setting_layout_fl_4"
                android:layout_width="387dp"
                android:layout_height="338dp"
                android:layout_marginLeft="500dip"
                android:layout_marginTop="5dip" >


                <ImageView
                    android:id="@+id/setting_layout_bg_4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:background="@drawable/setting_left_top" />


                <ImageView
                    android:id="@+id/setting_layout_log_4"
                    android:layout_width="200dip"
                    android:layout_height="200dip"
                    android:layout_marginLeft="90dp"
                    android:layout_marginTop="15dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:nextFocusDown="@id/setting_layout_log_2"
                    android:nextFocusLeft="@id/setting_layout_log_3"
                    android:nextFocusRight="@id/setting_layout_log_4"
                    android:nextFocusUp="@id/settings"
                    android:src="@drawable/setting_launch" />
            </FrameLayout>
        </RelativeLayout>


        <ImageView
            android:id="@+id/white_boder"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/white_border"
            android:visibility="invisible" />
    </FrameLayout>

</FrameLayout>
接下来就是修改View1的代码了:

package com.example.fouseonclick;

import android.content.Context;
import android.graphics.Bitmap;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class View1 extends LinearLayout implements OnClickListener,
		OnFocusChangeListener {
	private Context mContext;
	private ImageView refImg[] = new ImageView[2];
	private FrameLayout[] fls = new FrameLayout[5];
	private ImageView[] backGrounds = new ImageView[5];// 背景图片层
	private ImageView[] typeLogs = new ImageView[5];// 类型标志

	public View1(Context context) {
		super(context);
		mContext = context;
	}
	//初始化UI
	public void initView() {
		setLayoutParams(new LinearLayout.LayoutParams(
				LinearLayout.LayoutParams.WRAP_CONTENT,
				LinearLayout.LayoutParams.WRAP_CONTENT));
		setGravity(Gravity.CENTER_HORIZONTAL);
		View root = LayoutInflater.from(mContext).inflate(R.layout.layout1,
				null);
		addView(root);
		
		refImg[0] = (ImageView)findViewById(R.id.setting_layout_refimg_0);
		refImg[1] = (ImageView)findViewById(R.id.setting_layout_refimg_1);

		fls[0] = (FrameLayout) findViewById(R.id.setting_layout_fl_0);
		fls[1] = (FrameLayout) findViewById(R.id.setting_layout_fl_1);
		fls[2] = (FrameLayout) findViewById(R.id.setting_layout_fl_2);
		fls[3] = (FrameLayout) findViewById(R.id.setting_layout_fl_3);
		fls[4] = (FrameLayout) findViewById(R.id.setting_layout_fl_4);

		typeLogs[0] = (ImageView) findViewById(R.id.setting_layout_log_0);
		typeLogs[1] = (ImageView) findViewById(R.id.setting_layout_log_1);
		typeLogs[2] = (ImageView) findViewById(R.id.setting_layout_log_2);
		typeLogs[3] = (ImageView) findViewById(R.id.setting_layout_log_3);
		typeLogs[4] = (ImageView) findViewById(R.id.setting_layout_log_4);

		backGrounds[0] = (ImageView) findViewById(R.id.setting_layout_bg_0);
		backGrounds[1] = (ImageView) findViewById(R.id.setting_layout_bg_1);
		backGrounds[2] = (ImageView) findViewById(R.id.setting_layout_bg_2);
		backGrounds[3] = (ImageView) findViewById(R.id.setting_layout_bg_3);
		backGrounds[4] = (ImageView) findViewById(R.id.setting_layout_bg_4);
		//设置事件
		for (int i = 0; i < 5; i++) {
			typeLogs[i].setOnClickListener(this);
			typeLogs[i].setOnFocusChangeListener(this);
			backGrounds[i].setVisibility(View.GONE);
		}
		initRef();
	}

	// 倒影的实现
	private void initRef() {
		int refIndex = 0;
		for (int i = 0; i < 2; i++) {
			switch (i) {
			case 0:
				Bitmap rebm = ImageReflect.createCutReflectedImage(
						ImageReflect.convertViewToBitmap(fls[1]), 0);
				refImg[refIndex].setImageBitmap(rebm);
				refIndex++;
				break;
			case 1:
				Bitmap rebm1 = ImageReflect.createCutReflectedImage(
						ImageReflect.convertViewToBitmap(fls[2]), 0);
				refImg[refIndex].setImageBitmap(rebm1);
				refIndex++;
				break;
			default:
				break;
			}
		}
	}
	//动画效果实现
	ScaleAnimEffect animEffect = new ScaleAnimEffect();

	@Override
	public void onFocusChange(View v, boolean hasFocus) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.setting_layout_log_0:
			if (hasFocus) {
				showOnFocusAnimation(0);
			} else {
				showLooseFocusAinimation(0);
			}
			break;
		case R.id.setting_layout_log_1:
			if (hasFocus) {
				showOnFocusAnimation(1);
			} else {
				showLooseFocusAinimation(1);
			}
			break;
		case R.id.setting_layout_log_2:
			if (hasFocus) {
				showOnFocusAnimation(2);
			} else {
				showLooseFocusAinimation(2);
			}
			break;
		case R.id.setting_layout_log_3:
			if (hasFocus) {
				showOnFocusAnimation(3);
			} else {
				showLooseFocusAinimation(3);
			}
			break;
		case R.id.setting_layout_log_4:
			if (hasFocus) {
				showOnFocusAnimation(4);
			} else {
				showLooseFocusAinimation(4);
			}
			break;
		}
	}
	//失去焦点后的动画
	private void showLooseFocusAinimation(int position) {
		animEffect.setAttributs(1.10f, 1.0f, 1.10f, 1.0f, 100);
		if (position == 0) {

		} else if (position == 1) {

		} else if (position == 4) {

		}
		typeLogs[position].startAnimation(animEffect.createAnimation());
		backGrounds[position].setVisibility(View.GONE);
	}
	//获得焦点后的显示动画
	private void showOnFocusAnimation(final int position) {
		fls[position].bringToFront();
		animEffect.setAttributs(1.0f, 1.10f, 1.0f, 1.10f, 100);
		Animation anim = animEffect.createAnimation();
		anim.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {

			}

			@Override
			public void onAnimationRepeat(Animation animation) {

			}

			@Override
			public void onAnimationEnd(Animation animation) {
				backGrounds[position].startAnimation(animEffect.alphaAnimation(
						0, 1, 150, 0));
				backGrounds[position].setVisibility(View.VISIBLE);

			}
		});
		typeLogs[position].startAnimation(anim);

	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.setting_layout_log_0:
			Toast.makeText(mContext, "点击了无线设置", 3).show();
			break;
		case R.id.setting_layout_log_1:
			Toast.makeText(mContext, "点击了检查更新", 3).show();
			break;
		case R.id.setting_layout_log_2:
			Toast.makeText(mContext, "点击了本地媒体", 3).show();
			break;
		case R.id.setting_layout_log_3:
			Toast.makeText(mContext, "点击了系统设置", 3).show();
			break;
		case R.id.setting_layout_log_4:
			Toast.makeText(mContext, "点击了壁纸设置", 3).show();
			break;
		}

	}
}
倒影实现类:

package com.example.fouseonclick;

import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.view.View;
import android.view.View.MeasureSpec;

public class ImageReflect {
	/**
	 * 图片倒影效果实现
	 */
	private static int reflectImageHeight = 80;

	/**
	 * view界面转换成bitmap
	 * 
	 * @param view
	 * @return
	 */
	public static Bitmap convertViewToBitmap(View view) {
		view.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
				MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
		view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
		view.buildDrawingCache();
		Bitmap bitmap = view.getDrawingCache();
		return bitmap;
	}

	/**
	 * 将bitmap设置倒影
	 * 
	 * @param bitmap
	 * @return
	 */
	public static Bitmap createReflectedImage(Bitmap bitmap, int reflectHeight) {

		int width = bitmap.getWidth();

		int height = bitmap.getHeight();
		if (height <= reflectHeight) {
			return null;

		}

		Matrix matrix = new Matrix();

		matrix.preScale(1, -1);

		Bitmap reflectionImage = Bitmap.createBitmap(bitmap, 0, height
				- reflectHeight, width, reflectHeight, matrix, true);

		Bitmap bitmapWithReflection = Bitmap.createBitmap(width, reflectHeight,
				Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmapWithReflection);
		canvas.drawBitmap(reflectionImage, 0, 0, null);
		LinearGradient shader = new LinearGradient(0, 0, 0,
				bitmapWithReflection.getHeight()

				, 0x80ffffff, 0x00ffffff, TileMode.CLAMP);

		Paint paint = new Paint();
		paint.setShader(shader);

		paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
		canvas.drawRect(0, 0, width, bitmapWithReflection.getHeight(), paint);
		return bitmapWithReflection;

	}

	public static Bitmap createCutReflectedImage(Bitmap bitmap, int cutHeight) {

		int width = bitmap.getWidth();

		int height = bitmap.getHeight();
		int totleHeight = reflectImageHeight + cutHeight;

		if (height <= totleHeight) {
			return null;
		}

		Matrix matrix = new Matrix();

		matrix.preScale(1, -1);

		System.out.println(height - reflectImageHeight - cutHeight);
		Bitmap reflectionImage = Bitmap.createBitmap(bitmap, 0, height
				- reflectImageHeight - cutHeight, width, reflectImageHeight,
				matrix, true);

		Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
				reflectImageHeight, Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmapWithReflection);
		canvas.drawBitmap(reflectionImage, 0, 0, null);
		LinearGradient shader = new LinearGradient(0, 0, 0,
				bitmapWithReflection.getHeight()

				, 0x80ffffff, 0x00ffffff, TileMode.CLAMP);

		Paint paint = new Paint();
		paint.setShader(shader);

		paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
		canvas.drawRect(0, 0, width, bitmapWithReflection.getHeight(), paint);
		if (!reflectionImage.isRecycled()) {
			reflectionImage.recycle();
		}
		// if (!bitmap.isRecycled()) {
		// bitmap.recycle();
		// }
		System.gc();
		return bitmapWithReflection;

	}
}

动画效果实现类:

package com.example.fouseonclick;

import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;

public class ScaleAnimEffect {
	private float fromXScale;
	private float toXScale;
	private float fromYScale;
	private float toYScale;
	private long duration;

	// private long offSetDuration;

	/**
	 * 设置缩放参数
	 * 
	 * @param fromXScale
	 *            初始X轴缩放比例
	 * @param toXScale
	 *            目标X轴缩放比例
	 * @param fromYScale
	 *            初始Y轴缩放比例
	 * @param toYScale
	 *            目标Y轴缩放比例
	 * @param duration
	 *            动画持续时间
	 */
	public void setAttributs(float fromXScale, float toXScale,
			float fromYScale, float toYScale, long duration) {
		this.fromXScale = fromXScale;
		this.fromYScale = fromYScale;
		this.toXScale = toXScale;
		this.toYScale = toYScale;
		this.duration = duration;
	}

	public Animation createAnimation() {
		ScaleAnimation anim = new ScaleAnimation(fromXScale, toXScale,
				fromYScale, toYScale, Animation.RELATIVE_TO_SELF, 0.5f,
				Animation.RELATIVE_TO_SELF, 0.5f);
		anim.setFillAfter(true);
		anim.setInterpolator(new AccelerateInterpolator());
		anim.setDuration(duration);
		return anim;
	}

	public Animation alphaAnimation(float fromAlpha, float toAlpha,
			long duration, long offsetDuration) {
		AlphaAnimation anim = new AlphaAnimation(fromAlpha, toAlpha);
		anim.setDuration(duration);
		anim.setStartOffset(offsetDuration);
		anim.setInterpolator(new AccelerateInterpolator());
		return anim;
	}
}

上面的代码注释都比较清晰,至于后面怎么开发,按照这种规则来就行了。第一张图片做的不是很对称,所以效果不是很好,但基本就是这样的:


bubuko.com,布布扣

机顶盒中动画、倒影、悬浮效果实现!!!!

标签:机顶盒动画   倒影   悬浮的效果实现   

原文地址:http://blog.csdn.net/a565102223/article/details/41246887

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!