首页 > 代码库 > 机顶盒中动画、倒影、悬浮效果实现！！！！
机顶盒中动画、倒影、悬浮效果实现！！！！
上次写了一篇关于机顶盒焦点事件的获取，以及页面的适配。接下来，开始编写机顶盒开发中对于一些图片的焦点事件，动画效果、倒影的实现。这都是在机顶盒开发界面中常常要要用到的一些效果！！直接开代码：
由于上一篇文章我已经写过了一些界面的适配，（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=http://www.mamicode.com/"@drawable/setting_net" />>接下来就是修改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; } }上面的代码注释都比较清晰，至于后面怎么开发，按照这种规则来就行了。第一张图片做的不是很对称，所以效果不是很好，但基本就是这样的：
机顶盒中动画、倒影、悬浮效果实现！！！！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。